HTML5:
Getting Started

HTML5: Getting Started

  • HTML5 DOCTYPE
  • Page Encoding
  • HTML5 Markup
  • New And Updated Elements
  • Structural Elements
  • New Attributes
  • Deprecated Elements And Attributes

HTML5 Components

  • Doctype
  • Character Set
  • Type Attribute
  • Semantic elements
  • <figure> & <figcaption>
  • <details> & <summary>
  • Ruby annotation
  • contenteditable attribute
  • dataset & data-* attributes
  • HTML5 form features
  • Form validation
  • <datalist> element
  • <progress> & <meter>
  • <audio> element
  • <video> element
  • <canvas>
  • WebGL - 3D Canvas graphics

Old v. New Doctype 

<!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>XHTML1 Strict Document</title>
<script  type="text/javascript" src="boo.js"></script>
<link  type="text/css" rel="stylesheet" href="a.css"/>
</head>
<body>
</body>
</html>
-

New Syntax 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Document</title>
<script src="boo.js"></script>
<link rel="stylesheet" href="a.css"/>
</head>
<body>
</body>
</html>
  • Short DTD
  • Short Charset
  • No ‘type’ attribute

Minimalistic Syntax 

<!DOCTYPE html>
<meta charset=UTF-8>
<title>Document Intentionally Blanks</title>

<!DOCTYPE html>
<title>Tweetable Document</title>
<p>Tweetable HTML5</p>
  • Short DTD
  • Short Charset
  • No ‘type’ attribute
  • <body> and <head> are inferred.

View in browser

Non-Semantic Elements

<div id="header">
<div id="nav">
<div id="sidebar">
<div id="content">
<div class="article">
<div class="section">
<div class="section">
<div class="footer">

Semantic Elements

<header>
<nav>
<aside>
<div id="content">
<article>
<section>
<section>
<footer>

hgroup 

<hgroup>
   <h1>This is my header</h1>
   <h2>This is my subtitle</h2>
<hgroup>

figure & figcaption

HTML5 & CSS3 for the Real World
My Book
<figure>
  <img src="htmlcss1.png" 
    alt="HTML5 &amp; CSS3 for the Real World"/>
  <figcaption>
     My Book
  </figcaption>
</figure>

Details & Summary

<details>
   <summary>5 of 5 stars from three reviews</summary>
   <ul>
      <li>5 stars from Amazon</li>
      <li>5 stars from Costco</li>
      <li>5 stars from Barns &amp; Noble</li>
   </ul>
</details>

Example: Click below

5 of 5 stars from three reviews
  • 5 stars from Amazon
  • 5 stars from Costco
  • 5 stars from Barns & Noble
  • Chrome 12
  • Safari
  • Firefox 7
  • Opera 11
  • IE 10
  • In webkit nightly

New Elements

  • article
  • aside
  • audio
  • canvas
  • command
  • datalist
  • details
  • embed
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • keygen
  • mark
  • meter
  • nav
  • output
  • progress
  • rp
  • rt
  • ruby
  • section
  • source
  • summary
  • time
  • video
  • wbr

Changed Elements

  • <a>
  • <small>
  • <s>
  • <cite>
  • <i>
  • <b>
  • <u>
  • <hr>
  • <menu>
  • <input>
  • <meta>

Exercise: convert page to HTML5

  • Download the zip file
  • Open up sample01.html
  • Make appropriate changes:
    1. Convert the DTD to HTML5.
    2. Minify the meta tag
    3. Remove excess noise from the link tag
    4. Convert the DTD to HTML5.
    5. Convert everything not nested in <li>'s into HTML5 elments, removing classes and ID's that are no longer necessary
  • Compare to sample02.html, which is a possible solution

Supporting Old Browsers

IE6-8 does not style elements that don't exist, so create the elements!

