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

HTML5

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
780
Accessibility and how to get the most from your screenreader - EpicFEL
Avatar for Edd S edds
1
580
What even is a table? A quick look at Accessibility APIs
Avatar for Edd S edds
8
2.4k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
Avatar for Edd S edds
2
400
Accessibility and how to get the most from your screenreader - Front End North
Avatar for Edd S edds
3
1.1k
Using D3.js to visualise your analytics data
Avatar for Edd S edds
0
730
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
900
What the flash - Photography Introduction
Avatar for Edd S edds
67
11k

Other Decks in Programming

See All in Programming
実践Webフロントパフォーマンスチューニング
Avatar for しーぴー cp20
46
11k
ソフトウェア品質特性、意識してますか？AIの真の力を引き出す活用事例 / ai-and-software-quality
Avatar for MinoDriven minodriven
16
4.9k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
Avatar for ALGO ARTIS algoartis
0
250
バイラテラルアップサンプリング
Avatar for Fadis fadis
3
640
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
Avatar for Kei Oyama oyamakei
0
210
Rubyの!メソッドをちゃんと理解する
Avatar for Yuto Urushima alstrocrack
2
380
CRUD から CQRS へ ～ 分離が可能にする柔軟性
Avatar for Takashi Kawae tkawae
0
180
個人開発の学生アプリが企業譲渡されるまで
Avatar for akidon0000 akidon0000
2
1.2k
“技術カンファレンスで何か変わる？” ──RubyKaigi後の自分とチームを振り返る
Avatar for shun ssagara00
0
170
Cursorを活用したAIプログラミングについて 入門
Avatar for 株式会社レクト rect
0
340
Flutterでllama.cppをつかってローカルLLMを試してみた
Avatar for sakuraidayo sakuraidayo
0
160
Live Coding: Migrating an Application to Signals
Avatar for Manfred Steyer manfredsteyer
PRO
0
130

Featured

See All Featured
Building Applications with DynamoDB
Avatar for Matt Wood mza
94
6.4k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
14
860
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.4k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Side Projects
Avatar for Sacha Greif sachag
453
42k

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>