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
560
HTML
Using semantic markup
Ryan Krug
January 18, 2012
Tweet
Share
Other Decks in Programming
See All in Programming
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
470
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
1
520
SODA - FACT BOOK
sodainc
1
700
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
130
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.2k
ReadMoreTextView
fornewid
0
250
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
470
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
280
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
Gleamという選択肢
comamoca
6
660
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
620
Parallel::Pipesの紹介
skaji
2
900
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
890
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Designing for humans not robots
tammielis
253
25k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Visualization
eitanlees
146
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
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