Liste balises HTML : connaître les indispensables pour optimiser votre site

L’HTML (HyperText Markup Language) est le langage de balisage standard pour créer des pages web. Il est le socle de tout site web et joue un rôle essentiel dans la manière dont le contenu est structuré et présenté aux utilisateurs. Un code HTML propre, sémantique et optimisé est crucial pour l’expérience utilisateur, le référencement (SEO) et l’accessibilité.

Ce guide a pour objectif de vous fournir une liste concise des balises HTML indispensables pour l’optimisation de votre site web. Nous aborderons les balises essentielles pour la structure, le contenu, l’intégration des médias, la navigation, les formulaires et l’accessibilité. L’objectif est de trier l’essentiel et de se concentrer sur les balises qui ont un impact direct sur l’optimisation, en distinguant les balises « obligatoires » des balises « fortement recommandées ».

L’HTML et son importance

Un code HTML bien structuré est le fondement d’un site web performant. Il permet aux moteurs de recherche de comprendre le contenu de la page, améliore l’accessibilité pour les utilisateurs handicapés, contribue à un temps de chargement plus rapide et simplifie la maintenance du code. L’HTML sémantique, qui utilise des balises pour décrire la signification du contenu plutôt que son apparence, est particulièrement important pour le SEO et l’accessibilité. La validation HTML permet de s’assurer que le code est conforme aux normes et minimise les erreurs.

Pourquoi un code HTML propre et sémantique est crucial ?

Le code HTML structure le contenu, et le navigateur l’interprète pour l’afficher à l’utilisateur. Un code HTML bien rédigé a un impact direct et significatif sur plusieurs aspects cruciaux de votre site web. Ces aspects peuvent être classés en quatre catégories principales : SEO, Accessibilité, Performance et Maintenance. Chacun de ces aspects contribue à la qualité globale de l’expérience utilisateur et au succès de votre site web.

• SEO: Une meilleure indexation du contenu par les moteurs de recherche favorise un meilleur positionnement dans les résultats de recherche.
• Accessibilité: Une structure HTML claire facilite la navigation pour les utilisateurs handicapés, notamment ceux qui utilisent des lecteurs d’écran.
• Performance: Un code optimisé réduit le temps de chargement des pages, améliorant l’expérience utilisateur et le référencement.
• Maintenance: Un code propre et bien structuré est plus facile à comprendre, à modifier et à maintenir.

Pourquoi ce guide des balises HTML ?

Le web offre une multitude d’informations sur les balises HTML, ce qui peut être déroutant, surtout pour les débutants. Ce guide a pour but de trier l’essentiel et de vous présenter les balises HTML qui ont le plus d’influence sur l’optimisation de votre site web. Il est important de distinguer les balises « obligatoires », c’est-à-dire celles qui sont indispensables à la structure de base d’une page web, des balises « fortement recommandées », celles qui contribuent significativement à l’amélioration du SEO, de l’accessibilité et des performances.

Définitions clés

Avant de commencer, il est important de définir quelques termes clés liés à l’HTML. Comprendre ces définitions vous aidera à mieux appréhender les concepts et les techniques présentés dans ce guide. Cela vous permettra également de mieux communiquer avec d’autres développeurs et de participer plus efficacement aux discussions sur le développement web.

• Balise: Un élément de code HTML qui indique le début et la fin d’un élément. Par exemple, <p> et </p> .
• Attribut: Une propriété qui modifie le comportement ou l’apparence d’un élément. Par exemple, <img src="image.jpg" alt="Description de l'image"> .
• Élément: Le contenu entre une balise d’ouverture et une balise de fermeture, y compris les balises elles-mêmes. Par exemple, <p>Ceci est un paragraphe.</p> .
• HTML sémantique: Utilisation de balises HTML pour décrire la signification du contenu plutôt que simplement son apparence.
• Validation HTML: Vérification de la conformité du code HTML aux normes établies par le W3C (World Wide Web Consortium).

Les fondations : balises structurelles essentielles

