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

HTML5

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.

Edd S

April 18, 2012
Tweet

More Decks by Edd S

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

Other Decks in Programming

See All in Programming
Refactor your code - refactor yourself
xosofox
1
250
Recoilを剥がしている話
kirik
5
6.6k
事業成長を爆速で進めてきたプロダクトエンジニアたちの成功談・失敗談
nealle
3
1.4k
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
270
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
KubeCon + CloudNativeCon NA 2024 Overview at Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
240
Criando Commits Incríveis no Git
marcelgsantos
2
170
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
命名をリントする
chiroruxx
1
380
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
610

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
BBQ
matthewcrist
85
9.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Adopting Sorbet at Scale
ufuk
73
9.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k

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>