Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

HTML

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

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012

Other Decks in Programming

See All in Programming
型解析で実現する Go の言語内 DSL / Conference に Go! タイムテーブルの歩き方 for Gophers
Avatar for mazrean mazrean
0
150
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
4.2k
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
Avatar for bash0C7 bash0c7
0
380
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
190
スマート反転とウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
0
200
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
150
数年滞っていたダークモード対応をおよそ2週間で完了させる
Avatar for Kazuki Chigita chigichan24
0
700
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
150
20260914 AIエージェント時代のPlatform Engineering　LLM基盤とプロダクトの責務境界線
Avatar for Taiki Kanzaki kanfab1
6
1.8k
業務時間外もAIに働いてもらう話
Avatar for taki colorful12
3
10k
Jetpack Compose メカニズム
Avatar for Jaewoong skydoves
0
330
LL言語やWebフレームワークの PostgreSQL対応 〜DBの機能がユーザーに届くまで〜
Avatar for 武田 憲太郎 kentaroutakeda
0
150

Featured

See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
500
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
700
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
600
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
410
How to make the Groovebox
Avatar for あそなす asonas
2
2.4k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.4k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
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