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
580
HTML
Using semantic markup
Ryan Krug
January 18, 2012
Tweet
Share
Other Decks in Programming
See All in Programming
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
650
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
110
iOSでSVG画像を扱う
kishikawakatsumi
0
170
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
930
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
240
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
240
Developer Joy - The New Paradigm
hollycummins
1
360
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
840
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Mobile First: as difficult as doing things right
swwweet
225
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Statistics for Hackers
jakevdp
799
220k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Bash Introduction
62gerente
615
210k
We Have a Design System, Now What?
morganepeng
53
7.8k
RailsConf 2023
tenderlove
30
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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