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

HTML

Ryan Krug
January 18, 2012
Programming
10
530

 HTML

Using semantic markup

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
testcontainers のススメ
sgash708
1
120
Haze - Real time background blurring
chrisbanes
1
520
php-conference-japan-2024
tasuku43
0
330
モバイルアプリにおける自動テストの導入戦略
ostk0069
0
110
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
170
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
850
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
340
useSyncExternalStoreを使いまくる
ssssota
6
1.2k
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
2
110
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
940
nekko cloudにおけるProxmox VE利用事例
irumaru
3
440

Featured

See All Featured
How STYLIGHT went responsive
nonsquared
95
5.2k
Producing Creativity
orderedlist
PRO
341
39k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Building Applications with DynamoDB
mza
91
6.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
99
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Navigating Team Friction
lara
183
15k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
The Invisible Side of Design
smashingmag
298
50k

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