1. An Introduction to HTML5

  2. HyperText Markup Language

  3. eXtensible HyperText Markup Language

  4. Web Hypertext Application Technology Working Group

  5. Timeline

  6. Design principles

  7. Doctype

  8. Character encoding

  9. Serialisation

  10. Syntax

  11. Error handling

    This specification defines the parsing rules for HTML documents, whether they are syntactically correct or not.

    Parsing HTML documents
  12. Removed

  13. Changed

  14. Extensibility

    No matter how many elements we bolt on, we will always think of more semantic goodness to add to HTML. And so, having added as many new elements as we like, we still won’t have solved the problem. We don’t need to add specific terms to the vocabulary of HTML, we need to add a mechanism that allows semantic richness to be added to a document as required.

    John Allsopp
  15. Extensibility

    …social co-ordination brings the value in shared data and protocols, not infinite extensibility, which tends to encourage duplication of effort.

    …making the points of extensibility into scarce, community-managed resources … is a good thing. It has positive political and social effects; it forces (or at least inclines) people to co-operate, whether they’re a multi-billion dollar behemoth, or a sole engineer who wants his fifteen minutes of fame.

    Mark Nottingham
  16. New elements

  17. New elements

  18. header

    …a group of introductory or navigational aids.

    <header>
    <h1>My awesome site</h1>
    <p>Welcome to my site. It has lots of cool stuff:</p>
    <ul>
    <li>My lovely horse</li>
    <li>My interesting rock collection</li>
    <li>and more…</li>
    </ul>
    </header>
  19. aside

    …represents a section of a page that consists of content that is tangentially related to the content around it, and which could be considered separate from that content.

    <aside>
    <h1>Brighton</h1>
    <p>Brighton is a town on the south coast of England.</p>
    <p>It is built on the site of Brighthelmston.</p>
    </aside>
  20. hgroup

    …used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

    <hgroup>
    <h1>DOM Scripting</h1>
    <h2>Web Design with JavaScript and The Document Object Model</h2>
    </hgroup>
  21. footer

    …typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

    <footer>
    <p>Copyright 2009 <address>jeremy@adactio.com</address></p>
    </footer>
  22. figure

    …some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

    <figure>
    <img src="horse.jpg" alt="a horse in a field">
    <figcaption>My lovely horse</figcaption>
    </figure>
  23. nav

    …a section of a page that links to other pages or to parts within the page: a section with navigation links.

    <nav>
    <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
    </ul>
    </nav>
  24. section

    …a thematic grouping of content, typically with a heading.

    <section>
    <header>
    <h1>DOM Scripting</h1>
    </header>
    <h2>JavaScript</h2>
    <p>JavaScript is a programming language.</p>
    <h2>The DOM</h2>
    <p>The DOM is an API.</p>
    <footer>Written by Jeremy Keith</footer>
    </section>
  25. article

    …a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication.

    <article>
    <header>
    <h1>DOM Scripting</h1>
    </header>
    <h2>JavaScript</h2>
    <p>JavaScript is a programming language.</p>
    <h2>The DOM</h2>
    <p>The DOM is an API.</p>
    <footer>Written by Jeremy Keith</footer>
    </article>
  26. details

    …a disclosure widget from which the user can obtain additional information or controls.

    <details>
    <summary>Log in</summary>
    <form method="post" action="login">
    <label for="username">Username</label>
    <input type="text" name="username" id="username">
    <label for="password">Password</label>
    <input type="password" name="password" id="password">
    </form>
    </details>
  27. Sectioning content

    Sectioning content is content that defines the scope of headings and footers.

    Each sectioning content element potentially has a heading and an outline.

  28. Implicit sections

    MarkupOutline
    <h1>Foo</h1>
    <p>Lorem ipsum foolor</p>
    <h2>Bar</h2>
    <p>Lorem ipsum barlor</p>
    <h3>Baz</h3>
    <p>Lorem ipsum bazlor</p>
    <h2>Qux</h2>
    <p>Lorem ipsum quxlor</p>
    <small>foobar</small>
    Foo
      Bar
        Baz
      Qux
      foobar
    
  29. Explicit sections

    MarkupOutline
    <h1>Foo</h1>
    <p>Lorem ipsum foolor</p>
    <section>
    <h1>Bar</h1>
    <p>Lorem ipsum barlor</p>
    <h2>Baz</h2>
    <p>Lorem ipsum bazlor</p>
    <h1>Qux</h1>
    <p>Lorem ipsum quxlor</p>
    </section>
    <small>foobar</small>
    Foo
      Bar
        Baz
      Qux
    foobar
    
    exercise
  30. Creating an outline

    hgroup

    The point of hgroup is to mask all but the highest-ranking heading element within from the outline algorithm.

  31. Sectioning roots

    These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

  32. Sectioning roots

    MarkupOutline
    <h1>Foo</h1>
    <p>Lorem ipsum foolor</p>
    <h2>Bar</h2>
    <p>Lorem ipsum barlor</p>
    <blockquote>
    <h3>Baz</h3>
    <p>Lorem ipsum bazlor</p>
    </blockquote>
    <h2>Qux</h2>
    <p>Lorem ipsum quxlor</p>
    <small>foobar</small>
    Foo
      Bar
      Qux
    
  33. Styles

    <style>
    h1 { color: green; }
    </style>
    <h1>What colour am I?</h1>
    <section>
    <style>
    h1 { color: red; }
    </style>
    <h1>What colour am I?</h1>
    </section>
  34. Scoped styles

    <style>
    h1 { color: green; }
    </style>
    <h1>What colour am I?</h1>
    <section>
    <style scoped>
    h1 { color: red; }
    </style>
    <h1>What colour am I?</h1>
    </section>
  35. Global styles

    article, aside, details,
    figure, footer, header,
    hgroup, nav, section {
    	display: block;
    }
  36. Internet Explorer

  37. New elements

    Document with structural elements and no divs
  38. New and old elements

    Document with structural elements and divs
  39. ARIA roles

    Document with divs and roles
  40. Classes

    Document with divs, classes and roles
  41. Options

  42. Resources

  43. Get involved

    WHATWG