HTML5

HTML5
H1, H2, H3, … headers
Sectioning
HTML 5 and ARIA Landmarks
Microdata
Retro-compatibility for Html5

HTML5 element	Description	ARIA
`<header>`	Introduction of “sectioning elements”: an article, a section, the entire document (header page). Typically the header of a Web site that appears on top of each page, or a header of a long `<article>` or of a long `<section>`	role=”banner”
`<footer>`	Contains the footer of a site, a long `<article>`, or a long `<section>`	role=”contentinfo”
`<nav>`	Section that contains the main navigation links (within the document or to other pages).	role=”navigation”
`<article>`	Independent content, which can be individually extracted from the document and syndicated (RSS or equivalent) without penalizing its understanding. Typically a blog post.	role=”article”
`<section>`	Generic section used to group different articles for different purposes or subjects, or to define the different sections of a single article. Generally used with a header.	role=”region”
`<time>`	Used for marking up times and dates.	role=”navigation”
`<aside>`	Section whose content is not necessarily directly related to the main content that surrounds it, but can provide additional information.	role=”complementary”
`<figure>`	Used to encapsulate a figure as a single item.	role=”navigation”
`<figcaption>`	Used inside of `<figure>` and contains a caption for the figure.	role=”navigation”
`<main>`	The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.	role=”main”
`<form>`	The form element tag is used to create an HTML form for user input	role=”form”
`none`		role=”search”
`<details>`	The details element allows for expandable and collapsible regions, for example a list of frequently asked questions. The `<details>` tag works only in Safari and Chrome. Other browsers will simply display the text as regular paragraphs.

We can use a <header> element on the top of the page, each <article> or <section>. We can use it inside a <nav> element to.

After BODY element

<body>
    <header>
        <h1>Page Title</h1>
    </header>
    <p>Ut  non enim eleifend felis</p>
</body>

After BODY & ARTICLE element

<body>
    <header>
        <h1>Page Title</h1>
    </header>
    <article>
        <header>
            <h1>Article Title</h1>
        </header>
        <p>Ut non enim eleifend felis</p>
    </article>
</body>

After BODY & section & ARTICLE element

<body>
    <header>
        <h1>Page Title</h1>
    </header>
    <section>
        <header>
            <h1>A serie of Articles</h1>
        </header>
        <article>
            <header>
                <h1>Article 1 Title</h1>
            </header>
            <p>Ut non enim eleifend felis</p>
        </article>
        <article>
            <header>
                <h1>Article 2 Title</h1>
            </header>
            <p>Phasellus viverra nulla ut metus</p>
        </article>
    </section>
</body>

The <header> element is just a container. It is not taken into account for defining new sections of a document nor does it affect the hierarchy levels.

We can use <footer> on the bottom of the page and on the bottom of each <article>

<body>
    <header>
        <h1>Title</h1>
    </header>
    <p>Ut non enim eleifend felis</p>
    <footer>
        <p>Copyright @2015</p>
    </footer>
</body>

Nav

We can use <nav> on the top of the page, usually below the header and on the top of each article if this navigation make reference to the article in wich is contained.

<body>
    <header>
        <h1>Simple <span>HTML5</span> blog</h1>
    </header>
    <nav>
        <li><a class="" id="" href="#/first">First nav item</a></li>
        <li><a class="" id="" href="#/second">Second nav Item</a></li>
    </nav>
    <main>
        Content here.
    </main>
    <footer>
        Copyright
    </footer>
</body>

But we can use a <nav> element inside of and <article> to make a navigation directly related to article content, it’s scope.

<article>
    <header>
        <h1>My Travel to Spain</h1>
    </header>
 
    <nav>
        <li><a class="" id="" href="#/barcelona">Barcelona</a></li>
        <li><a class="" id="" href="#/madrid">Madrid</a></li>
    </nav>
 
    <h2>Barcelona</h2>
    <p>About Barcelona article text.</p>
 
    <h2>Madrid</h2>
    <p>About Madrid article text.</p>
</article>

Article

We can use <article> to wrap a serie of

<nav>
    <li><a class="" id="" href="#/first">First nav item</a></li>
    <li><a class="" id="" href="#/second">Second nav Item</a></li>
</nav>
 
<article>
    <header>
            <h1>Title</h1>
    </header>
 
    <nav>
        <header>
            Sub Navigation menu
        </header>
 
        <ul>
            <li><span>Blog</span></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </nav>
</article>

Section

We can use <section> to wrap a serie of articles <article>

<section>
    <article>
        <header>
            <h1>Title of post 1</h1>
        </header>
    </article>
 
    <article>
        <header>
            <h1>Title of post 2</h1>
        </header>
    </article>
