Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML

Ryan Krug
January 18, 2012
Programming
10
520

 HTML

Using semantic markup

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.3k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism - An Example
philipschwarz
PRO
0
170
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
讓數據說話：用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
560
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
160
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
350

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
What's new in Ruby 2.0
geeforr
342
31k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Bash Introduction
62gerente
608
210k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290

Transcript

  1. HTML Using semantic markup

  2. What are we here for?

  3. User Interfaces Content Presentation Behavior

  4. User Interfaces Content: HTML Presentation: CSS Behavior: Javascript

  5. 1996 2002 2005 html css javascript

  6. Why? Accessible Portable Maintainable

  7. Why? Accessible: SEO Portable: Different Devices Maintainable: Client Edits

  8. http://foodsense.is/ Example

  9. HTML defines content & structure

  10. HTML is not a programming language But it is a

    formatting language

  11. Content informs the formatting. Based on meaning rather than look.

  12. <em>text</em> vs <i>text</i> <strong>text</strong> vs <b>text</b>

  13. Bad Tags b bold text big makes text slightly larger

    center centers text font specifies size, color, and typeface i italic text small makes text slightly smaller strike strike-through text u underline text

  14. HTML first > Semantic markup CSS After > Presentation

  15. HTML Boilerplate <!doctype html> <html> <head> <title>My Title</title> </head> <body>

    <!-- content here --> </body> </html>

  16. <tagname attribute=“value”> content </tagname> <p class=“demotext”> I’m <em>really</em> sad </p>

    Content Tags

  17. <tagname attribute=“value”> <img src=“smile.png”> Empty Content Tags

  18. Tags Headings h1,h2,h3,h4,h5,h6 Paragraphs p Quotes blockquote Lists ol,ul,li,dl,dt,dd Tables

    table,tr,th,td Forms form,label,input,textarea,select Text em,strong Images img Links a

  19. Special Characters & &amp; < &lt; > &gt; © &copy;

    ® &reg; ™ &trade; – &ndash; — &mdash; … &hellip; ‘ &lsquo; ’ &rsquo; “ &ldquo; ” &rdquo;

  20. Demo http://github.com/krug/art304.demos