La structure de base d’une page HTML est le fondement sur lequel tout le reste est construit. Elle comprend les balises essentielles qui définissent la structure du document, les métadonnées qui fournissent des informations sur la page et le contenu visible par les utilisateurs. Maîtriser ces balises est la première étape pour créer un site web bien organisé et optimisé.

La structure de base

La structure de base d’un document HTML est cruciale. Elle inclut la déclaration du type de document, le conteneur racine, l’en-tête pour les métadonnées et le corps du document qui contient le contenu visible. Chaque balise joue un rôle spécifique dans la définition de la structure et du comportement de la page web.

• <!DOCTYPE html> : Indique la version d’HTML utilisée. Déclarer le doctype correctement garantit que le navigateur interprète correctement le code.
• <html> : Le conteneur racine de tout document HTML. Il englobe l’ensemble du contenu de la page.
  • L’attribut lang est important pour le SEO et l’accessibilité. Il indique la langue principale du contenu de la page. Par exemple, <html lang="fr"> pour le français.
• <head> : Contient les métadonnées et les liens vers les ressources externes telles que les feuilles de style CSS et les favicons.
• <meta charset="UTF-8"> : Spécifie l’encodage des caractères à utiliser. UTF-8 est recommandé car il prend en charge la plupart des caractères spéciaux.
• <title> : Définit le titre de la page qui apparaît dans l’onglet du navigateur et dans les résultats de recherche. C’est un élément clé pour le SEO.
  • Conseils pour un titre optimisé : inclure des mots-clés pertinents, limiter la longueur à environ 60 caractères, et s’assurer de la pertinence par rapport au contenu.
• <meta name="description" content="..."> : Fournit une brève description de la page qui peut apparaître dans les résultats de recherche.
  • Conseils pour une description optimisée : inciter au clic, inclure des mots-clés pertinents, et limiter la longueur à environ 160 caractères.
• <link> : Permet de lier des ressources externes comme les feuilles de style CSS et les favicons.
  • rel="stylesheet" : Charge les styles CSS, ce qui est essentiel pour la performance et la présentation.
  • rel="icon" : Définit le favicon, l’icône qui apparaît dans l’onglet du navigateur, contribuant au branding et à l’expérience utilisateur.
  • rel="canonical" : Indique l’URL canonique de la page, aidant à éviter les problèmes de contenu dupliqué.
• <meta name="viewport" content="width=device-width, initial-scale=1.0"> : Optimise la page pour les appareils mobiles, garantissant une expérience utilisateur optimale sur tous les supports.
• <meta name="robots" content="index, follow"> (ou noindex, ): Contrôle l’indexation par les robots des moteurs de recherche, permettant de gérer la visibilité du site.
• <body> : Contient le contenu visible de la page, c’est-à-dire tout ce que les utilisateurs voient dans leur navigateur.

Structurer le contenu de la page

Une structure de contenu claire et logique est essentielle pour faciliter la navigation et la compréhension, tant pour les utilisateurs que pour les moteurs de recherche. Utiliser des balises sémantiques permet de définir les différentes sections de la page et contribue à améliorer l’accessibilité et le SEO.

• <header> : L’en-tête du site ou d’une section, contenant généralement le logo, le titre du site et un menu de navigation.
• <nav> : La navigation principale du site, facilitant l’exploration du site par les utilisateurs.
  • Utiliser des liens clairs et descriptifs dans la navigation est crucial pour l’expérience utilisateur et le référencement.
• <main> : Le contenu principal de la page, contenant les informations les plus importantes et pertinentes pour l’utilisateur.
• <article> : Un contenu autonome et distribuable, comme un article de blog ou une news.
  • L’intégration de schéma.org dans un article améliore sa visibilité dans les résultats de recherche.
• <section> : Regroupe le contenu thématiquement, structurant la page en sections logiques.
• <aside> : Contenu secondaire, informations complémentaires ou publicités.
• <footer> : Le pied de page du site ou d’une section, contenant des informations sur le copyright, les mentions légales et la politique de confidentialité.

Les balises de regroupement

