HTML5

Benefits

Semantics

Accessibility

New Features

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

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

“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

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

<% form_for :user do |f| %> <ol> <li> <%= f.label
:email %> <%= f.email_field :email %> </li> </ol> <% end %>

<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">

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

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

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

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

Browser Support?

<header> <h1>BRAND_NAME</h1> </header> <header></header> <h1>BRAND_NAME</h1>

<header> <h1>BRAND_NAME</h1> </header> <header></header> <h1>BRAND_NAME</h1> FAIL

The SHIM Meet:

JavaScript?

What do we do Edd?

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

POSH Code

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

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

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

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

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

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

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

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

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

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

HTML5

HTML5

More Decks by Edd S

Other Decks in Programming

Featured

Transcript