HTML5

5ce91fa49a613cbc3e20d5f96856473f?s=47 Edd S
April 18, 2012

 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.

5ce91fa49a613cbc3e20d5f96856473f?s=128

Edd S

April 18, 2012
Tweet

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>