HTML5 Elements

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>
<main>
<article>
<section>
<section>
<footer>

hgroup - removed from spec 

<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>
5 of 5 stars from three reviews
  • 5 stars from Amazon
  • 5 stars from Costco
  • 5 stars from Barns & Noble

Not yet supported in FF or IE.

Dialog

This is a dialog box! 
<dialog>
  This is a dialog box!
  <button id="closemodal">Close</button>
</dialog>
var dialog = document.querySelector('dialog');
document.querySelector('#show').addEventListener('click', function() {
  dialog.showModal();
  // dialog.show();
});
document.querySelector('#close').addEventListener('click', function() {
  dialog.close();
});

Dialog

This is a dialog box! 
<dialog open>
  This is a dialog box!
  <button id="closemodal">Close</button>
</dialog>
var dialog = document.querySelector('dialog');
document.querySelector('#show').addEventListener('click', function() {
  // dialog.showModal();
  dialog.show();
});
document.querySelector('#close').addEventListener('click', function() {
  dialog.close();
});

template

Name Color Sex Temperment 
<template id="row">
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
</template>
<table border='1' cellpadding=5>
 <thead>
  <tr>
   <th>Name</th>
   <th>Color</th>
   <th>Sex</th>
   <th>Temperment</th>
  </tr>
</thead>
 <tbody>
  <template id="row">
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </template>
</tbody>
</table>
<script>
var data = [
   { name: 'Sassafrass', color: 'Balinese', sex: 'Female', temp: 'anti-social' },
   { name: 'Baby Girl', color: 'Tabby', sex: 'Female', temp: 'dog-like' },
   { name: 'Katmandu', color: 'Orange Tabby', sex: 'Male', temp: 'happy' }
 ];
 var template = document.querySelector('#row');
 for (var i = 0; i < data.length; i += 1) {
   var cat = data[i];
   var clone = template.content.cloneNode(true);
   var cells = clone.querySelectorAll('td');
   cells[0].textContent = cat.name;
   cells[1].textContent = cat.color;
   cells[2].textContent = cat.sex;
   cells[3].textContent = cat.temp;
   template.parentNode.appendChild(clone);
 }
</script>
 var data = [
   { name: 'Sassafrass', color: 'Balinese', sex: 'Female (neutered)', temp: 'anti-social' },
   { name: 'Baby Girl', color: 'Tabby', sex: 'Female (neutered)', temp: 'dog-like' },
   { name: 'Katmandu', color: 'Orange Tabby', sex: 'Male (neutered)', temp: 'happy' }
 ];
 var template = document.querySelector('#row');
 for (var i = 0; i < data.length; i += 1) {
   var cat = data[i];
   var clone = template.content.cloneNode(true);
   var cells = clone.querySelectorAll('td');
   cells[0].textContent = cat.name;
   cells[1].textContent = cat.color;
   cells[2].textContent = cat.sex;
   cells[3].textContent = cat.temp;
   template.parentNode.appendChild(clone);
 }
<template id="foo">
   <style>
      /* styles scoped to template only
   </style>
  <div class="someclass">
     template text here
    <div class="someotherclass">
    <content></content>
    </div>
  </div>
</template>
<template id="foo">
   <style>
      /* styles scoped to template only
   </style>
  <div class="someclass">
     template text here
    <div class="someotherclass">
    <content select=".someSelector"></content>
    </div>
  </div>
</template>

Jean Phillippe
Weyl, Estelle
Smith, Jane


<div class="name-tag"><i class="f">Jean</i> <i class="l">Phillippe</i></div>
<div class="name-tag"><i class="l">Weyl</i>, <i class="f">Estelle</i></div>
<div class="name-tag"><i class="l">Smith</i>, <i class="f">Jane</i></div>

<template id="nameTagTemplate">
<style>
.outer {
  border: 2px solid brown;
  border-radius: 1em;
  background: red;
  font-size: 20pt;
  width: 12em;
  height: 7em;
  text-align: center;
  margin-bottom: 1em;
}
.boilerplate {
  color: white;
  font-family: sans-serif;
  padding: 0.5em;
}
.name {
  color: black;
  background: white;
  font-family: "Marker Felt", cursive;
  font-size: 45pt;
  padding-top: 0.2em;
}
</style>
<div class="outer">
  <div class="boilerplate">
    Hi! My name is
  </div>
  <div class="name">
    <content select=".f"></content>
    <content select=".l"></content>
  </div>
</div>
</template>

<script>
var el = document.querySelectorAll('.name-tag');
var template = document.getElementById('nameTagTemplate');
for(var i = 0; i < el.length; i++) {
  var shadow = el[i].createShadowRoot();
  var clone = document.importNode(template.content, true);
  shadow.appendChild(clone);
}
</script>

New Elements

  • article
  • aside
  • audio
  • bdi
  • canvas
  • command
  • data
  • datalist
  • details
  • embed
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • keygen
  • main
  • mark
  • math
  • meter
  • menuitem
  • menu
  • nav
  • output
  • progress
  • rb
  • rp
  • rt
  • rtc
  • ruby
  • section
  • source
  • summary
  • svg
  • template
  • time
  • track
  • 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

https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md

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
  • <rtc> ruby text container
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

Ruby

<ruby>
  ♥<rp>: </rp>
   <rt>Heart</rt>
   <rp>, </rp>
   <rtc>
      <rt lang=fr>Cœur</rt>
    </rtc>
    <rp>.</rp>
  ☘<rp>: </rp>
   <rt>Shamrock</rt>
   <rp>, </rp>
   <rtc>
      <rt lang=fr>Trèfle</rt>
    </rtc>
    <rp>.</rp>
  ✶<rp>: </rp>
   <rt>Star</rt>
   <rp>, </rp>
   <rtc>
      <rt lang=fr>Étoile</rt>
    </rtc>
    <rp>.</rp>
</ruby>

If ruby is supported:

♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.

If not:

♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.

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.

spellcheck="true | false"
Since 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">

Exercise

Options:

  1. dialog
  2. template
  3. details & summary

Forms ➹