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

HTML

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
『Kubernetes ☸️ で実践する Platform Engineering 』を最高速度で読み抜いたる！！👊🏻
Avatar for ⛵️ 長谷川 広樹 🐬 hiroki_hasegawa
0
100
技術検証結果の整理と解析をAIに任せよう！
Avatar for Keisuke Ikeda keisukeikeda
0
130
AI駆動開発の本音 〜Claude Code並列開発で見えたエンジニアの新しい役割〜
Avatar for hisuzuya hisuzuya
4
530
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
410
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
Avatar for Arthur arthur1
2
580
ベクトル検索のフィルタを用いた機械学習モデルとの統合 / python-meetup-fukuoka-06-vector-attr
Avatar for monochromegane monochromegane
2
500
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
Avatar for nnaka2992 nnaka2992
1
320
new(1.26) ← これすき / kamakura.go #8
Avatar for utagawa kiki utgwkk
0
2.6k
ロボットのための工場に灯りは要らない
Avatar for watany watany
11
3.1k
Codex の「自走力」を高める
Avatar for yorifuji yorifuji
0
1.3k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
790
Kubernetesでセルフホストが簡単なNewSQLを求めて / Seeking a NewSQL Database That's Simple to Self-Host on Kubernetes
Avatar for nnaka2992 nnaka2992
0
170

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
210
It's Worth the Effort
Avatar for 3n 3n
188
29k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
110

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