$30 off During Our Annual Pro Sale. View Details »

HTML

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

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
CSC509 Lecture 14
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
220
dnx で実行できるコマンド、作ってみました
Avatar for Tomohisa Takaoka tomohisa
0
130
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
190
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
Avatar for Shunsuke KITADA shunk031
11
6.9k
ローターアクトEクラブ アメリカンナイト：川端 柚菜 氏（Japan O.K. ローターアクトEクラブ 会長）:2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
440
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
Avatar for HideyukiKitao panda728
PRO
1
1.4k
WebRTC、 綺麗に見るか滑らかに見るか
Avatar for sublimer sublimer
1
140
AIコーディングエージェント（Gemini）
Avatar for kondai kondai24
0
150
ViewファーストなRailsアプリ開発のたのしさ
Avatar for sugiwe sugiwe
0
390
配送計画の均等化機能を提供する取り組みについて(⽩⾦鉱業 Meetup Vol.21@六本⽊（数理最適化編))
Avatar for 伊豆原基人 izu_nori
0
120
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
Avatar for おおいし bicstone
1
1k
無秩序からの脱却 / Emergence from chaos
Avatar for nrs nrslib
2
12k

Featured

See All Featured
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
690
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k

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