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

HTML

Ryan Krug
January 18, 2012
Programming
10
550

 HTML

Using semantic markup

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
160
PHP で学ぶ OAuth 入門
azuki
1
130
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
190
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
200
Vibe Codingをせずに Clineを使っている
watany
17
6.1k
国漢文混用体からHolloまで
minhee
1
180
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.1k
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.2k
Making TCPSocket.new "Happy"!
coe401_
1
130
Signal-Based Data Fetching With the New httpResource
manfredsteyer
PRO
0
160
5年間継続して開発した自作OSSの記録
bebeji_nappa
0
170
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
110

Featured

See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How GitHub (no longer) Works
holman
314
140k
Embracing the Ebb and Flow
colly
85
4.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
Scaling GitHub
holman
459
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Speed Design
sergeychernyshev
29
880
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
40
7.2k

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