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

HTML5

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Edd S Edd S
April 18, 2012
Programming
11
1.8k

 HTML5

Slides from an internal talk I gave at MintDigital. The first section was on new things we got with HTML5 and the second half was pointing out how we could improve our code internally.

Avatar for Edd S

Edd S

April 18, 2012
Tweet

More Decks by Edd S

See All by Edd S
Using React at Deliveroo - LRUG
Avatar for Edd S edds
0
860
Accessibility and how to get the most from your screenreader - EpicFEL
Avatar for Edd S edds
1
610
What even is a table? A quick look at Accessibility APIs
Avatar for Edd S edds
8
2.5k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
Avatar for Edd S edds
2
420
Accessibility and how to get the most from your screenreader - Front End North
Avatar for Edd S edds
3
1.2k
Using D3.js to visualise your analytics data
Avatar for Edd S edds
0
770
GOV.UK Case Study - Fronteers 2013
Avatar for Edd S edds
2
1.1k
Using Sass on GOV.UK
Avatar for Edd S edds
8
930
What the flash - Photography Introduction
Avatar for Edd S edds
67
11k

Other Decks in Programming

See All in Programming
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.3k
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
250
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
200
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
200
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
690
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
250
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.8k
AI & Enginnering
Avatar for codelynx codelynx
0
110
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
300
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
550
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
3
290

Featured

See All Featured
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
230
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
140
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.6k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
680
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
300
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
230
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
49
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
770
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
140
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.6k

Transcript

  1. None
  2. None
  3. None

  4. HTML

  5. Benefits

  6. Semantics

  7. Accessibility

  8. New Features

  9. <new elements />

  10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  11. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!doctype html>

  12. <div id=“header”></div>

  13. <div id=“header”></div> <header></header>

  14. <section></section>

  15. <article></article>

  16. <aside></aside>

  17. “The aside element represents a section of a page that

    consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.” - http://dev.w3.org/html5/spec/Overview.html#the-aside-element

  18. <input type=“...”/>

  19. <input type=“...”/> tel url email range date and time search

    color

  20. <% form_for :user do |f| %> <ol> <li> <%= f.label

    :email %> <%= f.email_field :email %> </li> </ol> <% end %>

  21. <input type=“text” list=“city”> <datalist id=“city”> <option value=“1” label=“London, UK”> <option

    value=“2” label=“Windsor, ON, USA”> </datalist>

  22. <label for="source">How did you hear about us?</label> <datalist id="sources"> <select

    name="source"> <option>please choose...</option> <option value="television">Television</option> <option value="radio">Radio</option> <option value="newspaper">Newspaper</option> <option>Other</option> </select> If other, please specify: </datalist> <input id="source" name="source" list="sources">
  23. None

  24. <input type=“text” name=“email” required /> or in rails <%= f.email_field

    :email, :required => “required” %>

  25. <input type=“text” name=“state” pattern="[A-Z]{2}" /> or in rails <%= f.text_field

    :state, :pattern => “[A-Z]{2}” %>

  26. <input type=“number” name=“age” min=“17” max=“65” /> or in rails <%=

    f.number_field :age, :min => “17”, :max => “65” %>

  27. <input type=“number” name=“age” step=“1” /> or in rails <%= f.number_field

    :age, :step => “1” %>

  28. <div id=“footer”></div>

  29. <div id=“footer”></div> <footer></footer>

  30. Browser Support?

  31. None
  32. None

  33. <header> <h1>BRAND_NAME</h1> </header> <header></header> <h1>BRAND_NAME</h1>

  34. <header> <h1>BRAND_NAME</h1> </header> <header></header> <h1>BRAND_NAME</h1> FAIL

  35. Meet:

  36. The SHIM Meet:

  37. JavaScript?

  38. What do we do Edd?

  39. <div class=“article blog-post”> ... </div> Edd’s Top Tip

  40. POSH Code

  41. <div class=“quote-loves”> 10 Loves </div>

  42. <div class=“quote-loves”> 10 Loves </div> BAD!

  43. <p class=“quote-loves”> 10 Loves </p>

  44. <div class=“quote”> <span id=“loves”>10</span> ... </div>

  45. <div class=“quote”> <span id=“loves”>10</span> ... </div> BAD!

  46. <div class=“quote”> <p id=“loves”>10</p> ... </div>

  47. <h2> <span class=“header”>...</span> <span class=“sub”>...</span> </h2>

  48. <h2> <span class=“header”>...</span> <span class=“sub”>...</span> </h2> BAD!

  49. <hgroup> <h2>...</h2> <h3>...</h3> </hgroup>

  50. <div class=“title”> <a href=“...”>...</a> </div>

  51. <div class=“title”> <a href=“...”>...</a> </div> BAD!

  52. <h4> <a href=“...”>...</a> </h4>

  53. <button class=“blue”> Submit </button>

  54. <button class=“blue”> Submit </button> BAD!

  55. <button class=“account”> Submit </button>

  56. <ul> <li class=“quote”>...</li> <li class=“quote”>...</li> </ul>

  57. BAD! <ul> <li class=“quote”>...</li> <li class=“quote”>...</li> </ul>

  58. <ul class=“quotes”> <li>...</li> <li>...</li> </ul>