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

HTML

Avatar for Ryan Krug Ryan Krug
January 18, 2012
Programming
10
550

 HTML

Using semantic markup
Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
Avatar for MinoDriven minodriven
8
1.9k
The Missing Link in Angular’s Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
Avatar for Kotaro Kamashima kotaro666
0
110
Optimizing JRuby 10
Avatar for headius headius
0
570
REALITY コマンド作成チュートリアル
Avatar for にしうり らく nishiuriraku
0
120
Creating Awesome Change in SmartNews! En
Avatar for Ikuo Suyama martin_lover
0
110
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
Avatar for Tomohisa Takaoka tomohisa
0
230
The New Developer Workflow: How AI Transforms Ideas into Code
Avatar for Daniel Sogl danielsogl
0
100
GitHub Copilot for Azureを使い倒したい
Avatar for Kento.Yamada ymd65536
1
310
Serving TUIs over SSH with Go
Avatar for Carlos Alexandro Becker caarlos0
0
570
Cline with Amazon Bedrockで爆速開発体験ハンズオン/ 株式会社ブリューアス登壇資料
Avatar for M.Han mhan
0
110
The Implementations of Advanced LR Parser Algorithm
Avatar for Junichi Kobayashi junk0612
1
1.3k

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
41
2.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
690
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
820
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.2k
Code Review Best Practice
Avatar for Trisha Gee trishagee
67
18k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.3k

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