W3docs
fr
Se connecter

Migration vers HTML5

Découvrez les différences entre HTML4 et HTML5 et apprenez à migrer de HTML4 vers HTML5 étape par étape.

Migrer de HTML4 vers HTML5 consiste à remplacer l'ancien doctype et les déclarations d'encodage par leurs équivalents HTML5 plus courts, à remplacer les conteneurs génériques <div> par des éléments sémantiques, et à supprimer les balises et attributs de présentation que HTML5 ne prend plus en charge. Cette page décrit le processus étape par étape et se termine par un récapitulatif utilisable comme liste de contrôle.

Astuce

Les étapes décrites ci-dessous s'appliquent également à la migration de XHTML vers HTML5.

Lors de la migration depuis XHTML, pensez à supprimer l'attribut xmlns="http://www.w3.org/1999/xhtml" de la balise <html>.

Étape 1 : Modifier le Doctype

Nous remplaçons le doctype HTML4 par le doctype HTML5.

HTML4

Doctype HTML4 hérité

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5

Migration HTML5

<!DOCTYPE html>

Étape 2 : Modifier l'Encodage

Ici, nous remplaçons les informations d'encodage HTML4 par l'encodage HTML5.

HTML4

Déclaration d'encodage HTML4 héritée

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

HTML5

Migration HTML5

<meta charset="utf-8">

De plus, HTML5 permet d'omettre l'attribut type des balises <script> et <style>, car il vaut par défaut text/javascript et text/css respectivement.

Étape 3 : Ajouter le HTML5Shiv

Tous les navigateurs modernes prennent en charge les nouveaux éléments sémantiques HTML5. De plus, vous pouvez « apprendre » aux navigateurs plus anciens à gérer les « éléments inconnus ». Le HTML5Shiv est utilisé pour permettre le style des éléments HTML5 dans ces navigateurs. Notez que ce script est désormais largement obsolète pour le développement web moderne, car tous les navigateurs actuels prennent en charge les éléments sémantiques HTML5 nativement.

Migration HTML5 - HTML5Shiv

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Étape 4 : Passer aux Éléments Sémantiques HTML5

En HTML4, on utilisait souvent des éléments <div> génériques avec des attributs id et class pour décrire la structure. HTML5 introduit des éléments sémantiques qui peuvent remplacer bon nombre de ces conteneurs génériques, offrant aux navigateurs, aux moteurs de recherche et aux technologies d'assistance une image plus claire de la page. Les IDs et classes ne dictent pas automatiquement la sémantique, mais voici les remplacements structurels courants :

Conteneur HTML4Élément sémantique HTML5
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><main>
<div class="article"><article>
<div class="sidebar"><aside>
<div id="footer"><footer>

L'élément <aside> mérite d'être mentionné : il marque un contenu tangentiellement lié au contenu environnant, comme une barre latérale, une citation extraite ou un bloc de liens connexes. Il n'a pas d'équivalent direct en HTML4, et est généralement introduit lors de la migration pour remplacer un <div class="sidebar"> ou un conteneur similaire.

Voyons d'abord un exemple utilisant des éléments HTML4.

Exemple d'éléments HTML4 :

Exemple HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <style>
      body {
        font-size: 0.9em;
      }
      #header,
      #footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      div.content {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      .article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      #header-menu ul {
        padding: 0;
      }
      #header-menu ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>LaravelSoft</h1>
    </div>
    <div id="header-menu">
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <h2>Article Section</h2>
      <div class="article">
        <h3>Article Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </div>
      <div class="article">
        <h3>News Article</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
      </div>
    </div>
    <div id="footer">
      <p>&copy; 2020 All rights reserved.</p>
    </div>
  </body>
</html>
Essayez vous-même »

Voyons maintenant la migration des éléments HTML4 vers les éléments sémantiques HTML5.

Exemple d'éléments sémantiques HTML5 :

