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

HTML

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

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
Avatar for BPStudy bpstudy
0
290
Go製CLIツールをnpmで配布するには
Avatar for syumai syumai
2
1.1k
AIのメモリー
Avatar for watany watany
13
1.4k
物語を動かす行動"量" #エンジニアニメ
Avatar for konifar konifar
14
4.1k
実践！App Intents対応
Avatar for 野瀬田　裕樹 yuukiw00w
1
230
あなたとJIT, 今すぐアセンブ ル
Avatar for monochrome sisshiki1969
1
580
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
Avatar for yoshi takumiyoshikawa
2
280
画像コンペでのベースラインモデルの育て方
Avatar for tattaka tattaka
3
1.5k
JetBrainsのAI機能の紹介 #jjug
Avatar for yusuke yusuke
0
200
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
Avatar for sushi-cat sushi0120
0
250
AHC051解法紹介
Avatar for eijirou eijirou
0
380
令和最新版手のひらコンピュータ
Avatar for KOBA789 koba789
13
7.3k

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
235
140k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.3k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
332
22k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.6k
Done Done
Avatar for chrislema chrislema
185
16k

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