Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML
Search
Ryan Krug
January 18, 2012
Programming
10
570
HTML
Using semantic markup
Ryan Krug
January 18, 2012
Tweet
Share
Other Decks in Programming
See All in Programming
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
180
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
440
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
680
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
1
470
NEWT Backend Evolution
xpromx
1
150
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
slogパッケージの深掘り
integral0515
0
120
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.1k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
How to Ace a Technical Interview
jacobian
278
23k
For a Future-Friendly Web
brad_frost
179
9.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Agile that works and the tools we love
rasmusluckow
329
21k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Designing for Performance
lara
610
69k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Transcript
HTML Using semantic markup
What are we here for?
User Interfaces Content Presentation Behavior
User Interfaces Content: HTML Presentation: CSS Behavior: Javascript
1996 2002 2005 html css javascript
Why? Accessible Portable Maintainable
Why? Accessible: SEO Portable: Different Devices Maintainable: Client Edits
http://foodsense.is/ Example
HTML defines content & structure
HTML is not a programming language But it is a
formatting language
Content informs the formatting. Based on meaning rather than look.
<em>text</em> vs <i>text</i> <strong>text</strong> vs <b>text</b>
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
HTML first > Semantic markup CSS After > Presentation
HTML Boilerplate <!doctype html> <html> <head> <title>My Title</title> </head> <body>
<!-- content here --> </body> </html>
<tagname attribute=“value”> content </tagname> <p class=“demotext”> I’m <em>really</em> sad </p>
Content Tags
<tagname attribute=“value”> <img src=“smile.png”> Empty Content Tags
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
Special Characters & & < < > > © ©
® ® ™ ™ – – — — … … ‘ ‘ ’ ’ “ “ ” ”
Demo http://github.com/krug/art304.demos