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

HTML

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Ryan Krug Ryan Krug
January 18, 2012
Programming
10
600

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
文字コードの話
Avatar for Masaki Hara qnighy
43
16k
Geminiの機能を調べ尽くしてみた
Avatar for yosshi naruyoshimi
0
190
AIとペアプロして処理時間を97%削減した話 #pyconshizu
Avatar for Kashun Yoshida kashewnuts
1
190
CSC307 Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
450
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
350
Claude Codeと2つの巻き戻し戦略 / Two Rewind Strategies with Claude Code
Avatar for 果物リン fruitriin
0
200
エージェント開発初心者の僕が エージェントを作った話と今後やりたいこと
Avatar for ta-hasunuma thasu0123
0
230
AI駆動開発の本音 〜Claude Code並列開発で見えたエンジニアの新しい役割〜
Avatar for hisuzuya hisuzuya
4
460
Rubyと楽しいをつくる / Creating joy with Ruby
Avatar for chobishiba chobishiba
0
200
AI時代のソフトウェア開発でも「人が仕様を書く」から始めよう-医療IT現場での実践とこれから
Avatar for kouki.miura koukimiura
0
130
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
230
AHC061解説
Avatar for Shun_PI shun_pi
0
290

Featured

See All Featured
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.1k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
470
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
140
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
240
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
380
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
700
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
5k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
130
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.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