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

HTML

Ryan Krug
January 18, 2012
Programming
10
520

 HTML

Using semantic markup

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
Jakarta EE meets AI
ivargrimstad
0
210
最新TCAキャッチアップ
0si43
0
190
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
300
Amazon Bedrock Agentsを用いてアプリ開発してみた！
har1101
0
340
CSC509 Lecture 12
javiergs
PRO
0
160
AWS Lambdaから始まった
Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
flutterkaigi_2024.pdf
kyoheig3
0
150
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930
聞き手から登壇者へ： RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230

Featured

See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Agile that works and the tools we love
rasmusluckow
327
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Site-Speed That Sticks
csswizardry
0
28
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Thoughts on Productivity
jonyablonski
67
4.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Code Reviewing Like a Champion
maltzj
520
39k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k

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