</section>

Or sectioning in a serie of sub-sections

<section>
    <header>
        <h1>My Travels</h1>
    </header>
 
    <section>
        <h1>My Travel to Spain</h1>
 
        <p>Some content.</p>
    </section>
 
    <section>
        <header>
            <h1>My Travel to France</h1>
        </header>
 
        <p>More content.</p>
    </section>
</section>

Notice that <body> is also a sectioning element, it’s called a “sectioning root”, and would also need a heading.

<body>
    <header>
        <h1>My Travels</h1>
    </header>
 
    <h2>Blog post of April 2015</h2>
    <p>Content.</p>
 
    <footer>
        <p>More content.</p>
    </body>
</body>

BEST PRACTICE: Try not to rely on implicit sectioning, use <section>, <article>, etc. instead of just <H1>…<H6>.

Aside

Figure and figcaption

<figure>
    <img src="myimage.jpg" alt="" width="400" height="400">
    <figcaption>Balboa Park, San Diego.</figcaption>
</figure>

Most of the time, it is best to add an empty alt attribute, so that screen readers skip over the image entirely. Otherwise, the screen reader will read the alt text plus the figcaption.

Best Practice: Null (Empty) Alt Text

Details & Summary

The <details> element generates a simple widget to show/hide element contents, optionally by clicking on its child <summary> element.

Can be nested with foldable zone

<details>
    <summary>
            How to beat the boss...spoiler alert !
    </summary>
    <p> Just aim to the red spots near his eyes</p>
    <p>Keep shooting at these spots until the eyes open, then hit quickly both eyes with your laser beam.</p>
 
    <details>
        <summary>Why is the sky blue?</summary>
        <p>The light from the Sun looks white.</p>
 
        <ul>
            <li>reflect it (like a mirror)</li>
            <li>bend it (like a prism)</li>
            <li>or scatter it (like molecules of the gases in the atmosphere)</li>
        </ul>
 
        <p>loren ipsun.</p>
    </details>
</details>

Styling `<details>` and `<summary>`

There are CSS pseudo classes to style this icon when it is in the open or closed state. Support for these is still unofficial (works on Google Chrome).

Internet Explorer and Firefox still do not support <details> and <summary>.

summary::-webkit-details-marker {
    color:#FF0000; 
    background:#FFFFFF; 
}
 
details[open] summary::-webkit-details-marker {
    color:#0000FF;
    background:#00FFFF;
}

It is also possible to change the icon itself using the CSS pseudo class :after

summary:after {
    content: "+";
    color: #FF00FF;
    float: left;
    font-size: 1.5em;
    font-weight: bold;
    margin: -5px 5px 0 0;
    padding: 0;
    text-align: center;
    width: 20px;
}
details[open] summary:after {
    content: "-";
    color: #FFFFFF
}

JS Bin

View example

Main

There must not be more than one <main> element in a document.
It must not be a descendent of an <article>,<aside>, <footer>, <header>, or <nav> element.

<body>
    <main role="main">
        <header>
            <h1>Simple <span>HTML5</span> blog</h1>
        </header>
 
        <nav>
            <h2>Skateboards types and description</h2>
 
            <ul>
                <li><a href="Longboards.html">Longboards</a></li>
                <li><a href="electric-skateboards.html">Electric Skateboards</a></li>
            </ul>
        </nav>
 
        <main>
            <h1>Skateboards</h1>
 
            <article>
                <h2>Longboards</h2>
                <p>Longboards are a type of skateboard with a longer wheelbase and larger, softer wheels.</p>
            </article>
 
            <article>
                <h2>Electric Skateboards</h2>
                <p>These no longer require the propelling of the skateboard
                by means of the feet; rather an electric motor propels the board, fed by an electric battery.</p>
            </article>
        </main>
 
        <footer>
            Copyright
        </footer>
    </main>
</body>

Form

<form action="demo.php" method="get">
    <label for="fname">First name: </label>
    <input type="text" name="fname"><br>
 
    <label for="lname">Last name: </label>
    <input type="text" name="lname"><br>
 
    <input type="submit" value="Submit">
</form>

Search

The ARIA role search is used to define a region where search functionality is located. The role “search” is a specialized version of form so you do not need to label this section with the role of form.

role=”search” Add the attribute role="search" to the encompassing <div>. Add the attribute aria-labelledby="searchLabel" to the encompassing <div> to explicitly say what the heading is for this section.

Time & Datetime

You can put anything you like between the opening and closing tags – that’s the human-readable bit. The machine-readable bit is contained within a datetime attribute. Dates are expressed YYYY-MM-DD.

