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
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
9
2.4k
shadcn/uiを使ってReactでの開発を加速させよう！
lef237
0
300
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
550
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
950
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
100
ASP.NET Core の OpenAPIサポート
h455h1
0
120
快速入門可觀測性
blueswen
0
500
Оптимизируем производительность блока Казначейство
lamodatech
0
960
情報漏洩させないための設計
kubotak
5
1.3k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…？
maroon1st
0
110
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
3
370

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
For a Future-Friendly Web
brad_frost
176
9.5k
Adopting Sorbet at Scale
ufuk
74
9.2k
Building Applications with DynamoDB
mza
93
6.2k
4 Signs Your Business is Dying
shpigford
182
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
GitHub's CSS Performance
jonrohan
1030
460k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k

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