Les balises de regroupement, comme <div> et <span> , permettent de regrouper des éléments HTML pour leur appliquer un style ou un comportement spécifique. Toutefois, il est important de les utiliser avec discernement et de privilégier les balises sémantiques lorsque cela est possible afin d’optimiser l’accessibilité et le SEO.

• <div> : Un conteneur générique, souvent utilisé pour appliquer un style CSS. Il est recommandé de l’utiliser avec parcimonie et de privilégier les balises sémantiques.
• <span> : Un conteneur en ligne, utilisé pour appliquer un style à une portion de texte.

Structurer le texte : balises sémantiques pour le contenu

La manière dont le texte est structuré sur une page web a un impact considérable sur la lisibilité, l’accessibilité et le SEO. Les balises sémantiques permettent de définir la signification du contenu et de le rendre plus accessible aux utilisateurs et aux moteurs de recherche. Les utiliser correctement est crucial pour créer un contenu optimisé.

Titres et sous-titres

Les titres et sous-titres, de <h1> à <h6> , sont utilisés pour structurer le contenu textuel. Ils permettent de définir la hiérarchie de l’information et de faciliter la lecture et la compréhension. Une utilisation adéquate des titres est essentielle pour le SEO et l’accessibilité.

• <h1> à <h6> : Les titres et sous-titres, où <h1> est le titre principal et <h6> est le sous-titre le plus petit. Respectez la hiérarchie et utilisez un seul <h1> par page.
• Conseils pour choisir des titres optimisés : utilisez des mots-clés pertinents, assurez la clarté et la pertinence.

Paragraphes et formatage du texte

Les paragraphes et les balises de formatage du texte permettent de structurer et de mettre en forme le contenu textuel. Les paragraphes divisent le texte en unités de sens logiques, tandis que les balises de formatage mettent en évidence des mots ou des expressions importants. Une utilisation judicieuse de ces balises améliore la lisibilité et l’accessibilité.

• <p> : Un paragraphe de texte. Divise le texte en unités de sens logiques.
• <strong> et <b> : Utilisés pour mettre en évidence du texte. <strong> indique une importance sémantique, tandis que <b> est utilisé pour le style gras. Préférez <strong> pour l’importance sémantique.
• <em> et <i> : Utilisés pour mettre en emphase du texte. <em> indique une emphase sémantique, tandis que <i> est utilisé pour le style italique. Privilégiez <em> pour l’emphase sémantique.
• <br> : Un saut de ligne. Utilisez-le avec modération et privilégiez le CSS pour contrôler la mise en page.
• <hr> : Une ligne horizontale. Sépare visuellement différentes sections de contenu.

Listes

Les listes permettent de structurer le contenu de manière claire et concise. Elles sont particulièrement utiles pour présenter des informations sous forme de listes à puces, de listes numérotées ou de listes de définitions. Bien utilisées, les listes améliorent la lisibilité et l’accessibilité.

• <ul> et <li> : Une liste non ordonnée (à puces). Par exemple, pour un menu de navigation.
• <ol> et <li> : Une liste ordonnée (numérotée). Utile pour une recette de cuisine.
• <dl> , <dt> , <dd> : Une liste de définition (termes et définitions).

Citations et code

Les citations et le code enrichissent le contenu d’une page web. Les citations mettent en évidence des extraits de texte provenant d’autres sources, tandis que le code affiche des exemples de code informatique. Utilisez ces balises pour assurer la clarté et l’intégrité du contenu.

• <blockquote> : Une citation longue. L’attribut cite indique la source.
• <q> : Une citation courte.
• <pre> et <code> : Utilisés pour afficher du code. <pre> préserve la mise en forme, tandis que <code> indique qu’il s’agit de code. Essentiels pour les tutoriels et la documentation.

Intégrer des médias : images, vidéos et audio

L’intégration de médias rend un site web plus attrayant et interactif. L’utilisation adéquate des balises HTML et l’optimisation des fichiers multimédias contribuent à améliorer l’expérience utilisateur et les performances du site.

Images

