HTML 5 Markup

Geoff Richards

geoff@laxan.com

HTML 4 metadata

Doctype declaration and charset are verbose:

<!DOCTYPE HTML PUBLIC
          "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>My Page</title>
  <meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8">
  ...

HTML 5 metadata

Likely to be simpler:

<!DOCTYPE html>
<html>
 <head>
  <title>My Page</title>
  <meta charset="utf-8">
  ...

XHTML 5 would have no DOCTYPE at all.

HTML 5 page stucture

Sections instead of heading numbers:

<body>
 <nav>...</nav>

 <article>
  <section>
   <header>...</header>
  </section>
 </article>

 <footer>...</footer>
</body>

New markup

Marginal notes, pull-quotes, and so on:

<aside>This is a marginal note</aside>

Images with captions:

<figure>
 <img src="pic.jpg" alt="Photo of...">
 <caption>Blah...</caption>
</figure>

HTML 5 forms

New field types:

<input type="email" name="...">
<input type="datetime" name="...">
<input type="url" name="...">
<input type="number" name="...">

Degrade gracefully to plain text fields in older browsers.

New constraints:

<input required>
<input pattern="[a-z]">
<input type="range" min="1" max="100">

Ping counting

Allow click counting in parallel to page downloading:

<a href="http://company.com/"
   ping="http://counter.doubleclick.com/12345">...</a>

Privacy concerns – but this is actually better than redirectors!

Probably won't get implemented widely enough to replace redirectors anyway.