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

HTML

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Ryan Krug Ryan Krug
January 18, 2012
Programming
10
600

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
260
AWS Infrastructure as Code の新機能 2025 総まとめ 〜SA 4人による怒涛のデモ祭り〜
Avatar for Kenji Kono konokenj
10
3.4k
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記：那些困在 Alpha 加護病房太久的 Metrics
Avatar for ChengHao Yang tico88612
0
200
Angular-Apps smarter machen mit Gen AI: Lokal und offlinefähig - Hands-on Workshop!
Avatar for Christian Liebel christianliebel
PRO
0
110
Vuetify 3 → 4 何が変わった？差分と移行ポイント10分まとめ
Avatar for kouki.miura koukimiura
0
140
モジュラモノリスにおける境界をGoのinternalパッケージで守る
Avatar for magavel magavel
0
3.5k
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
200
OTP を自動で入力する裏技
Avatar for Megabits_mzq megabitsenmzq
0
110
エージェント開発初心者の僕が エージェントを作った話と今後やりたいこと
Avatar for ta-hasunuma thasu0123
0
250
Agent Skills Workshop - AIへの頼み方を仕組み化する
Avatar for Gota gotalab555
15
8.8k
New in Go 1.26 Implementing go fix in product development
Avatar for sunecosuri sunecosuri
0
440
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
Avatar for ya_ma23 ya_ma23
0
520

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.6M
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
62
51k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
110
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
87

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