L’intégration d’images est essentielle. L’attribut alt est crucial pour l’accessibilité et le SEO, car il fournit une description textuelle de l’image. L’optimisation des images, notamment en utilisant des formats appropriés et en compressant les fichiers, est importante pour la performance.

• <img> : Permet d’insérer une image dans la page.
  • L’attribut src spécifie le chemin d’accès à l’image.
  • L’attribut alt fournit un texte alternatif pour l’image, indispensable pour l’accessibilité et le SEO.
    • Conseils pour rédiger un texte alternatif efficace : description concise et utilisation de mots-clés pertinents.
  • L’attribut loading="lazy" permet de charger les images de manière différée, ce qui améliore les performances.
  • Les attributs srcset et sizes permettent de proposer des images responsives pour différentes tailles d’écran.
• <figure> et <figcaption> : Utilisés pour encadrer une image et lui associer une légende.

Vidéos

L’intégration de vidéos enrichit considérablement l’expérience utilisateur. La balise <video> permet d’intégrer des vidéos directement dans la page. Utilisez des formats vidéo optimisés, prévoyez une image de couverture et incluez des contrôles de lecture.

• <video> : Permet d’intégrer une vidéo dans la page.
  • L’attribut src spécifie la source de la vidéo.
  • L’attribut controls affiche les contrôles de lecture.
  • Les attributs autoplay , muted et loop permettent de contrôler la lecture automatique, le son et la boucle de la vidéo.
  • Il est recommandé d’utiliser des formats vidéo optimisés tels que MP4 et WebM.
  • Il est aussi recommandé de prévoir une image de couverture (poster) pour la vidéo.
• <source> : Permet de spécifier plusieurs sources vidéo pour assurer la compatibilité avec différents navigateurs.

Audio

L’intégration d’audio est utile pour proposer des podcasts, des interviews ou d’autres contenus audio. La balise <audio> permet d’intégrer des fichiers audio directement dans la page. Proposez plusieurs formats audio pour assurer la compatibilité.

• <audio> : Permet d’intégrer un fichier audio dans la page.
  • Son utilisation est similaire à la balise <video> , avec les attributs appropriés.
  • Proposer plusieurs formats audio assure la compatibilité.

La balise <picture>

La balise <picture> offre une solution flexible pour charger différentes sources d’image en fonction de critères tels que la résolution de l’écran, le type d’appareil et les capacités du navigateur. Elle optimise le chargement des images pour chaque utilisateur, améliorant ainsi l’expérience et les performances.

Liens et navigation : la colonne vertébrale du web

Les liens et la navigation sont des éléments fondamentaux du web, permettant aux utilisateurs de se déplacer et d’explorer le contenu. Une utilisation correcte des balises HTML et une optimisation des liens améliorent l’expérience, le SEO et l’accessibilité.

Liens hypertextes

Les liens hypertextes sont la base de la navigation web. La balise <a> permet de créer des liens vers d’autres pages, des fichiers, des adresses email ou des ancres. L’utilisation appropriée des attributs de la balise <a> est essentielle pour optimiser les liens pour le SEO, l’accessibilité et la sécurité.

• <a> : Permet de créer un lien hypertexte.
  • L’attribut href spécifie l’URL de destination.
  • L’attribut target="_blank" ouvre le lien dans un nouvel onglet. Utilisez cet attribut avec prudence et ajoutez rel=" " pour des raisons de sécurité.
  • L’attribut title fournit une infobulle au survol du lien, améliorant l’accessibilité.

Liens internes et ancres

Les liens internes relient différentes pages au sein d’un même site, facilitant la navigation. Les ancres permettent de créer des liens vers des sections spécifiques d’une même page, offrant une navigation rapide au sein de documents longs.

• Les liens internes améliorent la navigation et le maillage interne du site.
• Les ancres permettent de créer des liens vers des sections spécifiques, en utilisant l’attribut id sur les éléments cibles et en faisant référence à cet ID dans l’URL du lien ( <a href="#ancre"> ).

Mots-clés dans les liens