<time datetime="1905"> <!-- means the year 1905 -->
<time datetime="1905-11"> <!-- means November 1905 -->
<time datetime="11-13"> <!-- means 13 November (any year) -->
<time datetime="1905-W21"> <!-- means week 21 of 1905 -->
<time datetime="1905-11-13 09:00"> <!-- November 13th year 1905, time = 9:00 -->

Duration values

Duration values use the prefix “P” for “period” as in (period = four days)...

So you start the attribute string value with a P, followed by a duration value that ends with another letter indicating the unit used, like D for days, H for hours, M for minutes and S for seconds.

You can localise times, as before. Appending Z to the timezone indicates UTC (a way of saying GTM without it being comprehensible to normal people). Otherwise, use an offset:

<time datetime="09:00Z"> <!-- is 9am, UTC. -->
<time datetime="09:00-05:00"> <!-- is 9am in the timezone 5 hours behind UTC. -->
<time datetime="09:00+05:45"> <!-- is 9am in Nepal, which is UTC + 5 hours and 45 minutes. -->

To mark up From 21/02/2012 to 25/02/2012, use two separate <time> elements.”

<h2>Recipe:</h2>
<ul>
    <li> Preparation time: <time datetime="P30M">30 minutes</time> </li>
    <li> Cooking time:     <time datetime="P10M">10 minutes</time> </li>
</ul>

Mark

The HTML <mark> tag is used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context.

<pre>
    <code><mark>$</mark>i = 3;</code>
</pre>
<p>The dollar symbol is used to declare a variable in Php.</p>

Audio & Video

The HTML <audio> tag is used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context.

<video src="url.mp4" controls preload="none" autoplay poster="url.jpg" loop width="0px" height="0px">
</video>

Attributes

attribute	description	default
src	string, url source of file	null
controls	boolean, if present, displays its controls for audio and volume	false
preload	boolean, preload data buffer or prevent load buffer data (false for mobi	true
autoplay	boolean, auto play video when enought data is buffered	true
loop	boolean, replay video, infinite	false
poster	string, url of image tu use as poster	null

If the poster attribute is missing, usually the first non-blank frame of the video will be used as the image that is shown when the video is not playing. While this is the expected behaviour, Internet Explorer doesn’t actually do this, it displays the first frame of the video as soon as it can regardless of the poster value (see Ian Devlin’s article about this).

Styling media players with CSS3

The <video> and <audio> elements are HTML elements like any other, so CSS3 can be used for styling, including CSS3 transitions, animations and transforms. JSBin example

<figure id="figaudio1">
    <img id="imghorse" width="200" src="http://upload.wikimedia.org/wikipedia/commons/d/d4/Nokota_Horses.jpg" alt = "a horse"/>
    <figcaption id="figcptionaudio1"> Press Play to hear the horse ! 
        <audio controls="controls">
            <source src="https://dl.dropboxusercontent.com/u/1631516/horse.ogg" type="audio/ogg" />
            <source src="https://dl.dropboxusercontent.com/u/1631516/horse.mp3" type="audio/mp3" />
            Your browser does not support the audio element. Download the audio/video in <a href=”https://dl.dropboxusercontent.com/u/1631516/horse.ogg”>OGG</a> or <a href=”https://dl.dropboxusercontent.com/u/1631516/horse.ogg”>MP3</a> format.
        </audio>
    </figcaption>
</figure>

#figaudio1 {
    width : 420px;;
    text-align:center;
    padding : 6px;
    background : white; 
    margin : 0 11px 0px 0;
    border :solid 1px #888888;
    border-radius : 8px ;
}
 
#figcptionaudio1 {
    font-size : .8em;
    padding : 6px 8px;
    background : #dddddd; 
    display :block;
    text-align :center;
    font-family : georgia, serif;
    font-style : italic;
    border-radius : 7px ;
}
 
#figaudio1 > img {
    background : #eeeeee;
    padding : 5px;
    border : solid 1px #444444;
}
 
/* For audio and img transitions/animation */
audio, #figaudio1 > img {
    transition:all 0.5s;
}
 
#figaudio1 > img:hover {
    box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
    transform: scale(1.05);
}
 
audio:hover, audio:focus, audio:active {
    box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
    transform: scale(1.05);
}

Using CSS3 transforms

#figaudio1 {
    transition: all 0.5s ease-in-out;
}
#figaudio1:hover {
    width:400px;
    transform:rotate(-5deg);
}

