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
490
HTML
Using semantic markup
Ryan Krug
January 18, 2012
Tweet
Share
Other Decks in Programming
See All in Programming
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
4
870
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.2k
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
24
7.3k
プロンプトエンジニアリング入門
tomokusaba
2
970
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.2k
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
document.write再考
brn
5
2.5k
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
510
LLMチャットボットのアプリケーション設計Tips
os1ma
4
660
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
Writing Fast Ruby
sferik
619
59k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
How to name files
jennybc
62
92k
Practical Orchestrator
shlominoach
180
9.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Why Our Code Smells
bkeepers
PRO
330
56k
Fireside Chat
paigeccino
19
2.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
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