1. Navigation

    • → or ↓ to advance to the next slide or incrementally displayed item
    • ← or ↑ to go to the previous slide or incrementally displayed item
    • Ctrl* + → or Ctrl* + ↓ to jump to the next slide
    • Ctrl* + ← or Ctrl* + ↑ to jump to the previous slide
    • Home to go to the first slide, End to go to the last
    • Ctrl* + G to jump to an arbitrary slide (by slide number or identifier)
    • Ctrl* + H to see thumbnails of the slides and jump to one of them (really slow in every browser except Safari)

    * Ctrl or Shift actually. Only Shift works in Opera.

  2. Lifting the lid on HTML5

  3. HTML5 History

    • 1999 HTML 4.01
    • 2000 XHTML 1
    • 2004 WHATWG starts Web Applications
    • 2007 W3 joins WHATWG on HTML5
    • 2009 XHTML 2 cancelled
    • 2011 HTML5 last call

  4. What is HTML5?

    • An umbrella term: markup elements and JavaScript APIs
    • Brings things which we already do
    • A robust, cross browser, standardised way

  5. What’s in HTML5?

    • APIs (local storage etc.)
    • Error handling
    • Forms
    • New elements
      • Sectioning elements
      • Canvas, SVG, video
    • Tests

  6. Design principles

    • Degrade Gracefully
    • Do Not Reinvent the Wheel
    • Evolution Not Revolution
    • Paves the Cowpaths
    • Support Existing Content

  7. What we’re looking at today

    1. Basics
    2. Semantics
    3. Forms
    4. Video & Audio

  8. 1. Basics

  9. 2022

    • Nonsense
    • Last month, after almost a decade of work, CSS 2.1 was signed off.

  10. Doctypes

    HTML 4 doctype
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    XHTML 1 doctype
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    HTML5 doctype
    <!DOCTYPE html>

  11. The charset

    Pre-HTML5 charset
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    HTML5 charset
    <meta charset="utf-8">

  12. XHTML 1 Boilerplate

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>XHTML 1.0</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

  13. HTML5 Boilerplate

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML5</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

  14. Type attrbiutes

    The XHTML1 way

    <style type="text/css" rel="stylesheet">
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; 
}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->

  15. Type attrbiutes

    The HTML5 way

    <style>
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; 
}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

  16. The shiv

    • Unfortunately we're forgetting about Internet Explorer < 9
    • It doesn’t understand arbitrary elements
    • Needs an examplar of each element created with js
    document.createElement('section');
    • Remy Sharp done all the hard work for us

  17. The Shiv

    <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
    • Includes print shiv
    • If users using IE8 or below with JS turned off they wont see any styles at all

  18. Modernizr

    • Feature detection - tells you what the browser supports.
    • If browser does support let the browser do it
    • If browser doesn't, it goes server side/js
    • if (!modernizr.inputtypes.color){
// javascript fall goes here
}

  19. Complete Boilerplate

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Complete boilerplate</title>
<style>
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; 
}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p>Hello World</p>
</body>
</html>

  21. 2. Semantics

  22. Web statistics

    • In 2005, a Google parser looked at over a billion web pages and tabulated the most common class names
    • Classes such as header, footer and nav were prevalent
    • These emergent semantics map nicely to some of the new structural elements introduced in HTML5

  23. article

    The article element represents 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. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
    • Use for self contained content; blog posts, news stories, comments, reviews, forum posts etc.
    • Specifically designed for syndication

  24. article

    <article>
<header>
	<h1>Apple</h1>
	<p>Published: <time pubdate="pubdate">2009-10-09</time></p>
</header>
<p>The apple is the pomaceous fruit of the apple tree...</p>
<footer>
	<p><small>Creative Commons Attribution-ShareAlike License</small></p>
</footer>
</article>

  25. aside

    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. Such sections are often represented as sidebars in printed typography.
    • Pullquotes provide a good example of this

  26. aside

    <p>The aside element represents a section of a page that consists...</p>
<aside>
<p>Read more about <a href="#">aside</a> here.</p>
</aside>

  27. figure

    The figure element represents a unit of content, optionally with a caption, that is self-contained... and that can be moved away from the main flow of the document without affecting the document’s meaning.

    figcaption

    The figcaption element represents a caption or legend for a figure

  28. figure & figcaption

    <figure>
