Migration HTML5
Sur cette page, nous allons montrer comment migrer de HTML4 vers HTML5. Apprenons cela étape par étape.
En HTML4, nous utilisions souvent des éléments génériques <div> avec des attributs id et class pour définir la structure. HTML5 introduit des éléments sémantiques qui peuvent remplacer bon nombre de ces conteneurs génériques. Bien que les ID et les classes ne déterminent pas automatiquement la sémantique, voici des remplacements structurels courants :
Balises HTML avec id
<div id="header"> - <header>
<div id="menu"> - <nav>
<div id="content"> - <main>
<div class="article"> - <article>
<div id="footer"> - <footer>TIP
Les étapes décrites ci-dessous peuvent également être suivies pour migrer de XHTML vers HTML5.
Lors de la migration depuis XHTML, n'oubliez pas de supprimer l'attribut xmlns="http://www.w3.org/1999/xhtml" de la balise <html>.
Étape 1 : modification du 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 : modification de l'encodage
Ici, nous remplaçons les informations d'encodage HTML4 par l'encodage HTML5.
HTML4
<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 sa valeur par défaut est respectivement text/javascript et text/css.
Étape 3 : ajout de HTML5Shiv
Tous les navigateurs modernes prennent en charge les nouveaux éléments sémantiques HTML5. De plus, vous pouvez « apprendre » aux anciens navigateurs à gérer les « éléments inconnus ». HTML5Shiv est utilisé pour permettre le style des éléments HTML5 dans de tels navigateurs. Notez que ce script est largement obsolète pour le développement web moderne, car tous les navigateurs actuels prennent en charge nativement les éléments sémantiques HTML5.
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 : passage aux éléments sémantiques HTML5
Tout d'abord, voyons un exemple où des éléments sémantiques HTML4 sont utilisés.
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>© 2020 All rights reserved.</p>
</div>
</body>
</html>Maintenant, voyons la migration des éléments HTML4 vers les éléments sémantiques HTML5.
Exemple d'éléments sémantiques HTML5 :
Exemple d'éléments sémantiques HTML5 :
<!DOCTYPE html>
<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;
}
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>© 2020 All rights reserved.</p>
</footer>
</body>
</html>La différence entre les éléments <section>, <article> et <div>
En HTML5, il existe quelques différences entre les éléments <section>, <article> et <div>. En particulier :
<code><section></code>regroupe un contenu thématiquement lié, généralement avec un titre.<code><article></code>représente un contenu autonome qui peut être diffusé ou réutilisé indépendamment.<code><div></code>est un conteneur générique sans signification sémantique, utilisé uniquement pour le style ou le script.
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>Practice
Which of the following are new elements introduced in HTML5 as per the content in the provided URL?