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

HTML

Ryan Krug
January 18, 2012
Programming
10
540

 HTML

Using semantic markup

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
ARA Ansible for the teams
kksat
0
150
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Unity Android XR入門
sakutama_11
0
140
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
時計仕掛けのCompose
mkeeda
1
280

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
How STYLIGHT went responsive
nonsquared
98
5.3k
How GitHub (no longer) Works
holman
313
140k
Music & Morning Musume
bryan
46
6.3k
Rails Girls Zürich Keynote
gr2m
94
13k
Why Our Code Smells
bkeepers
PRO
335
57k
Building Applications with DynamoDB
mza
93
6.2k
Gamification - CAS2011
davidbonilla
80
5.1k
Fireside Chat
paigeccino
34
3.2k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Code Review Best Practice
trishagee
66
17k

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