HTML5 Migration depuis HTML4
Transition de HTML4 vers HTML5
Cette section explique entièrement comment migrer de HTML4 vers HTML5.
Cette section montre comment convertir une page HTML4 en une page HTML5 sans casser le contenu original ni la structure de la page.
Vous pouvez également migrer de XHTML vers HTML5 en utilisant la même méthode.
| HTML4 typique | HTML5 typique |
|---|---|
| <div id="header"> | <header> |
| <div id="menu"> | <nav> |
| <div id="content"> | <section> |
| <div class="article"> | <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.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
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>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<div id="content">
<h2>News Section</h2>
<div class="article">
<h2>News Article</h2>
<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 class="article">
<h2>News Article</h2>
<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; 2024 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
Essayez‑le vous‑même »
Passer au doctype HTML5
Modifiez le doctype :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
pour le doctype HTML5 :
Passer à l’encodage HTML5
Modifiez l’information d’encodage :
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
pour l’encodage HTML5 :
Ajouter HTML5Shiv
Les nouveaux éléments sémantiques HTML5 sont pris en charge dans tous les navigateurs modernes. De plus, vous pouvez « apprendre » aux anciens navigateurs à travailler avec des « éléments inconnus ».
Cependant, IE8 et les versions antérieures n’autorisent pas la mise en forme des éléments inconnus. Par conséquent, HTML5Shiv est une solution JavaScript qui permet de styliser les éléments HTML5 dans les versions d’Internet Explorer antérieures à la version 9.
Ajoutez HTML5Shiv :
Exemple
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
Essayez‑le vous‑même »
En savoir plus sur HTML5Shiv dans la section Prise en charge des navigateurs HTML5.
Passer aux éléments sémantiques HTML5
Le CSS existant contient des ID et des classes utilisés pour styliser les éléments :
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
Remplacez‑les par des styles CSS équivalents pour les éléments sémantiques HTML5 :
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
header, footer {
padding: 10px;
color: white;
background-color: black;
}
section {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
article {
margin: 5px;
padding: 10px;
background-color: white;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
Enfin, remplacez les éléments par leurs équivalents sémantiques HTML5 :
Exemples
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet..</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet..</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
Essayez‑le vous‑même »
La différence entre <article>, <section> et <div>
Dans la norme HTML5, il n’existe pas de différence stricte entre <article>, <section> et <div>.
Dans la norme HTML5, l’élément <section> est défini comme un bloc de contenu lié.
L’élément <article> est défini comme un bloc complet et autonome de contenu lié.
L’élément <div> est défini comme un bloc d’éléments enfants.
Comment interpréter cela ?
Dans l’exemple ci‑dessus, nous avons utilisé <section> comme conteneur pour les éléments <article> liés.
Mais nous aurions aussi pu utiliser <article> comme conteneur pour les articles.
Voici plusieurs exemples différents :
<article> à l’intérieur de <article> :
<article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</article>
</article>
Essayez‑le vous‑même »
<div> à l’intérieur de <article> :
<article>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</article>
Essayez‑le vous‑même »
<div> dans <section> dans <article> :
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</h2>
<p>London is the capital city of England.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</section>
</article>
Essayez‑le vous‑même »
