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

HTML

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

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
おやつのお供はお決まりですか？@WWDC25 Recap -Japan-\(region).swift
Avatar for gangan shingangan
0
150
11年かかって やっとVibe Codingに 時代が追いつきましたね
Avatar for yimajo yimajo
0
150
知って得する@cloudflare_vite-pluginのあれこれ
Avatar for chimame chimame
1
120
CIを整備してメンテナンスを生成AIに任せる
Avatar for Hazumi Ichijo hazumirr
0
180
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
Avatar for ivargrimstad ivargrimstad
0
440
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
Avatar for azukiazusa azukiazusa1
2
680
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）
Avatar for RisaTube risatube
PRO
1
470
NEWT Backend Evolution
Avatar for Rodrigo Ramirez xpromx
1
150
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
Avatar for Yuuki Takahashi yktakaha4
2
1.1k
slogパッケージの深掘り
Avatar for やーびー integral0515
0
120
中級グラフィックス入門～効率的なメッシュレット描画～
Avatar for Pocol projectasura
2
1.1k
ISUCON研修おかわり会 講義スライド
Avatar for Yuki Yata arfes0e2b3c
1
480

Featured

See All Featured
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
710
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.6k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k

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