<img src="/deepfriedmarsbar.jpg" alt="Deep fried Mars bar">
<figcaption>A deep fried Mars bar.</figcaption>
</figure>

  29. footer

    The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
    • Contain information about containing element:
      • who wrote it
      • copyright information
      • links to related content etc.
    • You can have multiple footers within a page

  30. footer

    Basic footer

    <footer>
	<small>Copyright Company Ltd 2011.</small>
</footer>

    Nested footer

    <section>
<p>Section content appears here.</p>
<footer>
	<p>Footer information for section.</p>
</footer>
</section>

  31. header

    The header element represents a group of introductory or navigational aids.
    • A group of introductory or navigational aids
    • You can have multiple headers within a page
    • Defined by the content, rather than the position
    • If just <h1-6> no need for header

  32. header

    Basic header

    <header>
	<h1>The most important heading on this page</h1>
	<p>Some more content</p>
</header>

    Nested header

    <article>
<header>
	<h1>The Highland Fling 2011</h1>
	<p>by Alan White on 9th July 2011.</p>
</header>
<p>Article content</p>
</article>

  33. hgroup

    The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
    • Has been the subject of much deliberation
    • Only ever shows the highest level heading in the outline

  34. hgroup outline example

    <hgroup>
<h1>Title</h1>
<h2>Subtitle</h2>
</hgroup>
<article>
<h1>Article title</h1>
</article>

    Will produce the following outline

    1. Title
      1. Article title

  35. nav

    The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element.
    • Contains navigational elements
    • Major group navigation
    • Not every group needs a nav

  36. nav

    <nav>
<ul>
	<li><a href="/">Home</a></li>
	<li><a href="/about/">About</a></li>
	<lI><a href="/blog/">Blog</a></li>
</ul>
</nav>

  37. section

    The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
    • Grouping together thematically related content
    • A section will have a heading level
    • Browser computes the level of the heading from the depth of the nesting

  38. section

    <section>
	<h1>Section Heading</h1>
	<p>Content here ...</p>
</section>
<section>
	<h1>Section Heading</h1>
	<p>Content here ...</p>
</section>
<section>
	<h1>Section Heading</h1>
	<p>Content here ...</p>
</section>

  39. When to use section

    • Don’t use it just as hook for styling or scripting, that’s a <div>
    • Don’t use it if <article>, <aside> or <nav> is more appropriate
    • People often use section as a #wrapper. Use html,body or div.

  40. time

    The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
    <article>
  <header>
  <h1>I love <time datetime="2011-07-09">9<sup>th</sup> July</time></h1>
  <p>Published on <time datetime="2011-07-08" pubdate>8 July 2011</time> in the general news.</p>
  </header>
  <p>Content here ...</p>
</article>

    The pubdate removes any ambiguity.

  41. Block level links

    XHTML 1

    <div class="story">
<h3><a href="#">Highland Fling 2011</a></h3>
<p><a href="#"><img src="fling.jpg" alt="full story" />2011 welcomed the Highland Fling back to Edinburgh.</a></p>
<p><a href="#">Read more</a></p>
</div>

    HTML5

    <article>
