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

HTML

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Ryan Krug Ryan Krug
January 18, 2012
Programming
610
10

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012

Other Decks in Programming

See All in Programming
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.3k
LaravelLive Japan の裏方のすべて — 第188回 PHP勉強会＠東京 (2026-06-24)
Avatar for Suguru Oki / スー suguruooki
2
130
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
280
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
Avatar for nrs nrslib
14
5.9k
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
130
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
1
310
キャリア迷子上等 ─ "ない道"は自分で作ればいい
Avatar for 16bit_idol 16bitidol
3
2.3k
Oxcを導入して開発体験が向上した話
Avatar for Yuji Yamaguchi yug1224
4
340
作って学ぶ、 JSX (TSX) ランタイムの基本
Avatar for syumai syumai
7
1.7k
フロントエンドとバックエンドで「1文字」を揃えよう
Avatar for てきめん tekimen youkidearitai
PRO
0
750
Hatena Engineer Seminar #37「言語モデルの活用に関する研究」
Avatar for SlashNephy slashnephy
0
200
ふつうのFeature Flag実践入門
Avatar for irof irof
8
4.2k

Featured

See All Featured
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
250k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
280
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.7k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
580
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
260
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
260
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.2k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k

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