Adapt the video size to the size of the window without borders

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Full width video like PayPal site</title>
    </head>
    <body onload="init();">
        <video id="myVideo" autoplay>
            <source src=http://html5doctor.com/demos/video-canvas-magic/video.webm type=video/webm>
            <source src=http://html5doctor.com/demos/video-canvas-magic/video.ogg type=video/ogg>
            <source src=http://html5doctor.com/demos/video-canvas-magic/video.mp4 type=video/mp4>
        </video>
    </body>
</html>

body {
    margin:0;
    padding:0;
    overflow:hidden;
}

var video;
function init() {
    // function called when the page is loaded
    video = document.querySelector("#myVideo");
 
    // For initial value
    video.width = window.innerWidth;
    video.height = window.innerHeight;
 
    // For dealing with window resize
    window.onresize = function() {
        video.width = window.innerWidth;
        video.height = window.innerHeight;
    };
}

JSBin example

With a YouTube video

JSBin example

Control `<audio>` and `<video>` elements from JavaScript

Like any HTML element, the <video> element can be manipulated/created using the DOM JavaScript API.

var video = document.createElement('video');
video.src = 'video.mp4';
video.controls = true;
document.body.appendChild(video);

Methods, properties, and events

Properties

Methods	Properties	Events
`play()`	`currentSrc`	`play`
`pause()`	`currentTime`	`pause`
`stop()`	`startTime (readonly)`	`progress`
`canPlayType()`	`videoWidth`	`error`
	`videoHeight`	`timeupdate`
	`duration (readonly)`	`ended`
	`ended (readonly)`	`abort`
	`error`	`empty`
	`paused (readonly)`	`emptied`
	`muted`	`waiting`
	`seeking`	`loadedmetadata`
	`volume`
	`height`
	`width`
	`seekable (readonly)`
	`played (readonly)`

RECOMMENDED ATTRIBUTES: set autoplay to false with mobile or documents that contain multiple videos use the attribute preload=”none” in audio and video elements
omit the autoplay attribute in audio and video elements

How to use external buttons to control the player’s behavior

We can add any extra button and control player fom them.

<button onclick="playVideo();" style="cursor: pointer;">Play</button>=
<button onclick="pauseVideo();" style="cursor: pointer;">Pause</button>
<button onclick="rewindVideo();" style="cursor: pointer;">

vid = document.querySelector("#vid");
 
function playVideo() {
    vid.play();
}
function pauseVideo() {
    vid.pause();
}
function rewindVideo() {
    vid.currentTime = 0;
}

how to detect the end of a video and start another one

This example listens for the ended event, and calls a callback function when the video is ended.

vid = document.querySelector("#vid");
// listens for the ended event, and calls a callback function when the video is ended.
vid.addEventListener('ended', playNextVideo, false);
 
function playNextVideo(e) {
     // Whatever you want to do after the event, change the src attribute
     // of the video element, for example, in order to play another video
}

How to manage playlists

This example detects the end of a video then loads the next video, changes the src attribute of the video element and plays the video (see the online example).

<!doctype html>
<html lang="en">
<head>
     <title>Sequential Movies</title>
     <script>
        var myVideo;
        var currentVideo = 0;
        var sources = [
          "http://html5doctor.com/demos/video-canvas-magic/video.mp4",
          "http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" 
        ];
 
          // Set the src of the video to the next URL in the playlist
          // If at the end we start again from beginning (the modulo 
          // source.length does that)
          function loadNextVideo() {
                myVideo.src = sources[currentVideo % sources.length]
                myVideo.load();
                currentVideo++;
          }
 
          // listener plays the video
          function loadAndplayNextVideo() {
                console.log("playing " + sources[currentVideo])
                loadNextVideo();
                myVideo.play();
 
          }
 
          // Called when the page is loaded
          function init(){
             // get the video element using the DOM api
             myVideo = document.querySelector("#myVideo");
 
             // Define a callback function called each time a video ended
             myVideo.addEventListener('ended', loadAndplayNextVideo, false);
 
             // Load the first video when the page is loaded.
             loadNextVideo();
          }
     </script>
</head>
<body onload="init()">
     <video id="myVideo"
              controls>
     </video>
</body>
</html>

Add closed captions, subtitles, etc. to your videos

<track> element, useful for adding closed captions, subtitles, descriptions, and metadata to your videos. It comes with a new JavaScript API.

<video height="272" width="640" poster="http://content.bitsontherun.com/thumbs/q1fx20VZ-640.jpg" crossorigin="anonymous" controls>
    <track kind="captions" src="http://demo.jwplayer.com/html5-report/sintel-captions.vtt" label="Closed Captions" default>
    <track kind="chapters" src="http://demo.jwplayer.com/html5-report/chapters.vtt"  label="Closed Captions" default>