La version migrée ci-dessous supprime le script HTML5Shiv, car tous les navigateurs encore utilisés comprennent les éléments sémantiques nativement. Ajoutez à nouveau le shiv uniquement si vous devez prendre en charge Internet Explorer 8 ou une version antérieure.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <style>
      body {
        font-size: 0.9em;
      }
      header,
      footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      main {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      nav ul {
        padding: 0;
      }
      nav ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>LaravelSoft</h1>
    </header>
    <nav>
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </nav>
    <main>
      <h2>Article Section</h2>
      <article>
        <h3>Article Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
      <article>
        <h3>News Article</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
    </main>
    <footer>
      <p>&copy; 2020 All rights reserved.</p>
    </footer>
  </body>
</html>
Essayez vous-même »

Étape 5 : Supprimer les Éléments et Attributs HTML4 Dépréciés

La migration ne consiste pas uniquement à remplacer les conteneurs <div> structurels. HTML5 a également supprimé un ensemble de balises et d'attributs de présentation dont le rôle est désormais assuré par CSS. Les laisser en place mélange balisage et style et peut produire des résultats inattendus dans les navigateurs modernes ; il est donc préférable de les supprimer lors de la migration.

Éléments courants à supprimer et leurs remplacements CSS :

Élément dépréciéQue faire à la place
<font>Définir font-family, font-size et color en CSS
<center>Utiliser text-align: center ou une mise en page flex/grid
<big>, <tt>, <strike>Utiliser font-size, une font-family monospace, ou text-decoration: line-through
<frame>, <frameset>, <noframes>Restructurer la page ; utiliser <iframe> uniquement lorsqu'un document intégré est réellement nécessaire

Attributs courants à supprimer et leurs remplacements CSS :

Attribut dépréciéQue faire à la place
align, valigntext-align, vertical-align
bgcolorbackground-color
width, height (sur les tables/cellules de mise en page)CSS width / height
border (présentationnel)CSS border
cellpadding, cellspacingpadding et border-spacing

Par exemple, ce balisage HTML4 :

<center>
  <font face="Arial" color="red" size="5">Welcome</font>
</center>
<table border="1" bgcolor="#eee" cellpadding="10">
  <tr><td align="center">Cell</td></tr>
</table>

devient ceci en HTML5, avec toute la présentation déplacée vers CSS :

<p class="title">Welcome</p>
<table class="data">
  <tr><td>Cell</td></tr>
</table>

<style>
  .title {
    text-align: center;
    font-family: Arial, sans-serif;
    color: red;
    font-size: 1.5em;
  }
  .data {
    border: 1px solid black;
    border-collapse: collapse;
    background-color: #eee;
  }
  .data td {
    padding: 10px;
    text-align: center;
  }
</style>

La Différence entre les Éléments <section>, <article> et <div>

En HTML5, il existe des différences entre les éléments <section>, <article> et <div>. En particulier :

  • <section> regroupe un contenu thématiquement lié, généralement avec un titre.
  • <article> représente un contenu autonome qui pourrait être distribué ou réutilisé indépendamment.
  • <div> est un conteneur générique sans signification sémantique, utilisé uniquement pour le style ou le scripting.

Exemple des balises <section>, <article> et <div> :

Exemple des balises <section>, <article> et <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Articles about flowers</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>
      <div>
        <h2>Lilies</h2>
        <p>
          Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants.
        </p>
      </div>
    </section>
  </body>
</html>
Essayez vous-même »

Récapitulatif de la Migration

Utilisez ces étapes comme liste de contrôle lors du passage d'une page de HTML4 à HTML5 :

  1. Remplacez le long doctype HTML4 par <!DOCTYPE html>.
  2. Remplacez la balise meta http-equiv content-type par la forme courte <meta charset="utf-8">.
  3. Ajoutez le HTML5Shiv uniquement si vous devez encore prendre en charge Internet Explorer 8 ou une version antérieure ; sinon, ignorez-le.
  4. Remplacez les conteneurs <div> structurels par des éléments sémantiques tels que <header>, <nav>, <main>, <article>, <aside> et <footer>.
  5. Supprimez les éléments et attributs de présentation dépréciés (<font>, <center>, align, <frameset> et similaires) et déplacez leur style vers CSS.

Entraînement

Pratique
Sélectionnez tout ce qui s'applique. Lesquels des éléments suivants sont de nouveaux éléments introduits dans HTML5 ?
Sélectionnez tout ce qui s'applique. Lesquels des éléments suivants sont de nouveaux éléments introduits dans HTML5 ?
Was this page helpful?