Migration HTML5

Migration de HTML4 vers HTML5

Ce chapitre explique comment migrer une page HTML4 typique vers une page HTML5 typique.

Ce chapitre démontre comment convertir une page HTML4 existante en page HTML5, sans détruire le contenu et la structure originaux.

Remarque :Vous pouvez utiliser les mêmes techniques pour migrer de HTML4 et XHTML vers HTML5.

HTML4 typique HTML5 typique
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

Page HTML4 typique

Exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
  <h1>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>Actualités</li>
    <li>Sports</li>
    <li>Météo</li>
  </ul>
</div>
<div id="content">
<h2>Section d'actualité</h2>
<div id="post">
  <h2>Article d'actualité</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>Article d'actualité</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. Tous droits réservés.</p>
</div>
</body>
</html>

Essayer personnellement

à Doctype HTML5

Modifier le type de document, de doctype HTML4 :

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

Modifier en doctype HTML5 :

<!DOCTYPE html>

Essayer personnellement

à la codage HTML5

Modifier les informations de codage, de HTML4 :

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

Changer en HTML5 :

<meta charset="utf-8">

Essayer personnellement

Ajouter un shiv

Tous les navigateurs modernes prennent en charge les éléments sémantiques HTML5.

En plus, vous pouvez "apprendre" aux navigateurs anciens comment gérer les "éléments inconnus".

Ajouter un shiv pour la prise en charge d'Internet Explorer :

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Essayer personnellement

Remarque :Pour plus d'informations sur le shiv, consultez la section concernant la prise en charge des navigateurs HTML5.

Ajouter des styles CSS pour les éléments sémantiques HTML5

Voyez les styles CSS existants :

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
Dupliquer avec des styles CSS égaux pour les éléments sémantiques HTML5:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

Essayer personnellement

par des <header> et <footer> HTML5

Modifier les éléments <div> avec id="header" et id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Tous droits réservés.</p>
</div>

Modifiez-les en éléments sémantiques HTML5 <header> et <footer> :

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Tous droits réservés.</p>
</footer>

Essayer personnellement

en HTML5 <nav>

Changez l'élément <div> avec l'id="menu" :

<div id="menu">
  <ul>
    <li>Actualités</li>
    <li>Sports</a></li>
    <li>Météo</li>
  </ul>
</div>

Modifiez-les en éléments sémantiques HTML5 <nav> :

<nav>
  <ul>
    <li>Actualités</li>
    <li>Sports</a></li>
    <li>Météo</li>
  </ul>
</nav>

Essayer personnellement

en HTML5 <section>

Changez l'élément <div> avec l'id="content" :

<div id="content">
.
.
.
</div>

Modifiez-les en éléments sémantiques HTML5 <section> :

<section>
.
.
.
</section>

Essayer personnellement

en HTML5 <article>

Changez tous les éléments <div> avec la classe "post" :

<div class="post">
  <h2>Article d'actualité</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

Modifiez-les en éléments sémantiques HTML5 <article> :

<article>
  <h2>Article d'actualité</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

Essayer personnellement

Supprimez ces styles "plus anciens" :

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

Essayer personnellement

Page typique en HTML5

Vous pouvez supprimer l'étiquette <head>. Elle n'est plus nécessaire dans HTML5 :

Exemple

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>
<header>
  <h1>Monday Times</h1>
</header>
<nav>
  <ul>
    <li>Actualités</li>
    <li>Sports</li>
    <li>Météo</li>
  </ul>
</nav>
<section>
<h2>Section d'actualité</h2>
<div id="post">
  <h2>Article d'actualité</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>Article d'actualité</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. Tous droits réservés.</p>
</footer>
</body>
</html>

Essayer personnellement

La différence entre <article>, <section> et <div> :

Dans la norme HTML5, la différence entre <article>, <section> et <div> est minime et peut prêter à confusion.

Dans la norme HTML5, l'élément <section> est positionné comme un bloc des éléments pertinents.

L'élément <article> est défini comme un bloc complet et inclusif des éléments pertinents.

L'élément <div> est défini comme un bloc de sous-éléments.

Comment comprendre cela ?

Dans les exemples ci-dessus, nous avons utilisé <section> comme conteneur des articles pertinents.

Mais nous pouvons également utiliser <article> comme conteneur d'article.

Voici quelques exemples différents :

Les <article> dans <article> :
<article>
<h2>Villes célèbres</h2>
<article>
<h2>London</h2>
<p>London est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni,</p>
<p>avec une aire métropolitaine de plus de 13 millions d'habitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris est la capitale et la ville la plus peuplée de France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon, le centre de la grande région de Tokyo,</p>
et la plus grande agglomération urbaine du monde.</p>
</article>
</article>

Essayer personnellement

<article> dans <div> :
<article>
<h2>Villes célèbres</h2>
<div class="city">
<h2>London</h2>
<p>London est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni,</p>
<p>avec une aire métropolitaine de plus de 13 millions d'habitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris est la capitale et la ville la plus peuplée de France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon, le centre de la grande région de Tokyo,</p>
et la plus grande agglomération urbaine du monde.</p>
</div>
</article>

Essayer personnellement

<article> dans <section> dans <div> :
<article>
<section>
<h2>Villes célèbres</h2>
<div class="city">
<h2>London</h2>
<p>London est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni,</p>
<p>avec une aire métropolitaine de plus de 13 millions d'habitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris est la capitale et la ville la plus peuplée de France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon, le centre de la grande région de Tokyo,</p>
et la plus grande agglomération urbaine du monde.</p>
</div>
</section>
<section>
<h2>Pays célèbres</h2>
<div class="country">
<h2>Angleterre</h2>
<p>London est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni,</p>
<p>avec une aire métropolitaine de plus de 13 millions d'habitants.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris est la capitale et la ville la plus peuplée de France.</p>
</div>
<div class="country">
<h2>Japon</h2>
<p>Tokyo est la capitale du Japon, le centre de la grande région de Tokyo,</p>
et la plus grande agglomération urbaine du monde.</p>
</div>
</section>
</article>

Essayer personnellement