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 Docoument</title>
<p>Tweetable HTML5</p>
  • Short DTD
  • Short Charset
  • No ‘type’ attribute
  • <body> and <head> are inferred.

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

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>

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

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="affliation">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 Regiouns
    • <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">

Forms

Go ➹