<a href="#">
<h3>Highland Fling 2011</h3>
<p><img src="fling.jpg" alt="Alan White">2011 welcomed the Highland Fling back to Edinburgh</p>
<p>Read more</p>
</a>
</article>

  42. A XHTML1 Blog

    <div class="article">
    <div class="section">

  43. A HTML5 Blog

    <article>
    <section>

  44. Content Models

    • Previously divided elements into; inline and block
    • HTML5 divides these into a wider range
      • Inline elements are now "text-level semantics"
      • Block level elements now fall under "grouping content"
      • Images, audio, video & canvas are "embedded content"
      • Structural elements called "sectioning content"
      • Forms have their own seperate content model

  46. 3. Forms

  47. Forms

    • easier to write
    • controls to look the same across the web
    • less to download
    • built-in validation

    Within this section are live demos. Tab into either the HTML or CSS input boxes to activate the examples.

  48. Input types

    New

    color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.

  49. type="color"

    Photo attribution: Dive into HTML5

  50. datalist

    Opera 11, Firefox 4
     

  51. type="date"

    type="date"
    is for a year, month, day
    type="datetime"
    is for a year, month, and day in combination with hours, minutes and seconds and time zone information
    type="week"
    is for a year and a day
    type="month"
    is for a year and a month but without a day

  52. type="email"

    Opera 11
    Firefox 4b12
    Chrome 10

  53. type="number"

    Opera 9 (notice right alignment)
    Safari 5 (regular left alignment)

  54. type="range"

    Opera 9, Opera 10 & Opera 11
    Safari 5

  55. type="search"


    Safari 5
    Opera 11

  56. Attributes

    New

    autofocus, autocomplete, required, placeholder, pattern, multiple, list, step, max, min

  57. Autofocus

    Safari 5
     

  58. Min, max, & step

  59. Multiple

    Chrome 10
    Chrome 10
    Firefox 4bv12, comma separated
    Opera 11, quoted with ;'s

  60. Placeholder

    Bar unfocused
    Bar focused

  61. Required

    Chrome 10
    Opera 11

  62. Elements

    New

    meter, progress, output, keygen

  63. Meter

    <meter min="0" max="20" value="12">12cm</meter>
    Normal
    Too High
    Too Low
    Exact Optimum
    Value greater than Max
    Value lesser than Min
    Chrome 10
    Opera 11
    Firefox 3.6

  64. Progress

    Chrome 10
    Opera 11
    Firefox 3.6

  65. 4. Video and Audio

  66. Video the XHTML 1 way

    <object width="640" height="385">
<param name="movie" value="http://www.youtube.com/v/24FNE60FRzw&hl=en_GB&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>	
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/24FNE60FRzw&hl=en_GB&fs=1&" type="application/x-­‐shockwave-­‐flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

  67. Video the HTML5 way

    <video poster="poster.jpg" controls width="720" height="405">
<source	src="video.mp4" type="video/mp4">
<source	src="video.webm" type="video/vp8">
<source	src="video.ogv" type="video/ogg">
<p>Your	browser	doesn’t	support	video.</p>
</video>
<p>Download <a href="video.webm">Video title</a> the movie.</p>

  68. Video for everyone

    <video poster="poster.jpg" controls width="720" height="405">
<source	src="video.mp4" type="video/mp4">
<source	src="video.webm" type="video/vp8" />
<source	src="video.ogv" type="video/ogg"	/>

<object	id="player" classid="clsid:D27CDB6E-­‐ AE6D-­‐11cf-­‐96B8-­‐444553540000" name="player" width="720" height="429">
<param name="movie" value="player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=assets/ video.mp4&image=poster.jpg" />
<embed type="application/x-­‐shockwave-­‐flash" id="player2" name="player2" src="player.swf" width="720" height="429" allowscriptaccess="always" allowfullscreen="true" flashvars="file=file=assets/video.mp4&image=poster.jpg" />
<p>Your	browser	doesn't	support	video, please <a href="assets/video.webm">download the movie</a>.</p>
</object>
</video>

  69. Video subtitles

    <track src="file.vtt" kind="subtitles" srclang="en" />

    1
    HH:MM:SS,MS
    01:23:45,678 --> 01:23:46.789
    Hello Dave!

    2
    HH:MM:SS,MS
    01:23:48,910 --> 01:23:49,101
    Hello Jim. How's the wife?

  70. Video subtitles

    • supports positioning of text
    • supports <b> and <i>
    • colouring individual speakers
    • supports vertical text
    • supports RTL
    • supports <ruby> annotations

  72. Audio

    Video the XHTML 1 way

    <embed src="musicfile.wav" hidden="false" autostart="true" loop="false" width="350" height="200" border="0">

  73. Audio

    Video the HTML5 way

    <audio controls preload="auto" autobuffer>
<source src="musicfile.mp3" />
<source src="musicfile.ogg" />
<!-- now include flash fall back -->
</audio>

  74. Moving forward

    • Change doctype
    • Simplify character set
    • Simplify <script> and <style> elements
    • Use block level linking
    • Get into the habit of using HTML5 class names in your HTML4 markup
    • Use the new form input types, they degrade gracefully
    • Use elements such as <time> to add semantics
    • Use <video> and <audio> and make them degrade gracefully
    • Plug the gaps with something like Modernizr

  75. Thank You!