L’utilisation de mots-clés pertinents dans le texte des liens est un facteur important pour le SEO. Les mots-clés aident les moteurs de recherche à comprendre le sujet de la page de destination.

La balise <base>

La balise <base> spécifie l’URL de base pour tous les liens relatifs de la page. Elle est utile lorsque les liens relatifs sont utilisés et qu’il est nécessaire de définir une base commune.

Les balises <area> et <map>

Les balises <area> et <map> permettent de créer des zones cliquables sur une image, créant une « image map ». Bien que cela puisse être utile, il est généralement recommandé de les remplacer par du CSS et du HTML plus accessibles en raison des problèmes d’accessibilité pour les utilisateurs de lecteurs d’écran.

Tables et formulaires : interagir avec l’utilisateur

Les tables et les formulaires sont essentiels pour interagir avec les utilisateurs. Les tables présentent des données tabulaires de manière claire, tandis que les formulaires permettent aux utilisateurs de saisir des informations. L’utilisation correcte des balises HTML et l’optimisation des tables et des formulaires contribuent à une meilleure expérience et à l’accessibilité.

Tables

Les tables permettent de structurer et de présenter des données tabulaires de manière organisée. La balise <table> définit une table, tandis que <tr> , <th> et <td> définissent les lignes, les en-têtes et les cellules. Les balises <thead> , <tbody> et <tfoot> regroupent les lignes d’en-tête, de contenu et de pied de page, et la balise <caption> définit un titre.

Utilisez les tables pour présenter des données tabulaires et non pour la mise en page. Cette dernière est une pratique déconseillée en raison des problèmes d’accessibilité et de SEO. Préférez le CSS.

Parts de marché des navigateurs web de bureau (Mai 2024)

Navigateur	Pourcentage
Chrome	65.99%
Safari	11.62%
Edge	11.03%

Formulaires

Les formulaires permettent aux utilisateurs de saisir et de soumettre des informations. La balise <form> délimite un formulaire, tandis que <label> , <input> , <textarea> , <select> , <option> , <button> et <input type="submit"> définissent les différents champs. Les balises <fieldset> et <legend> permettent de regrouper les champs et de leur donner un titre.

L’attribut action de la balise <form> spécifie l’URL de traitement, tandis que l’attribut method spécifie la méthode d’envoi (GET ou POST). L’attribut type de la balise <input> définit le type de champ (text, password, email, number, etc.). L’attribut name identifie les données lors de la soumission, et placeholder affiche un texte d’exemple. Enfin, required rend le champ obligatoire.

Accessibilité des formulaires

L’accessibilité est un aspect crucial des formulaires web. Assurez-vous que les formulaires sont accessibles à tous les utilisateurs, y compris ceux qui utilisent des lecteurs d’écran ou d’autres technologies d’assistance. L’utilisation appropriée des labels, des attributs ARIA et d’autres techniques d’accessibilité rend les formulaires plus faciles à utiliser.

Balises HTML5 sémantiques : un web plus intelligent

Les balises HTML5 sémantiques offrent une manière plus claire et structurée de définir le contenu d’une page web, améliorant l’accessibilité, le SEO et la maintenance du code. Elles contribuent à créer un web plus intelligent et facile à comprendre.

Balises HTML5 : récapitulatif

Nous avons déjà abordé des balises HTML5 sémantiques importantes, notamment <article> , <aside> , <footer> , <header> , <nav> , <main> , <section> , <figure> , <figcaption> , <video> et <audio> . Ces balises définissent les différentes sections de manière claire.

Autres balises HTML5

Il existe d’autres balises HTML5 moins courantes mais utiles. Elles ajoutent des fonctionnalités et améliorent l’expérience utilisateur. Vérifiez leur compatibilité avec les navigateurs.

• <details> et <summary> : Afficher/masquer des détails (contenu repliable).
• <mark> : Mettre en évidence une portion de texte.
• <meter> : Représenter une valeur dans une plage (par exemple, l’utilisation du disque dur).
• <progress> : Afficher la progression d’une tâche.
• <time> : Représenter une date et/ou une heure.

Pourquoi utiliser ces balises ?

