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
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
880
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
110
fs2-io を試してたらバグを見つけて直した話
chencmd
0
240
モバイルアプリにおける自動テストの導入戦略
ostk0069
0
110
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
260
テストケースの名前はどうつけるべきか？
orgachem
PRO
0
150
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
8
1.8k
情報漏洩させないための設計
kubotak
3
500
useSyncExternalStoreを使いまくる
ssssota
6
1.3k
return文におけるstd::moveについて
onihusube
1
1.2k
testcontainers のススメ
sgash708
1
120
선언형 UI에서의 상태관리
l2hyunwoo
0
180

Featured

See All Featured
Fireside Chat
paigeccino
34
3.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Being A Developer After 40
akosma
87
590k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
Speed Design
sergeychernyshev
25
670
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
520
Optimizing for Happiness
mojombo
376
70k
Mobile First: as difficult as doing things right
swwweet
222
9k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Typedesign – Prime Four
hannesfritz
40
2.4k

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