HTML5 Basics


A HTML5 Template (from html5bones)

<!DOCTYPE html>
<html lang="fr"> 
    <meta charset="utf-8">
    <title>PAGE TITLE</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link href="css/normalize.css" rel="stylesheet" media="all">
    <link href="css/styles.css" rel="stylesheet" media="all">
    <header role="banner">
        <nav role="navigation">
            <!-- list ou paragraphe contenant les liens internes de l'application -->
    <div class="wrap">
        <main role="main">
          <!-- des 'sections', des 'articles' avec navigation interne, entêtes et pieds -->
        <aside role="complementary">
          <!-- Contenu non essentiel au contenu principal.  -->
    <footer role="contentinfo">
          <p>Pour plus d'information, contactez <a href="">Quelqu'un</a>.</p>
        <small>Copyright &copy; <time datetime="2017">2017</time></small>

Note : role attributes are used for accessibility purposes as per WAI-ARIA.


Sections are semantic replacements for the generic div tag.


Main visible content of the web page. Does not contribute to the outline.


Self-sufficient content that can be exported as is.


Coherent piece of information. Part of a larger content.

Introduce an article, a section, or the whole page.

Conclude an article, a section, or the whole page.


Content related (but not central) to an article, a section, or the whole page.

List of navigation links to other contents or parts of the site.


Group of titles (h1, h2, h3, …).

Give semantic to Web pages sectioning

Markup Sectioning

Possible Article Sectioning

Article Sectioning

Grouping content


Piece of information (mostly graphical) from an article that can be place at different positions.


Caption of a figure.

Interactive elements


Control for additional on-demand information.


Summary, caption, or legend for a details control.

Embedded Content


Embed videos in the page.

<video src="videofile.ogg" autoplay poster="posterimage.jpg"></video>

Possible attributes:


Represent sound content in the document.

<audio src="audio.ogg" autoplay>


Specify alternate sources for audio and video.

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  <source src="foo.webm" type="video/webm">
  Your browser does not support the <code>video</code> element.


Specify subtitles for audio and video.

<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="" srclang="sv" label="Svenska">


Mathematical formula. MathML format.

a2 + b2 = c2

demos on CodePen.


Completion progress of a task.

70 %
<progress value="70" max="100">70 %</progress>



A set of predefined options for other controls.

Browsers: <input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">


Field for the result of a calculation.

+ =

<form oninput="result.value=parseInt(a.value)
<input type="number" name="b"  /> +
<input type="number" name="a"  /> =
<output name="result"></output>


Graphical representation of a measure.

15 degrees.
<meter min="0" max="30" low="5" high="20"
  15 degrees.

Forms new attributes


Prevent validation of the form before sending it.

Forms new inputs control types

<input type="search" name="my_search">


<input type="number" name="my_number">


<input type="range" name="my_range">


<input type="color" name="my_color">


<input type="date">

Other dates and times: datetime datetime-local month time week

Forms inputs attributes


Specifies which form this inputs belongs to (since inputs do not have to be placed inside forms)

Other forms’ attributs inside inputs : formaction, formenctype, formmethod, formnovalidate and formtarget. These attributes override the form’s default action, enctype, novalidate and target attributes.

<form action="default_form.php">
   <input type="submit" value="Default Submit" /><br />
   <input type="submit" formaction="alternate_form.php" value="Alternate Submit" />


Allow more than one value in the input.


A hint for the user before he starts typing. It is not a default value.

<input type="text" placeholder="login">
<input type="password" placeholder="password">

min, max, step

<input type="range" min="12" max="120" step="12"><br>
<input  type="number" min="12" max="120" step="12"><br>
<input  type="date" min="2020-01-01" max="2020-06-31" step="14">


Regular expression to validate an input.

<input type="text" name="code" pattern="[A-Za-z]{3}" title="3 letters code" />


validation of the input. Will raise a message if no value on required input.

<form action="#">
  code: <input type="text" name="code" pattern="[A-Z]{3}" placeholder="AAA" title="Three letters code" autofocus />
  value: <input type="number"  min="1" max="100" title="integer between 1 and 100" required>
  <input type="submit">