</video>

kind track attribute
- subtitles describe all relevant audio present in the video (fire, rain, birds, gun fights, etc.).
- captions are only for spoken words.
- descriptions
- chapters or metadata, chapters: describe start and and of each chapter
default attribute Indicates that we want this track to be displayed by default when reading the video.

Multiple tracks for multiple subtitles by language

<track kind=subtitles src=brave.en.vtt srclang=en label="English">
<track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
<track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
<track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">

srclang: gives the language for the text track data. The value must be a valid BCP 47 language tag. This attribute must be present if the element’s kind attribute has the subtitles state.

The WebVTT format

.vtt file syntax

The displayed text can span over multiple lines, but blank lines are not allowed
Each “element” in this file has a starting and ending time, plus a value (the text that will be displayed), followed by a blank line (blank lines are separators between elements).
Each element is called “a cue”, and may optionally have an ID (can be numerical or string) that will be useful when using the track element JavaScript API, in particular the getCueById() method of TextTrack objects.

1
00:00:01.000 --> 00:00:02.042
(drumbeat)
 
2
00:00:07.167 --> 00:00:12.025
(plaintive violin solo playing)
(it rains over night)

Tool for adding subtitles to the video browser: universalsubtitles, also known as amara.

Styling and positioning the captions/subtitles

online example

The position have several possible values:

line:5% means “vertical position at a line 5% of the height of the video viewport (it will be located at the top of the video, proportional to its vertical size)
position:5% align:start means “regular location at the bottom of the video, the start of the sentence will be located at 5% of the width of the video”, i.e., near the left side
position:95% align:end means “regular location at the bottom of the video, the end of the sentence will be at 95% of the horizontal width of the video”
size:33% The size of each line will be one third of the size of the video. Since the sentence won’t fit, it will be displayed in multiple lines

The font accept inline html tags We can use <b>, <i>, <u> for styling subtitles / captions. We can use css classes for styling

CSS classes are used in the .vtt file

00:00:48.000 --> 00:00:55.300
<c.myclass>This cue contains the class "myclass".
Browsers that support ::cue CSS should make it red.</c>
 
 
00:00:56.000 --> 00:01:04.000
<v Tarzan>Me Tarzan...
<v Jane>That would make me Jane!
 
bigtext
WTF

Tools for creating WebVTT subtitles

Converting SRT to VTT

Start the text file with WEBVTT
Remove the cue markers at the start of each subtitle, or replace them with Cue - prefixes.
Optionally, remove the 00: hour marker at the start of each timestamp.
Convert the comma before the millisecond mark in every timestamp to a decimal point (easy enough with a find-replace: ,7 to .7, for example).
Optionally, add styling markup to the subtitle text.
Save the file with a .vtt extension and link to it from a element in an HTML5 page.
Validate it Live WebVTT Validator

Before

1
00:01:21,700 --> 00:01:24,675
Life on the road is something
I was raised to embrace.

After

WEBVTT
01:21.700 --> 01:24.675
Life on the road is something
I was <i>raised</i> to embrace.

CSS classes are ruled as seudo element