L’utilisation des balises HTML5 sémantiques améliore la sémantique du code, facilite la compréhension par les moteurs de recherche et rend le site plus accessible. En les adoptant, les développeurs créent des sites plus performants et agréables à utiliser.

Au-delà des balises : les attributs pour l’optimisation

Si les balises sont les éléments constitutifs, les attributs sont cruciaux pour l’optimisation du SEO, de l’accessibilité et des performances. Ils modifient le comportement et l’apparence des balises et fournissent des informations supplémentaires.

Récapitulatif des attributs

Nous avons abordé des attributs importants, notamment alt ( <img> ), href ( <a> ), src ( <img> , <video> , <audio> ), title ( <a> ), lang ( <html> ), charset ( <meta> ), name (formulaire), content ( <meta> ), loading ( <img> ), srcset ( <img> ) et sizes ( <img> ). Ils améliorent l’accessibilité, le SEO et les performances.

Attributs ARIA : améliorer l’accessibilité

Les attributs ARIA (Accessible Rich Internet Applications) améliorent l’accessibilité des sites pour les personnes handicapées. Ils fournissent des informations supplémentaires aux technologies d’assistance, comme les lecteurs d’écran, permettant une meilleure compréhension du contenu. En utilisant ARIA, vous rendez votre site plus inclusif et accessible à tous.

Voici quelques exemples d’utilisation des attributs ARIA :

• aria-label : Fournit une étiquette descriptive pour un élément, surtout utile pour les icônes ou les boutons sans texte. Par exemple: <button aria-label="Fermer la fenêtre"><i class="fa fa-close"></i></button> .
• aria-describedby : Associe un élément à une description plus détaillée située ailleurs dans la page. Par exemple, pour une zone de saisie avec des instructions spécifiques: <input type="text" aria-describedby="instruction"><div id="instruction">Veuillez entrer votre date de naissance au format JJ/MM/AAAA</div> .
• aria-hidden="true" : Masque un élément aux lecteurs d’écran s’il est purement décoratif et n’apporte aucune information utile. Par exemple: <img src="decor.png" aria-hidden="true" alt=""> .
• aria-role : Définit le rôle sémantique d’un élément pour les technologies d’assistance, particulièrement utile pour les éléments qui ne sont pas des balises sémantiques natives. Par exemple: <div aria-role="navigation">...</div> .

Microdonnées et schema.org : optimisation du référencement

Les microdonnées et Schema.org sont des vocabulaires de balisage sémantique qui aident les moteurs de recherche à comprendre le contenu de vos pages web de manière plus précise. Ils permettent de structurer les informations de manière standardisée, ce qui facilite leur indexation et leur affichage dans les résultats de recherche. L’implémentation de ces techniques est une stratégie SEO avancée pour améliorer la visibilité et le taux de clics de votre site web.

Voici quelques exemples de balises Schema.org courantes :

• Organization : Utilisé pour décrire les informations sur une entreprise, comme son nom, son logo, son adresse et ses coordonnées. Par exemple : <div itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">Nom de l'Entreprise</span> </div>
• Person : Utilisé pour décrire une personne, en indiquant son nom, son titre, sa photo, etc. Par exemple : <div itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Nom de la Personne</span> </div>
• Product : Utilisé pour décrire un produit, en précisant son nom, sa description, son prix et sa disponibilité. Par exemple : <div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">Nom du Produit</span> </div>
• Event : Utilisé pour décrire un événement, en indiquant sa date, son lieu et sa description. Par exemple : <div itemscope itemtype="http://schema.org/Event"> <span itemprop="name">Nom de l'Événement</span> </div>
• Article : Utilisé pour décrire un article de blog ou de presse, en précisant son titre, son auteur et sa date de publication. Par exemple : <div itemscope itemtype="http://schema.org/Article"> <span itemprop="name">Titre de l'Article</span> </div>
• Recipe : Utilisé pour décrire une recette de cuisine, en indiquant les ingrédients, les instructions et le temps de préparation. Par exemple : <div itemscope itemtype="http://schema.org/