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

HTML

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

 HTML

Using semantic markup
Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
ワンバイナリWebサービスのススメ
Avatar for mackee mackee
10
7.5k
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
Avatar for Yui Sakamoto yuisakamoto
6
970
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
Avatar for CUEBiC Inc. cuebic9bic
2
270
複数アプリケーションを育てていくための共通化戦略
Avatar for irof irof
4
1.4k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
Avatar for South maminami373
1
180
OpenNext + Hono on Cloudflare で イマドキWeb開発スタックを実現する
Avatar for rokuosan rokuosan
0
110
「兵法」から見る質とスピード
Avatar for ICKX ickx
0
200
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
Avatar for moznion moznion
1
130
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
Avatar for Masayuki Izumi izumin5210
4
480
CRUD から CQRS へ ～ 分離が可能にする柔軟性
Avatar for Takashi Kawae tkawae
0
230
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
Avatar for Yohei Yasukawa yasulab
PRO
1
130
Javaに鉄道指向プログラミング (Railway Oriented Pro　gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
Avatar for takumi.okamoto cocet33000
1
210

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
30
970
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
178
9.7k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
298
21k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k

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