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
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
『品質』という言葉が嫌いな理由
korimu
0
160
テストをしないQAエンジニアは何をしているか？
nealle
0
130
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Spring gRPC について / About Spring gRPC
mackey0225
0
220
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
For a Future-Friendly Web
brad_frost
176
9.5k
Making Projects Easy
brettharned
116
6k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
A better future with KSS
kneath
238
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
How to Ace a Technical Interview
jacobian
276
23k
Being A Developer After 40
akosma
89
590k

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