HTML5 : Les nouveaux éléments à connaitre
Quelles sont les nouvelles possibilités du HTML5 ? Nous avons décortiqué pour vous les subtilités de ce langage. Voici les principaux éléments à connaitre pour vous lancer. Les nouveautés du HTML5 facilitent le développement web et permettent de donner de nouvelles fonctionnalités pour valoriser son site internet.
Le HTML5 est la dernière version du langage HTML. Il intègre de nouveaux éléments et de nouvelles possibilités pour les sites et les applications web. Les bases du nouveau code ressemblent beaucoup à celles du langage HTML4 et des versions antérieurs ; les balises et les structures de bases sont restées les mêmes. Les déclarations les plus couramment utilisées ont été grandement simplifiés.
Des déclarations simplifiées
Le Doctype
Pour indiquer que le document est codé en HTML5, on utilise la nouvelle balise Doctype, plus simple que les versions précédentes :
Placé en première ligne du document, la balise Doctype signale au navigateur que le document est en code HTML5. Si le navigateur ne supporte pas HTML5, cela lui permettra d’ignorer les balises non supportées et d’éviter des erreurs.
L’encodage des caractères
Le type d’encodage des caractères est réalisé dans la balise <head>. Cette déclaration a était simplifié par rapport au HTML4 ; la ligne de code ressemblait à : <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">.
Voici maintenant la nouvelle déclaration de caractère sous HTML5.Cette déclaration signale au navigateur que l’on utilise les accents standards utilisés dans le langage français. Si votre site est rédigé en français, intégrez cette ligne dans la partie <head> de votre code.
Les nouvelles balises HTML5 à connaitre
La nouveauté du HTML5 est la multiplication des balises sémantiques. Ces balises permettent de simplifier le codage pour baliser les éléments courants De plus, la lecture d’un site par les moteur de recherche se voit également simplifié, les robots peuvent plus facilement repérer les différents éléments de votre site. Alors qu’elles sont les nouvelles balises à connaitre absolument ?
On retrouve dans 90% des sites internet les mêmes éléments ; un en-tête, un pied-de-page, un menu de navigation, des articles etc… On avait pour habitude en HTML4 de les baliser de la manière suivante : <div id="header">, <div id="footer">, <div id="menu">…
De nouvelles balises dédiées ont été créé pour balises ses éléments. Les principales balises à connaitre sont <header>, <nav>, <main>, <section>, <article>, <footer> …
| Balise | Description |
|---|---|
| <header> | Cette balise permet de repérer un en-tête généralement balisé par <div id="header"> ou <div id="entete"> en HTML4 On peut baliser l’en-tete d’une page, d’un article ou d’une section. |
| <nav> | Balise un menu de navigation contenant des principaux liens vers d’autres pages du site. Cette balise peut également être utilisée pour balisé un menu permettant de naviguer sur un même document |
| <main> | Permet d’englober le contenu principal du document. On n’utilise qu’une seule fois cette balise par document. Une section <main> peut contenir des balises <article>, <footer>, <header> … mais elle ne peut être incluse dans ce type de balises. |
| <article> | Permet de baliser un article complet ou un contenu indépendant du reste du document |
| <section> | Balise des sections d’un document, c’est-à-dire des élément d’un même sujet ou d’un même thème. |
| <footer> | Balise le pied-de-page d’un document d’un article ou d’une section. |
L’utilisation de ces balises est optionnelles et vous n’êtes pas obligé de toutes les utilier sur une page. Cependant, si le cas s’y prête il est conseiller de s’en servir. D’une part pour vous faciliter le codage et surtout parceque votre document sera plus facilement lisible par les moteurs de rechercher et donc mieux indexé.
Les nouveautés du langage HTML5, ne se limite pas aux balises sémantiques. De nombreuses autres balises ont fait leurs apparitions.
Liste complète des nouvelles balises
Nous avons décortiqué pour vous toutes les nouvelles balises du code HTML5. En voici la liste complète avec leurs explications.
| Balise | Description |
|---|---|
| <article> | Permet de baliser un article ou un contenu indépendant. (Voir paragraphe précédent) |
| <aside> | Balise une information complémentaire au contenu. |
| <audio> | Délimite un contenu audio . Les 3 formats sont compatibles avec cette balise : MP3, Wav et Ogg. A utiliser avec la balise <source> |
| <bdi> | Permet d’isoler une partie du texte. L’anagramme BDI vient de BiDirectionnel Isolation. |
| <canvas> | Utilisée pour dessiner un graphique via un script. |
| <datalist> | Utilisée avec la balise <input> pour déterminer une liste prédéfinie de réponses possibles. |
| <details> | Permet de rajouter une informations optionnelle , un détail, qui n’est pas nécessaire à la compréhension global du contenu. |
| <dialog> | Balise une boite de dialogue |
| <embed> | Balise un contenu externe (non HTML) |
| <figcaption> | Pour ajouter une légende à l’élément <figure> |
| <figure> | Détermine un élément tel qu’une image, un schéma, une vidéo, un bloc de code. On peut y ajouter une légende en utilisant la balise <figcaption> |
| <footer> | Permet de baliser le pied-de-page d’une section, d’une page ou d’un article |
| <header> | Permet de balise l’en-tête d’une section, d’une page ou d’un article |
| <keygen> | Permet de générer un clefs de sécurité utilisée pour crypter des données sur les sites sécurisés (HTTPS) |
| <main> | Spécifie le contenu principal d’un document |
| <mark> | Permet de surligner une partie d’un texte |
| <menuitem> | Balise une commande que l’utilisateur peut afficher à partir d’un menu popup |
| <meter> | Permet de représenter un nombre sur une jauge |
| <nav> | Balise le menu de navigation |
| <output> | Balise le résultat d’un calcul |
| <progress> | Permet d’afficher l’avancement d’une tâche (ex : barre de téléchargement) |
| <rp> / <rt> / <ruby> | Utiliser pour donner des annotations ‘ruby’ sur la prononciation de certains caractères (utilisée pour les écritures asiatiques) |
| <section> | Permet de baliser une section d’un document |
| <source> | Permet de définir l’emplacement de la source pour un élément multimédia (<video> ou <audio>) |
| <summary> | Sert d’en-tête dans la balise <details> |
| <time> | Permet de baliser une date ou une heure qui sera également lisible par les moteurs de recherche. |
| <track> | Définit le texte de la piste lecture pour un élément multimédia (<video> ou <audio>) |
| <video> | Permet de baliser une vidéo ou un film |
| <wbr> | Permet de déterminer l’endroit d’un possible retour à la ligne sur un mot très long |
Liste des balises devenues obsolètes sous HTML5
Avec l’apparition de nouvelles balises, on note également la disparition de nombreuses balises du HTML4. Voici la liste des balises qui ne sont plus utilisées sous HTML5 et que vous pouvez oublier pour vos prochains codages. En face de chaque balise obsolète, nous indiquons quelles sont les solutions alternatives, quelles nouvelles balises peuvent être utilisées à la place.
| Balise obsolète | Alternative |
|---|---|
| <acronym> | Utilisez à la place <abbr> |
| <applet> | Préférez les balises <embed> ou <object> |
| <basefont> | Utilisez plutôt du CSS |
| <big> | Utilisez plutôt du CSS |
| <center> | Utilisez plutôt du CSS |
| <dir> | Utilisez à la place <ul> |
| <font> | Utilisez plutôt du CSS |
| <frame> | Les frames ne sont plus gérées sous HTML5 |
| <frameset> | Les frames ne sont plus gérées sous HTML5 |
| <noframes> | Les frames ne sont plus gérées sous HTML5 |
| <strike> | Préférez les balises <del> ou <s> |
| <tt> | Utilisez plutôt du CSS |
Page de base en HTML5
Pour finir, voici un récapitulatif avec l'exemple d'une page de base codée en HTML5.
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<meta name="description" content="Description de la page" >
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<h1>TITRE H1</h1>
<p>Paragraphe</p>
</body>
</html>
En espérant que cet article vous aura été utile. N’hésitez pas à partager ou à réagir dans l’espace commentaire.