Introduction à HTML5 - Apprendre le HTML

HTML5 n'est pas seulement une nouvelle version de HTML enrichie de nouveaux éléments et attributs, mais un ensemble de technologies pour créer des sites web et des applications plus puissants et diversifiés, prenant en charge le multimédia et interagissant avec des interfaces logicielles, etc.

Cette page présente ce qu'HTML5 a changé par rapport à HTML4, les nouveaux éléments sémantiques, les nouveaux types d'entrées de formulaire, les nouvelles API JavaScript, et comment intégrer de l'audio et de la vidéo natifs. Si vous débutez en balisage, commencez par l'introduction à HTML.

HTML5 et le HTML Living Standard

HTML5 a été publié en tant que Recommandation stable du W3C en 2014. Depuis lors, le langage n'a plus été figé dans des versions numérotées. Il est désormais maintenu par le WHATWG sous le nom de HTML Living Standard — une spécification unique mise à jour en continu plutôt que republiée sous forme d'« HTML6 ». Dans l'usage courant, « HTML5 » désigne simplement HTML moderne : la norme que votre navigateur implémente aujourd'hui.

Avantages d'HTML5

Les principaux avantages d'HTML5 sont listés ci-dessous :

Il est pris en charge par tous les navigateurs actuels, sur ordinateur de bureau comme sur mobile, et ce depuis plus d'une décennie.
Il est plus adapté aux appareils et plus facile à créer grâce à une déclaration <!DOCTYPE html> et <meta charset="UTF-8"> bien plus simple.
Il fonctionne en étroite collaboration avec CSS et JavaScript pour créer des sites attractifs et interactifs.
Il prend en charge SVG (Scalable Vector Graphics) et <canvas> pour les graphiques. Dans les versions antérieures, les graphiques vectoriels nécessitaient des plug-ins tels que Flash ou VML.
Le balisage devient plus propre en remplaçant les conteneurs génériques <div> par des éléments sémantiques, qui structurent mieux la page et améliorent la lisibilité et l'accessibilité.
Il expose la localisation de l'utilisateur via l'API Geolocation.
Il lit les contenus multimédias (audio, vidéo) directement dans le navigateur via les éléments natifs <audio> et <video>, sans plug-in supplémentaire. Voir HTML multimédia.
Il introduit le Web Storage, afin que les applications puissent stocker des données localement et les conserver même après la fermeture et la réouverture du navigateur.

Ce qui a changé d'HTML4 à HTML5

Supprimé et obsolète dans HTML5

Plusieurs fonctionnalités de présentation d'HTML4 ont été supprimées, car la mise en forme appartient à CSS. Les éléments suivants sont obsolètes et ne doivent plus être utilisés :