::cue(.myclass) { color: red; }
::cue(v[voice="Tarzan"]) { color: blue; }
::cue(v[voice="Jane"]) { color: green; }
::cue(#bigtext) { font-size: 150%; }

Chapters: use another value (of kind) for chapters navigation No supported by standard browser but but enhanced HTML5 players such as SublimeVideo Player or JW Player take them into account.

Chapter 1
00:00:00.000 --> 00:00:10.700
Title Slide
 
Chapter 2
00:00:10.700 --> 00:00:47.600
Introduction by Naomi Black

The `<track>` JavaScript API

The <track> element comes with a powerful API that is used to develop a lot of interesting features.

Dynamically building a navigation menu that shows the different chapters of the video,
Synchronizing page content with timestamps in the WebVTT file (for example: show a map next to the video, that shows the location corresponding to the video content),
Displaying all the subtitles/captions at once as HTML in the page,
Making an app for creating on the fly subtitles/captions,
Etc.

This example shows a video with an enhanced progress bar that displays the different chapters as small “clickable” squares. Furthermore, using the JavaScript API of the <track> element, this Web site builds a navigation menu (on the right of the video) example

Using the webcam video stream

The main idea is to set the src attribute of a <video> element to the live video stream object coming out of the webcam. To get this stream, you’ll have to call the method getUserMedia(); from the API

function onSuccess(stream) {
    var output = document.getElementById('myVideo');
    output.src = window.URL.createObjectURL(stream);
}
function onError() {
    // getUserMedia API not supported, or another application is using the webcam!
}
if (navigator.getUserMedia) {
    navigator.getUserMedia(params, onSuccess, onError);
}

In fact this example still does not work “as is”. Prefixes need to be added to the API function calls, due to limitations of current browser support.

webkitGetUserMedia();, mozGetUserMedia(); instead of getUserMedia();

Functional exmple in JSBin

<html>
    <head>
        <meta charset="utf-8">
        <title>JS Bin</title>
        <script>
        navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
 
        if (navigator.getUserMedia) {
            navigator.getUserMedia (
                // constraints
                {
                    video: true,
                    audio: false
                },
 
                // successCallback
                function(localMediaStream) {
                    var video = document.querySelector('video');
                    video.src = window.URL.createObjectURL(localMediaStream);
                    // Do something with the video here, e.g. video.play()
                },
 
                // errorCallback
                function(err) {
                    console.log("The following error occured: " + err);
                }
            );
        } else {
            console.log("getUserMedia not supported");
        }
        </script>
    </head>
 
    <body>
        <video width=200 height=200 id="video" controls autoplay></video>
    </body>
</html>

More on getUserMedia

Online version at JS Bin

In order to stop the webcam and make the hardware “unlock it”, you need to call the stop() method of the video stream.

<html>
    <head>
        <meta charset="utf-8">
        <title>JS Bin</title>
        <script>
        navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); 
        var webcamStream;
 
        function startWebCam() {
            if (navigator.getUserMedia) {
                navigator.getUserMedia (
                    // constraints
                    {
                        video: true,
                        audio: false
                    },
 
                    // successCallback
                    function(localMediaStream) {
                        var video = document.querySelector('video');
                        video.src = window.URL.createObjectURL(localMediaStream);
                        webcamStream = localmediaStream;
                    },
 
                    // errorCallback
                    function(err) {
                        console.log("The following error occured: " + err);
                    }
                );
            } else {
                console.log("getUserMedia not supported");
            }
        }
 
        function stopWebcam() {
            webcamStream.stop();
        }
        </script>
</head>
 
    <body >
        <video width=200 height=200 id="video" controls autoplay></video>
        <button onclick="startWebcam();">Start Webcam</button>
        <button onclick="stopWebcam();">Stop Webcam</button>
    </body>
</html>

Take a snapshot from WebCam: gist example

Some canvas effects using getUserMedia(); Shiny Demos / getusermedia

H1, H2, H3, … headers

We can use this headers as always but the diference is that we use them inside of article, note that <body> tag must be considered an article tag. This make an hierachy that can be used to define an outline of the document.

BEST PRACTICE: Always add a heading to explicit sectioning content

<body>
    <h1>Page Title</h1>
    <h2>Page Sub Title</h2>
    <h3>Page Sub Sub Title</h3>
    <p>Ut non enim eleifend felis</p>
</body>

<section>
    <h1>Section Title</h1>
 
    <article>
        <h1>Title 1</h1>
        <h2>Sub Title</h2>
        <h3>Sub Sub Title</h3>
        <h1>Title 2</h1>
        <h2>Sub Title 2</h2>
    </article>
</section>

Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.

A common remark from Web designers is that we do not want a heading content displayed systematically after a <nav>, or an <aside> element.

BEST PRACTICE: In order to NOT display the heading content on screen the recommended technique is described in this article by Steve Faulkner, also see this older article by the same author. Do not use display:none or visibility:hidden in your CSS stylesheet, as in that case the heading content will never be vocalized by screen readers, and more generally by assistive technologies.

The markup before would output the fallowing structure:

 └ section (Section Title)
     ├ Section Title
     ├ Title 1
     |   └ Sub Title
     |      └ Sub Sub Title
     └─ Title 2
         └ Sub Title 2

New html atributes

The new HTML5 `download` attribute for `<a href>`

HTML5 proposes using a new attribute named download to download resources rather than navigating to them.

<a href="/asset-v1:W3Cx+W3C-HTML5+2015T3+type@asset+block/normal.gif" download="MichelBuffa.gif">
        download a picture of Michel Buffa
</a>

WARNING: since 2015, and for security reasons, the image should be located on the same domain as the HTML page that contains the link (use a relative URL works well, for example, but linking a page on another domain will not work, it willkeep its original name).

The new HTML5 `translate` attribute for `<a href>`

To specify parts of an HTML element that should not be translated.

<span translate="no" class="author">Michel Ham</span> is a professor from the University of Nice, France

Its children inherit this behavior and are themselves not translatable. The reverse is also true.

Sectioning

