$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
認証・認可の基本を学ぼう前編
Avatar for kaza kouyuume
0
150
レイトレZ世代に捧ぐ、今からレイトレを始めるための小径
Avatar for ichi-raven ichi_raven
0
490
20 years of Symfony, what's next?

Avatar for Fabien Potencier fabpot
2
310
AWS CDKの推しポイントN選
Avatar for アキキー akihisaikeda
1
240
令和最新版Android Studioで化石デバイス向けアプリを作る
Avatar for Sora Arakawa arkw
0
110
新卒エンジニアのプルリクエスト with AI駆動
Avatar for Yuta Fukunaga fukunaga2025
0
140
251126 TestState APIってなんだっけ?Step Functionsテストどう変わる?
Avatar for Takumi Abe east_takumi
0
300
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
1
130
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
Avatar for SatoAoaka satoaoaka
0
210
WebRTC と Rust と 8K 60fps
Avatar for tnoho tnoho
2
1.9k
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
Avatar for ZOZO Developers zozotech
PRO
8
4.1k
関数の挙動書き換える
Avatar for takato fukui takatofukui
4
770

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.3k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.2k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k

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