New global attributes


User defined attributes. Any attribute prefixed by “data-” can be defined and used. HTML pages with data-* attributes are valid pages.


Specify code to execute on specific events linked to an element:

onabort, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting


Define keyboard shortcuts.


List of classes this element belongs to.


Boolean. Is this element is editable?


Link a command to a menu.


Set the direction of the text in that element.


Boolean. Is that element draggable?


What action to take when an element is dropped on this one (copy, move, link…)


Boolean. Is it visible?


The unique identifier of an element.


Primary language of the text in that element.


Boolean. Activate spell checking?


CSS element style.


Integer that defines the order of focus of the element with the keyboard.




Boolean. Does the content of the element need to be translated when the page is localized?

Document Object Model (DOM)

Structural representation of a HTML or XML document. Content and visual presentation can be modified with JavaScript.

The Node interface



Represents the name of an elements. Of an Element, nodeName is the tagName, for text it is the value “#text”, for an attribute it is its name.


List of attributes. Only for elements.


Link to the parent node.


List of child nodes, if any.


First child in the childNodes list.


Last child in the childNodes list.


Previous node at the same level of this node.


Next node at the same level of this node.


The Document interface



Elements access through the Document and Element Interfaces


The interaction between the user and the Web page or between various components in that page lead to events that in fact are JavaScript function calls.

function initEventHandlers() {
  document.getElementById('mainForm').addEventListener('submit', checkForm, false);
  document.getElementById('helpPopupLink').addEventListener( 'click' , popupHelp, false);
window.addEventListener( 'load', initEventHandlers, false);

Attribute events are bad

<body onload="initPage()">
<!-- ... -->
<form method="post" action="p.php" onsubmit="checkForm()"> ...
<!-- ... -->
<a href="#" onclick="return popupWindow('h.htm')">Aide</a> ...
<!-- ... -->
<div onclick="doSomething()"> ...

Events Bubbling/Capturing

When an event is fired, the DOM tree is traversed twice. First from the root to the element firing the element. Then from that element back to the root of the DOM.

The first traversal from the root to the element is called capturing. The second traversal (from the element to the root) is called bubbling.

An event, when registered, will be triggered during capturing or bubbling (bubbling by default) depending on the third parameter of the addEventListener method:

otherElement.addEventListener( 'click', respondToClick , true); // use capture
someElement.addEventListener( 'focus', someSpecialBehaviour , false); // use bubbling
window.addEventListener( 'load', something); // use bubbling

The normal course of doth traversals may be stopped by any event handler with event.stopPropagation().

A complete event traversal example on CodePen.

Default Events

During an event some default behavior is intended (e.g. clicking a radio button should change it UI, etc.). Default behaviors in response to events can be controlled. An event can be prevented from happening without preventing event propagation (capturing/bubbling). event.preventDefault() can prevent the default behavior of an element upon the considered event.

Asynchronous Communication


A JavaScript object that allows the exchange of information between the client and the server, without reloading the page.

The object is standardized and mostly implemented everywhere.

let xhr;
if( typeof XMLHttpRequest != "undefined" ) {
  xhr = new XMLHttpRequest();
  xhr.onreadystatechange = handleData;'GET', 'test.html');

2 important methods:

XMLHttpRequest are asynchronous. 5 states are passed after sending:

value name comment
0 UNSENT open() has not been called yet.
1 OPENED open() has been called.
2 HEADERS_RECEIVED send() has been called, and headers and status are available.
3 LOADING Downloading; responseText holds partial data.
4 DONE The operation is complete. Data is available in responseText.

How do we get the data?

var xhr;
var data;
//... "GET", "/message" ); // method and URL
xhr.onreadystatechange = handleData;
xhr.send( null ); // parameter only used to send  POST data
function handleData () {
  if ( xhr.readyState === 4 ) { // Data received.
    if( xhr.status === 200 ) { // HTTP status OK.
      data = xhr.responseText;
      // deal with the server error...