Les éléments de présentation tels que <font>, <center>, <big>, <strike> et l'ancien rôle stylistique de <u>.
Le modèle de cadres : <frameset>, <frame> et <noframes> (utilisez <iframe> lorsque l'intégration est véritablement nécessaire).
Les attributs de présentation tels que align, bgcolor, border sur les tableaux, et cellpadding/cellspacing — remplacez-les par CSS.

Ajouté dans HTML5

Éléments sémantiques — <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, et plus encore.
Multimédia natif — les éléments <audio> et <video>.
Nouveaux types d'entrées de formulaire et attributs — email, date, range, et d'autres.
Graphiques — l'élément <canvas> pour le dessin 2D et <svg> intégré.
API JavaScript — Web Storage, Geolocation, Web Workers, WebSockets, et plus encore (voir ci-dessous).

Nouveaux éléments sémantiques

Au lieu de baliser chaque région d'une page avec un <div> générique, HTML5 fournit des éléments qui décrivent le rôle du contenu. Cela aide les moteurs de recherche, les lecteurs d'écran et les autres développeurs à comprendre la structure de la page.

Élément	Rôle
`<header>`	Contenu d'introduction ou groupe de liens de navigation
`<nav>`	Un bloc de liens de navigation principaux
`<main>`	Le contenu dominant du document
`<article>`	Un contenu autonome et distribuable indépendamment
`<section>`	Un regroupement thématique de contenu, généralement accompagné d'un titre
`<aside>`	Contenu lié de façon tangentielle au contenu environnant, comme une barre latérale
`<footer>`	Pied de page de la section la plus proche ou de la page
`<figure>` / `<figcaption>`	Média autonome avec une légende facultative

Pour un aperçu complet avec des exemples, lisez Les éléments sémantiques dans HTML5.

Nouveaux types d'entrées de formulaire et attributs

HTML5 a ajouté des types d'entrées qui offrent aux utilisateurs des contrôles dédiés (sélecteurs de date, curseurs, roues de couleurs) et permettent au navigateur de valider les entrées à votre place. Les types courants incluent email, url, tel, search, number, range, date et color.

Les nouveaux attributs tels que placeholder, required, autofocus et pattern réduisent la quantité de JavaScript nécessaire pour les indications et la validation.

<form>
  <label>Email: <input type="email" placeholder="[email protected]" required></label>
  <label>Birthday: <input type="date"></label>
  <label>Volume: <input type="range" min="0" max="100"></label>
  <label>Quantity: <input type="number" min="1" max="10"></label>
  <label>Favorite color: <input type="color"></label>
  <label>Website: <input type="url" autofocus></label>
  <button type="submit">Submit</button>
</form>

En savoir plus sur la page de la balise <input>.

Nouvelles API JavaScript

HTML5 a également standardisé un ensemble d'API de navigateur qui ont transformé les pages web en applications complètes :

Canvas 2D — dessinez des graphiques, des diagrammes et des jeux pixel par pixel sur l'élément <canvas>.
Web Storage — localStorage et sessionStorage conservent des données clé/valeur dans le navigateur entre les visites.
Geolocation — demandez à l'utilisateur sa position géographique.
Web Workers — exécutez des scripts dans un fil d'arrière-plan pour que l'interface utilisateur reste réactive.
WebSockets — ouvrez une connexion persistante et bidirectionnelle à un serveur pour des données en temps réel.
History API — modifiez l'URL et l'historique de navigation sans rechargement complet de la page.

Audio et vidéo natifs

Les éléments <audio> et <video> lisent les médias directement, sans plug-in. Utilisez l'attribut controls pour afficher l'interface de lecture du navigateur, fournissez un ou plusieurs éléments <source> pour que le navigateur puisse choisir un format compatible, et ajoutez un texte de secours pour les très anciens navigateurs.

<!DOCTYPE html>
<html>
  <head>
    <title>Native audio and video</title>
  </head>
  <body>
    <video width="320" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.webm" type="video/webm">
      Your browser does not support the video tag.
    </video>

    <audio controls>
      <source src="sound.mp3" type="audio/mpeg">
      <source src="sound.ogg" type="audio/ogg">
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

Consultez HTML multimédia pour un examen approfondi des formats et des attributs.

Modèles de contenu HTML5

Dans HTML5, le contenu d'une page web peut être divisé en groupes sémantiques qui décrivent son contenu. Ces groupes sont appelés modèles de contenu. Chacun de ces modèles décrit le type d'éléments qu'il contient. Le modèle de contenu peut contenir du texte et des éléments enfants. Un élément peut appartenir à une ou plusieurs catégories de contenu.

Les modèles de contenu HTML5 sont listés ci-dessous :

Contenu de métadonnées
Contenu de flux
Contenu de section
Contenu de titre
Contenu de phrasé
Contenu intégré
Contenu interactif
Contenu palpable

Les modèles de contenu peuvent se chevaucher, ce qui signifie que les éléments appartiennent à plusieurs catégories simultanément. Par exemple, les contenus de section, de titre, de phrasé, intégré, interactif et certains métadonnées font référence au contenu de flux. Les métadonnées et le contenu interactif peuvent dans certains cas faire référence au contenu de phrasé.

Il existe également des éléments utilisés à des fins spécifiques, par exemple pour définir des formulaires. Ces types d'éléments ne font référence à aucun des modèles de contenu mentionnés ci-dessus.

Contenu de métadonnées

Les éléments appartenant à la catégorie de contenu de métadonnées contiennent des informations sur les documents HTML, définissent des liens vers d'autres ressources, définissent la présentation ou le comportement de celui-ci. Ces éléments ne sont pas affichés sur la page web.

Les éléments de cette catégorie incluent : <base>, <link>, <meta>, <noscript>, <script>, <style>, <template> et <title>.

Exemple d'éléments appartenant au contenu de métadonnées :

<head>
  <title>Title of the document</title>
  <meta charset="UTF-8">
  <style>
    * {
      color: #1c87c9;
    }
  </style>
</head>

Contenu de flux

Les éléments appartenant à la catégorie de contenu de flux sont généralement ceux utilisés dans le corps d'un document HTML (encadrés dans les balises <body>).

Les éléments de cette catégorie incluent : <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.

Exemple d'éléments appartenant au contenu de flux :

Exemple d'éléments appartenant à la catégorie de contenu de flux

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
    <hr/>
    <div>
      <p>
        Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
      </p>
      <hr/>
      <ol type="A">
        <li>Coca-Cola</li>
        <li>Ice Tea</li>
        <li>Fanta</li>
      </ol>
    </div>
  </body>
</html>

Essayez vous-même »

Les éléments suivants appartiennent au contenu de flux, mais uniquement si une condition spécifique est remplie :

<area>, uniquement à l'intérieur de <map>,
<link>, uniquement si l'attribut itemprop est spécifié,
<meta>, uniquement si l'attribut itemprop est spécifié.

Contenu de section

Les éléments appartenant au contenu de section sont ceux qui créent des sections indépendantes dans la structure d'un document HTML (par exemple, en-tête, pied de page, etc.). Notez que chaque section peut avoir son titre et son plan.

Les éléments du modèle de contenu de section sont : <article>, <aside>, <nav> et <section>.

Exemple d'éléments appartenant au contenu de section :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Article about flower</h1>
      <article>
        <h2>Roses</h2>
        <p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
      </article>
    </section>
  </body>
</html>

Essayez vous-même »

Contenu de titre

Les éléments appartenant au modèle de contenu de section créent une section dans le plan courant qui définit la portée des éléments <header>, des éléments <footer> et du contenu de titre.

Les éléments du contenu de titre sont : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> et <hgroup>.

Exemple d'éléments appartenant au contenu de titre :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
      <h3>Some text or subtitle.</h3>
    </hgroup>
  </body>
</html>

Essayez vous-même »

Contenu de phrasé

Les éléments appartenant au contenu de phrasé définissent et balisent le texte. Ce sont : <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> et <wbr>.

Exemple d'éléments appartenant au contenu de phrasé :

Exemple d'éléments appartenant au contenu de phrasé :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example with HTML tags</h1>
    <p>
      Here is some text <sub> with the sup tag</sub>.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...</p>
    <p>Reference site about Lorem Ipsum,<sup> giving information on its origins</sup>, as well as a random Lipsum generator.</p>
    <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
    <p>We’ve used &lt;strong&gt; tag to highlight <strong> this important part of the text</strong>.</p>
    <p>The important part of the text is highlighted by the <em> in italic</em>.</p>
  </body>
</html>

Essayez vous-même »

Les éléments suivants appartiennent au contenu de phrasé, mais uniquement si une condition spécifique est remplie :

<a>, s'il contient uniquement du contenu de phrasé,
<area> uniquement à l'intérieur de l'élément <map>,
<del>, s'il contient uniquement du contenu de phrasé,
<ins>, s'il contient uniquement du contenu de phrasé,
<link> si l'attribut itemprop est spécifié,
<map>, s'il contient uniquement du contenu de phrasé,
<meta> si l'attribut itemprop est spécifié.

Contenu intégré

Le contenu intégré importe une autre ressource ou insère du contenu provenant d'un autre langage de balisage ou espace de noms dans le document. Ce modèle de contenu inclut les éléments suivants : <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, et <video>.

Exemples d'éléments appartenant au contenu intégré :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Examples of the HTML elements:</h1>
    <h2>Example of the HTML&lt;canvas&gt; tag:</h2>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      var canvas = document.getElementById('canvasExample');
      var context = canvas.getContext('2d');
       context.font = '30pt Calibri';
       context.fillStyle = '#1c87c9';
       context.fillText('Canvas Example !', 50, 100);
    </script>
    <h2>Example of the HTML&lt;img&gt; tag:</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
    <h2>Example of the HTML&lt;svg&gt; tag:</h2>
    <svg width="350" height="150">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
    </svg>
    <br />
  </body>
</html>

Essayez vous-même »

Contenu interactif

Le modèle de contenu interactif inclut des éléments spécifiquement conçus pour l'interaction avec l'utilisateur. Ce sont : <a> (si l'attribut href est spécifié), <button>, <details>, <embed>, <iframe>, <label>, <select> et <textarea>.

Exemple d'éléments appartenant au contenu interactif :

Exemple de contenu interactif :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of Interactive content</h1>
    <form>
      <select>
        <option value="books">Books</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
      <br /><br />
      <textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea>
      <br />
      <button type="button">Send</button>
    </form>
  </body>
</html>

Essayez vous-même »

Les éléments suivants appartiennent au modèle de contenu interactif, mais uniquement si une condition spécifique est remplie :

<audio>, si l'attribut controls est spécifié,
<img>, si l'attribut usemap est spécifié,
<input>, si l'attribut type n'est pas hidden,
<object>, si l'attribut usemap est spécifié,
<video>, si l'attribut controls est spécifié.

Contenu palpable

Le contenu est palpable lorsqu'il n'est ni vide ni masqué ; c'est le contenu qui est rendu et substantiel. Les éléments dont le modèle est du contenu de flux ou de phrasé doivent avoir au moins un nœud palpable, et ce nœud ne doit pas avoir d'attribut hidden.

Il ne s'agit pas d'une condition obligatoire ; il existe des cas où l'élément peut être vide. Par exemple, il peut être rempli après l'exécution d'un script externe.

Les catégories de contenu secondaires

Les catégories de contenu secondaires sont celles qui prennent en charge les scripts. Les éléments prenant en charge les scripts ne contribuent pas directement à la sortie rendue d'un document, mais soutiennent les scripts, soit en contenant ou en spécifiant du code de script directement, soit en spécifiant des données qui seront utilisées par les scripts. Les éléments prenant en charge les scripts sont <script> et <template>. Les éléments <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> et <td> sont appelés racines de section. Les éléments appartenant au modèle de contenu transparent sont <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> et <video>. Ces éléments héritent du type de l'élément parent et peuvent contenir du contenu autorisé dans leur élément parent.

Exercices pratiques

Pratique

Quel élément a été introduit dans HTML5 pour lire des médias sans plug-in ?

L'élément video avec un attribut controls et des éléments source enfantsL'élément fontL'élément framesetL'élément center

Pratique

Quel DOCTYPE déclare un document HTML5 ?

DOCTYPE htmlDOCTYPE HTML PUBLIC avec une longue URL DTDDOCTYPE html5Aucun DOCTYPE n'est nécessaire en HTML5