Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

HTML

Avatar for Ryan Krug Ryan Krug
January 18, 2012
Programming
10
590

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
DevFest Android in Korea 2025 - 개발자 커뮤니티를 통해 얻는 가치
Avatar for Suhyeon Kim wisemuji
0
170
Graviton と Nitro と私
Avatar for maroon1st maroon1st
0
130
[AtCoder Conference 2025] LLMを使った業務AHCの上⼿な解き⽅
Avatar for terry-u16 terryu16
4
690
Rubyで鍛える仕組み化プロヂュース力
Avatar for muryoimpl muryoimpl
0
160
SwiftUIで本格音ゲー実装してみた
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
490
Claude Codeの「Compacting Conversation」を体感50%減！ CLAUDE.md + 8 Skills で挑むコンテキスト管理術
Avatar for Kazuki Murahama kmurahama
1
630
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
150
大規模Cloud Native環境におけるFalcoの運用
Avatar for Chihiro Hasegawa owlinux1000
0
190
脳の「省エネモード」をデバッグする ～System 1（直感）と System 2（論理）の切り替え～
Avatar for HideyukiKitao panda728
PRO
0
120
生成AIを利用するだけでなく、投資できる組織へ
Avatar for pospome pospome
2
400
ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party
Avatar for Takashi Kokubun k0kubun
0
260
Navigating Dependency Injection with Metro
Avatar for HyunWoo Lee l2hyunwoo
1
170

Featured

See All Featured
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
30
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
130
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
23
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
680
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.2k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
430
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
1
12
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
250
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
27

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