<HTML5>

@adamdscott

educator, designer, digital book developer, author

Before we get started

Links, resources and demo files: adamdscott.com

<HTML5>

HTML5 !=

HTML5 + CSS3 + JavaScript

HTML5 =

Simplified Structure + New Elements + APIs

“Pave the Cowpaths”

Source: http://www.flickr.com/photos/heyitsgarrett/

Simplify

The doctype

HTML5

<!DOCTYPE html>

HTML 4.01

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

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Character encoding

HTML5

<meta charset=“utf-8”>

HTML 4.01

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

XHTML 1.0

<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

Resource Linking

HTML5

<link rel="stylesheet" href="css/style.css">
<script src="file.js"></script>

HTML 4.01 & XHTML1.0

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javasscript" src="file.js"></script>

Simplified document head

<!doctype html>
<html lang="en"> 
<head>
  <meta charset="utf-8">
  <title>Document Title</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="file.js"></script>
<head>

New Elements

Structural Elements

Image by Jon Gosier

HTML5 Shiv

code.google.com/p/html5shiv/

Demo Page

Header & Nav

 <header>
  <h1><a href="/">Page Title</a></h1>
  <nav>
    <ul>
      <li><a href="">Nav Link 1</a></li>
      <li><a href="">Nav Link 2</a></li>
      <li><a href="">Nav Link 3</a></li>
    </ul>
  </nav>		
 </header>

Article, Aside, & Footer

<article>
  <h1>Article Header</h1>
  <p>Etiam pretium odio eu mi convallis vitae varius
  neque pharetra. Nulla vestibulum nisi ut sem cursus sed 
  mattis nisi egestas.</p>

  <h2>Article Subhead</h2>
  <p>Vestibulum lacus erat, volutpat vel dignissim
  at, fringilla ut felis.</p>
</article>

<aside>
  <h2>Sidebar Content</h2>
</aside>
	
<footer>
  <p><small>&copy; Copyright 2012. All Rights Reserved.</small></p>
</footer>

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.”

Section

“Section is a blob of content that you could store as an individual record in a database.” 
<section>
  <h1>Any level of heading</h1>
  rest of the content
</section>

Article vs. Section

“(T)he only thing that distinguishes the definition of article from the definition of section is the presence of the phrase “self-contained”. A section groups together thematically-related content. An article groups together self-contained thematically-related content. That distinction is too fine to warrant a separate element, in my opinion.”
— Jeremy Keith

Recommended Reading: bit.ly/agGufn

Bruce Lawson - HTML5 articles and sections: what’s the difference?

Figure & Figcaption

<figure>
  <img src="images/bley.jpg" />
  <figcaption>Paul Bley Trio ESP-Disk 1021, 1966</figcaption>
</figure>
Paul Bley Trio ESP-Disk 1021, 1966

Audio

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

“Honeycombs” by Zsammy

Audio Attributes

Video

<video controls>
  <source src="media/marble.m4v" type="video/mp4" />
  <source src="media/marble.ogv" type="video/ogg" />
  Video tag not supported.
  Download the video <a href="resources/marble.m4v">here</a>.
</video>

Video Attributes

Other Elements (1)

mark

<mark>This text is contained within the mark element</mark>
This text is contained within the mark element

time

<time datetime="2012-02-16">February 16</time>

Other Elements (2)

meter

<meter value="90" min="0" max="100" optimum="100">A-</meter>

Your grade is: A-

progress

<progress value="250" max="1000">25%</progress>
25%

New Form Controls

Form Controls

Demo Form

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Full Name" autofocus required>
 	   
<label for="email">E-mail</label>
<input type="email" name="email" id="email" placeholder="name@example.com" required>
 
<label for="phone">Phone</label>
<input type="tel" name="phone" id="phone" placeholder="ex. (555) 555-5555">
 
<label for="website">Website</label>
<input type="url" name="url" id="website" placeholder="http://">
		
<label for="amount">How much?</label>
<input type="range" id="amount" name="amount">
 
<label for="dstart">Start date</label>
<input type="date" id="dstart" name="dstart">

HTML5 Forms Mobile (1)

HTML5 Forms Mobile (2)

New APIs

API Features

HTML5 Demos:

html5demos.com

Tools & Resources

Browser Support

Tools

Templates/Frameworks

Resources

Demos

On your own

Beginners

Open a text editor and structure an HTML5 document. Use the demo HTML5 file as a reference.


Intermediate

Download the HTML5 Boilerplate files (or Initalizr) and layout a typical blog using the new HTML5 elements.


Advanced

Go crazy! (or help out a beginner)