Only <section> and <article> are sectioning elements.

Hiding content from all users

If you want to hide content from all users, use the HTML5 hidden attribute (along with CSS display:none for browsers that do not yet support hidden) There is no need to use aria-hidden.

.hidden {display:none}

<p hidden class="hidden">this content is hidden from all users</p>

Hiding non interactive content from visible display

Use an off screen technique to remove content from visible display, content will be read for a screen reader.

.offscreen {
    position: absolute;
    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

<div class="offscreen">This text is hidden.</div>

The main content of a view isn’t usually the first thing on a web page. Keyboard (tab and next item navigation) and screen reader generally must navigate a long list of navigation links, sub-lists of links, icons, actions (buttons), site searches, slide shows, and other elements before arriving at the main content. This is particularly difficult for users with some forms of motor disabilities.

The idea is simple, provide a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content.

One way to reconcile the impact that “skip” links have on visual design with the needs of screen reader users and users with mobility impairments is to use a technique that hides the “skip to main content” link until the user tabs to it. When the link receives focus, the link becomes visible to sighted users. This would allow both blind and sighted keyboard users to take advantage of the link’s functionality

#offscreen a:focus { 
        position:static; 
        width:auto; 
        height:auto; 
}

<a class="offscreen" href="test.html">this link is offscreen unless it has focus</a>

HTML 5 and ARIA Landmarks (Accessible Rich Internet Application)

You can apply ARIA roles to any element. You can apply role=”navigation” to a <div> or a <ul> or most any other block-level HTML element. For the best semantic structure, though, it makes sense to apply it to the <nav> element. Similarly, it makes sense to apply role=”main” to the <main> element.

<header role="banner">
        <p>Put company logo, etc. here.</p>
</header>
 
<nav role="navigation">
    <ul>
        <li>Put navigation here</li>
    </ul>
</nav>
 
<main role="main">
    <p>Put main content here.</p>
</main>
 
<footer role="contentinfo">
    <p>Put copyright, etc. here.</p>
</footer>

Style the HTML 5 Elements with display:block and Add an IE Hack

Ensure that the new HTML 5 block level elements are displayed as block level elements, rather than inline elements.

header, nav, main, footer, article, section, aside {
    display:block;
}

Add this code to the document head. The code must appear before any of the new tags, or else it will not work. The purpose of this script is to declare the existence of these elements, so that IE allows us to style them.

<!--[if lt IE 9]>
    <script>
        var e = ("abbr,article,aside,audio,canvas,datalist,details," +
            "figure,footer,header,main,mark,menu,meter,nav,output," +
            "progress,section,time,video").split(',');
        for (var i = 0; i < e.length; i++) {
            document.createElement(e[i]);
        }
    </script>
<![endif]-->

Microdata

Microdata is a set of tags, introduced with HTML5, that allows you to better understand your content and display it in a useful, relevant way. The main interest for microdata is Search Engine Optimization.

itemscope and itemtype

By adding itemscope, you are specifying that the HTML contained in the <div>…</div> block is about a particular item. You can specify the type of item using the itemtype attribute immediately after the itemscope.

itemscope: specify that the section above is a container for microdata itemtype: specify a type of microdata schema

Add the element to the HTML tag that encloses information about the item, like this:

<div itemscope itemtype ="http://schema.org/Movie">
        <h1>Avatar</h1>
        <span>Director: James Cameron (born August 16, 1954)</span>
        <span>Science fiction</span>
        <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

itemprop

Movies have interesting properties such as actors, director, ratings. To label properties of an item, use the itemprop attribute.

<div itemscope itemtype ="http://schema.org/Movie">
    <h1 itemprop="name">Avatar</h1>
    <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
    <span itemprop="genre">Science fiction</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
 
    <ul itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <li itemprop="streetAddress">10 promenade des anglais</span></li>
        <li itemprop="addressLocality">Nice</li>,
        <li itemprop="addressRegion">Alpes maritimes, France</li>
        <li itemprop="postalCode">06410</li>
        <li itemprop="addressCountry" itemscope itemtype="http://schema.org/Country">
            <span itemprop="name">France</span>
        </li>
    </ul>
</div>

To someone who thinks in JSON, here is what the item looks like.

