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

HTML

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

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
モテるデスク環境
Avatar for mozumasu mozumasu
3
1.4k
ボトムアップの生成AI活用を推進する社内AIエージェント開発
Avatar for aku11i aku11i
0
1.2k
AIと人間の共創開発！OSSで試行錯誤した開発スタイル
Avatar for mae616 mae616
2
830
React Nativeならぬ"Vue Native"が実現するかも？_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
Avatar for Yuto Nagai(Future) yut0naga1_fa
2
1.9k
Software Architecture
Avatar for Henning Schwentner hschwentner
6
2.4k
contribution to astral-sh/uv
Avatar for Shunsuke Tsuchiya shunsock
0
560
コードとあなたと私の距離 / The Distance Between Code, You, and I
Avatar for YAMAOKA Hiroyuki hiro_y
0
210
Node-REDのノードの開発・活用事例とコミュニティとの関わり(Node-RED Con Nagoya 2025)
Avatar for 404background 404background
0
110
CSC305 Lecture 10
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
320
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
420
Claude Agent SDK を使ってみよう
Avatar for Hayami Shuhei hyshu
0
1.4k
CSC305 Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.1k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Done Done
Avatar for chrislema chrislema
185
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
630
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k

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