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

HTML

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
PostgreSQL を使った快適な go test 環境を求めて
Avatar for Kotaro Otaka otakakot
0
290
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
290
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
1.1k
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
9.5k
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
2k
Claude Codeセッション現状確認 2026福岡 / fukuoka-aicoding-00-beacon
Avatar for monochromegane monochromegane
1
170
Metaprogramming isn't real, it can't hurt you
Avatar for Masafumi Okura okuramasafumi
0
130
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
1.8k
AIに仕事を丸投げしたら、本当に楽になれるのか
Avatar for ディップ株式会社 dip_tech
PRO
0
160
ご飯食べながらエージェントが開発できる。そう、Agentic Engineeringならね。
Avatar for yoko / Naoki Yokomachi yokomachi
1
260
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
440
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
350

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
170
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
180
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
140
HDC tutorial
Avatar for Michiel Stock michielstock
1
450
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
130
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
220

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