<!--[if IE]> 
<script type="text/javascript"> 
(function(){ 
  var html5elmeents ="article|aside|audio|canvas|...|video";
  html5elmeents.split('|'); 
  for(var i = 0; i < html5elmeents.length; i++){
    document.createElement(html5elmeents[i]); 
  } 
})(); 
</script> 
<![endif]-->

modernizr.com

modernizr.com
www.modernizr.com
www.html5boilerplate.com

Ruby annotation

"Ruby" are short runs of text alongside the base text, typically used in East Asian documents to indicate pronunciation or to provide a short annotation.

  • <ruby> container for the next 2 elements
  • <rt> ruby text
  • <rp> ruby parenthesis
display: ruby | ruby-base | ruby-text | 
   ruby-base-container | ruby-text-container;

ruby-align: auto | start | left | center | end | right | 
   distribute-letter | distribute-space | line-edge;

ruby-overhang: auto | start | end | none;

ruby-position: before | after | right | inline;

ruby-span: attr(x) | none;

More Information

New Attributes

  • tabindex /* now applicable to any element (-1)
  • hidden /* no longer relevant */
  • contextMenu contextmenu="menuID"
  • spellCheck /* denotes errors */
  • data-* /* anything you want, accessible via dataset */
  • ContentEditable /* you can edit. accessible via the DOM */
  • draggable /* with the drag & drop API */
  • dropzone /* with the drag & drop API */
  • microdata attributes /* like microformats */
  • ARIA /* accessibility */

Global Attributes

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

tabindex 

<p tabindex="-1">Focusable with Javascript</p>
  • Every element can have tabindex
  • BUT: Maintaining source order is important
  • Only give a tabindex of -1
  • REASON: Enables element to be focusable with JS
    without changing ‘tab» order

contentEditable (& spellcheck) 

<pre contenteditable>Look. I am editable>/pre>
I am editable

This paragrph has an error.

  • Chrome
  • Safari
  • Firefox 2
  • Opera
  • IE
spellcheck="true | false"
  • Chrome
  • Safari
  • Firefox 9
  • Opera
  • IE 10

data-* attributes

Define your own DOM manipulable data attributes

<div id="card27" data-cardID="27" data-row="3" data-col="2"></div>
var info = document.querySelector('#card27');
var cardinfo = [];
for (var key in info.dataset) {
  cardinfo.push(key, ': ', info.dataset[key], ',');
}
var currentCard = cardinfo.join('');

Result:

currentCard == 'cardID: 27, row: 3, col: 2'
var cardID = info.getAttribute('data-cardID'); //27

All browsers support "data-*", but full support of 'dataset started with IE10, FF6, Safari 5.1, Chrome 7, Opera 11.1. Supported in iOS and Android. Polly fill | jQuery Polyfill

Microdata

Google processes RDFa, Microformats and Microdata.

  itemid
  itemprop
  itemref
  itemscope
  itemtype
person       url
nickname     affiliation(org)
photo        friend
title        contact
role         acquaintance
             address(adr)
<div itemscope itemtype="http://data-vocabulary.org/Person">  
 <img src="estelle.gif" itemprop="photo">  
  <p>Name: <i itemprop="name">Estelle Weyl</i>
  <p>Title: <i itemprop="title">Speaker, UI Engineer</i>   
  <p>Blog: <a href="http://standardista.com" itemprop="affiliation">Standardista.   
  <p itemprop="address" itemscope  
    itemtype="http://data-vocabulary.org/Address">Address:   
    <i itemprop="locality">San Carlos</i>,  
    <i itemprop="region">CA</i></p>  
</div>

WAI-ARIA (examples)

W3C specs
  1. Roles
    • <div role="menubar"></div>
    • <div role="search"></div>
    • <div role="navigation">
    • role=application | menuitem | menuitemradio
  2. Live Regions
    • <div aria-live="assertive | polite | off">
  3. Widget Accessibility Attributes
    • aria-haspopup | aria-disabled ="true | false"
    • aria-controls | aria-describedby = "id"
    • aria-checked
  4. Tab index
    • <div tabindex="-1">

CSS3

Go ➹