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

HTML

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

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
Avatar for Atsuya Sato natmark
0
430
スマホで海難事故は防げるか？年間2000件以上の小型船舶の事故に挑むアプリ開発
Avatar for Atsuki Seo atsuki_seo
0
120
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
Avatar for masato hommaru mbook
0
630
TokyoR#119 bignners session2 Visualization
Avatar for yu_sekiya kotatyamtema
0
130
Swift Concurrency - 状態監視の罠
Avatar for Yuki Yasoshima objectiveaudio
2
280
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
Avatar for Yunosuke Sakai ski
0
330
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
Avatar for shibayu36 shibayu36
1
490
そのpreloadは必要？見過ごされたpreloadが技術的負債として爆発した日
Avatar for mugi mugitti9
2
2.6k
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
230
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
Avatar for Shia riseshia
0
130
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
Avatar for Yutaro Muta yutailang0119
0
210
私はどうやって技術力を上げたのか
Avatar for Yusuke Wada yusukebe
42
17k

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
56
6.6k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k

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