{
    "items": [
        {
            "type": [
                "http://schema.org/Movie"
            ],
            "properties": {
                "name": [
                    "Avatar"
                ],
                "director": [
                    "James Cameron"
                ],
                "genre": [
                    "Science fiction"
                ],
                "trailer": [
                    "http://example.com/movies/avatar-theatrical-trailer.html"
                ],
                "address": [
                    {
                        "type": [
                            "http://schema.org/PostalAddress"
                        ],
                        "properties": {
                            "streetAddress": [
                                "10 promenade des anglais"
                            ],
                            "addressLocality": [
                                "Nice"
                            ],
                            "addressRegion": [
                                "Alpes maritimes, France"
                            ],
                            "postalCode": [
                                "06410"
                            ],
                            "addressCountry": [
                                {
                                    "type": [
                                        "http://schema.org/Country"
                                    ],
                                    "properties": {
                                        "name": [
                                            "France"
                                        ]
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
        }
    ]
}

If you do not find a vocabulary corresponding to your needs you can define a microdata vocabulary and start embedding custom properties in their own Web pages. You need to define a namespace and put a description of your vocabulary in a Web page that has the name of your vocabulary. For example, if you own americancars.com, you may define a vocabulary for describing Mech Warrior robots at http://americancars/Almendron in the same way as http://schema.org/Almendron describes the properties of an old american car.

It is possible to set more than one property at once, with the same value

Here are some microdata that represent a song. In this example, at line 5 we set two different properties: genre and keywords with the same value (see the MusicRecording schema definition at http://schema.org/MusicRecording

<div itemscope itemtype="http://schema.org/MusicRecording">
    <h2>The song I just published</h2>
    <ul>
        <li>Name: <span itemprop="name">I need money!</span></li>
        <li>Recorded: <span itemprop="dateCreated"><time datetime="2015-06-18">June, 18 2015</time></span></li>
        <li>Band: <span itemprop="genre keywords">Punk, Ska</span></li>
    </ul>
</div>

Itemprop appears on a: <a>, <area>, <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> or <video> element. The data is the url in the element’s href, src, or data attribute, as appropriate. For example, an image element inside a container of personal contact information can be recognized as that person’s photo and downloaded accordingly.

<time> element The data is the time in the element’s datetime attribute. This lets you, for example, just say “last week” in your text content but still indicate exact date and time.

<meta> element The data is whatever appears in the content attribute of the <meta> element. This is used when you need to include some data that isn’t actually in the text of your page.

anything else The data is whatever is in the text of the element.

For example, the value of a property defined in an element will be the value of the src attribute.

<img itemprop="image" src="MichelBuffa.png" alt="A great professor">

Or for a , it will be the value of the datetime attribute:

<time itemprop="birthday" datetime="1965-04-16">April 16, 1965</time>

Or for an <a> element, the value will be the value of the href attribute:

<a href="http://www.twitter.com/micbuffa" itemprop="url">profile</a>

Tools for schema generation

Retro-compatibility for Html5 (polyfill)

A polyfill is a piece of JavaScript code that will emulate HTML5 features not yet implemented in browsers. Usually a polyfill starts emulating a feature only when native support is not detected.

Example of full retro compatibility

function supports_details() {
    return ('open' in document.createElement('details'));  
}
 
 
$(document).ready(function(){
    $("details summary").attr("aria-expanded", function(){ 
        return $(this).parent("details").is("[open]") ? "true" : "false";
    })
 
    if (!supports_details()) {
        $("details").addClass("no-det");
    }
 
    $('details summary').keypress(function(event) {
        if ( event.which == 13||event.which == 32 ) {
            $(this).click();
        }
    }).click(function() {
        var $summary = $(this);
        var $details = $summary.parent();
            if ($details.attr("open")) {
                if ($details.hasClass("no-det")) {
                    $details.removeAttr("open");
                }
                $summary.attr("aria-expanded", "false");
            }
            else {
                if ($details.hasClass("no-det")) {
                    $details.attr("open", "open");
                }
                $summary.attr("aria-expanded", "true");
            }
    }); 
});
 
$(document).ready(function(){
    $("label").click(function(event){
        event.stopPropagation();
    // alert("The span element was clicked.");
    });
});

var isDetailsSupported = (function(doc) {
    var el = doc.createElement('details'),
            fake,
            root,
            diff;
    if (!('open' in el)) {
        return false;
    }
    root = doc.body || (function() {
        var de = doc.documentElement;
        fake = true;
        return de.insertBefore(doc.createElement('body'), de.firstElementChild || de.firstChild);
    }());
 
    el.innerHTML = '<summary>a</summary>b';
    el.style.display = 'block';
    root.appendChild(el);
    diff = el.offsetHeight;
    el.open = true;
    diff = diff != el.offsetHeight;
    root.removeChild(el);
    if (fake) {
        root.parentNode.removeChild(root);
    }
    return diff;
}(document));

Microdata

Polyfills

Modernizr (polyfill)

Video

A Code Blog

Articles to not forget.

HTML5