Balise HTML : définition, syntaxe et balises essentielles à connaître
Un titre qui déborde, un paragraphe qui avale la moitié de l’écran, un texte de lien qui s’étire jusqu’au pied de page : dans la majorité des cas, le coupable est une balise oubliée ou mal fermée. Savoir à quoi sert chaque balise évite ces accidents, et c’est aussi la base d’un référencement local performant pour une entreprise de proximité.
Une balise HTML est un marqueur du langage de balisage HTML qui encadre un contenu pour indiquer au navigateur comment l’afficher et le structurer. Elle s’écrit entre chevrons et fonctionne le plus souvent par paire : une balise d’ouverture, le contenu, puis une balise de fermeture précédée d’une barre oblique. Par exemple, un paragraphe s’écrit avec la balise ouvrante et la balise fermante correspondante. Titres, paragraphes, liens, images et listes reposent tous sur ce principe de balises qui délimitent chaque élément de la page.
Qu’est-ce qu’une balise HTML et à quoi sert-elle ?
Une balise n’est pas décorative : elle déclare la nature du contenu qu’elle entoure. Le même texte devient un titre, un paragraphe ou un lien selon la balise qui l’encadre. Ce marquage est aussi ce que lisent les moteurs de recherche et les lecteurs d’écran, qui n’ont aucun œil pour juger de l’apparence.
Le HTML est un langage de balisage, pas un langage de programmation : il décrit la structure d’une page web, sans calcul ni condition. L’apparence relève d’une feuille de style CSS, le comportement du JavaScript. Cette répartition des rôles est détaillée dans la documentation de référence du langage HTML sur MDN Web Docs.
Balise, élément et attribut : ne pas confondre les trois notions
Dans le langage courant, on dit « balise » pour tout. Techniquement, la balise est le marqueur entre chevrons, l’élément est l’ensemble formé par l’ouverture, le contenu et la fermeture, et l’attribut est un paramètre écrit dans la balise ouvrante. Cette distinction est reprise dans la fiche de référence consacrée aux éléments HTML.
Comment écrire une balise HTML : syntaxe, chevrons et fermeture
La notion posée, reste à écrire du code html correct. Une balise s’ouvre entre chevrons, se ferme avec une barre oblique, et tout ce qui se trouve entre les deux appartient à l’élément.
Concrètement : <p>Voici un paragraphe.</p>. Le nom s’écrit en minuscules, collé au chevron ouvrant. Les balises s’imbriquent comme des poupées russes, jamais en escalier : la dernière ouverte est la première fermée. <p><strong>texte</strong></p> est valide, l’ordre inverse casse la structure.
Sur les audits techniques, la fermeture manquante reste le classique du genre. Un </h2> oublié dans un article, et tout le contenu suivant remonte au niveau du titre : le navigateur affiche encore quelque chose, souvent en gros et en gras, mais la hiérarchie devient illisible pour Google.
Balises auto-fermantes : img, br, input et les autres
Certaines balises n’encadrent rien et n’ont donc pas de fermeture. On parle de balise de type void : <img> pour une image, <br> pour un retour à la ligne, <input> pour un champ de formulaire, <meta> et <link> dans l’en-tête. On les écrit simplement <img src= »photo.jpg » alt= »chien sur la plage »>. La barre oblique finale, héritée du XHTML, est tolérée mais devenue inutile.
Ajouter des attributs à une balise (src, href, class, id)
Un attribut se glisse dans la balise d’ouverture, sous la forme nom= »valeur ». L’attribut src désigne le fichier source d’une image, href la destination d’un lien, alt son texte de remplacement, class et id des points d’accroche pour le style CSS ou le JavaScript. Plusieurs attributs se séparent par une espace : <a href= »/contact/ » class= »bouton »>Nous écrire</a>. Un guillemet non refermé suffit à faire disparaître la fin de la ligne.
La structure de base d’un document : html, head, body, title
Ces balises ne flottent pas librement. Pour créer une page html valide, il faut respecter un squelette obligatoire, identique du site vitrine à la boutique en ligne.
- <!DOCTYPE html> ouvre le fichier et annonce la version du langage utilisée.
- La balise html enveloppe tout le document et porte la langue du contenu, par exemple lang= »fr ».
- Dans le head se rangent les métadonnées : title, encodage, viewport, appels aux feuilles de style.
- Tout ce que voit l’internaute vit dans le body : textes, images, liens, listes, formulaires.
Ce trio ne change jamais : html, head, body. L’en-tête n’affiche rien à l’écran mais conditionne l’affichage ; le corps porte le contenu visible. Déclarer une balise de contenu dans l’en-tête produit un rendu imprévisible d’un navigateur à l’autre.
La balise title mérite une attention particulière. Le couple title / head est indissociable : c’est ce titre que le navigateur affiche dans l’onglet et que Google reprend comme titre cliquable dans ses résultats. Un site web dont toutes les pages partagent le même title se prive de son signal le plus visible. C’est le premier point que nous contrôlons lors d’une création de site internet.
La balise méta viewport et les métadonnées de l’en-tête
La balise méta viewport indique au navigateur mobile comment dimensionner la page. Sans elle, un téléphone rend le document comme un écran d’ordinateur puis le réduit : texte minuscule, zoom obligatoire. On l’écrit <meta name= »viewport » content= »width=device-width, initial-scale=1″>.
L’en-tête accueille d’autres balises décisives : l’encodage <meta charset= »utf-8″> qui évite les accents cassés, la méta description reprise sous le titre dans les résultats, la balise canonical qui désigne l’URL de référence, la méta robots qui autorise ou bloque l’indexation. Une balise noindex oubliée après une mise en production fait disparaître une page entière des résultats.
Les balises de contenu à connaître : titres, texte, liens, images et listes
Le squelette en place, le corps se remplit. Voici les balises qu’un rédacteur web manipule tous les jours, avec leur rôle et leur syntaxe.
| Balise | Rôle | Exemple de syntaxe |
|---|---|---|
| title | Titre du document, affiché dans l’onglet et en résultat de recherche | <title>Balise HTML : guide complet</title> |
| h1 | Titre principal, unique, du contenu visible | <h1>Balise HTML</h1> |
| p | Paragraphe de texte | <p>Un paragraphe.</p> |
| a | Lien hypertexte, interne ou externe | <a href= »/tarifs/ »>nos tarifs</a> |
| img | Insertion d’une image, avec texte alternatif | <img src= »store.jpg » alt= »store banne beige »> |
| ul / li | Liste à puces et ses items | <ul><li>Premier point</li></ul> |
| div | Conteneur neutre de mise en page | <div class= »colonne »>…</div> |
| section | Regroupement thématique porteur de sens | <section>…</section> |
Pour insérer un lien, la balise a et son attribut href suffisent : <a href= »https://exemple.fr/page/ »>texte du lien</a>. L’ancre, c’est-à-dire le texte cliquable, doit annoncer la page d’arrivée ; « cliquez ici » n’apprend rien, ni à l’internaute ni au moteur. Ce réflexe fait partie des fondamentaux de la rédaction de contenu SEO.
Côté visuels, l’attribut alt d’une image décrit ce qu’elle montre, pour les lecteurs d’écran comme pour Google. Et pour une énumération, une liste <ul> ou <ol> avec un <li> par item vaut toujours mieux qu’une série de paragraphes ouverts par un tiret : la liste est alors comprise comme une liste.
Bien utiliser les balises de titre H1 à H6
Les balises de titre HTML vont de H1 à H6 et hiérarchisent le contenu d’une page. La balise H1 correspond au titre principal et ne doit apparaître qu’une seule fois par page. Les balises H2 introduisent les sections principales, les H3 leurs sous-parties, et ainsi de suite jusqu’à H6. Cette hiérarchie doit refléter la logique du contenu et non son apparence : il ne faut jamais choisir un niveau de titre pour sa taille de police, ce rôle revient à la feuille de style CSS. Une structure de titres cohérente aide à la fois les internautes, les lecteurs d’écran et les moteurs de recherche à comprendre le plan de la page.
Le cas revient à presque chaque audit : trois ou quatre H1 sur la même page, parce que le thème emploie ce niveau pour sa taille de police. Google ne distingue plus le sujet principal. Le critère WCAG consacré aux titres et étiquettes pousse dans le même sens : un titre doit décrire la section qu’il introduit.
Balises sémantiques HTML5 face aux div et span
Les balises sémantiques HTML5 comme header, nav, main, article, section, aside et footer décrivent le sens d’un bloc, là où les balises div et span restent neutres. Utiliser ces balises sémantiques plutôt qu’une succession de div aide le navigateur à comprendre la structure de la page, améliore l’accessibilité pour les lecteurs d’écran des personnes malvoyantes et donne aux moteurs de recherche des repères clairs sur le rôle de chaque zone. Une div reste utile pour un simple regroupement de mise en forme, un span pour cibler un fragment de texte en ligne.
Entre div et span, la différence tient au flux. La div est un bloc : elle occupe toute la largeur et sert à regrouper des éléments pour la mise en page. Le span reste en ligne et cible quelques mots à l’intérieur d’un paragraphe, par exemple pour les colorer en CSS. Aucun des deux ne porte de signification, comme le précise la spécification HTML du WHATWG sur les sémantiques de niveau texte.
Sur beaucoup de sites audités, tout est enfermé dans des div génériques. La page s’affiche parfaitement, mais rien ne sépare l’article de la navigation ou du pied de page. Basculer ces div en header, main, article et footer ne change pas un pixel à l’écran et change tout pour les machines. C’est exactement ce que désigne la notion de sémantique définie dans le glossaire MDN.
L’enjeu est aussi très humain. Un lecteur d’écran propose de naviguer de titre en titre, ou de sauter directement au contenu principal quand une balise main existe. Sur une page tout en div, ces raccourcis disparaissent et la personne malvoyante doit écouter l’intégralité de la page dans l’ordre.
Quelles balises HTML pèsent vraiment sur votre référencement
Les balises HTML qui pèsent le plus sur le référencement sont la balise title, affichée comme titre dans les résultats de recherche, la balise méta description, les balises de titre H1 à H6 qui structurent le contenu, la balise a pour le maillage des liens et l’attribut alt des balises image qui décrit les visuels aux moteurs et aux lecteurs d’écran. Un balisage sémantique HTML5 propre renforce la compréhension de la page par Google. Ces balises n’améliorent pas artificiellement un positionnement, mais un balisage correct évite que le contenu soit mal interprété ou mal indexé.
Aucune magie, donc. Un title bien écrit n’achète pas une position : il évite que Google le réécrive parce qu’il le juge peu représentatif de la page. Même logique pour les H2, qui servent de plan et alimentent les extraits affichés, sans constituer un levier de classement direct.
Le maillage, lui, repose entièrement sur la balise a et sur son ancre, qu’il s’agisse de liens internes entre vos pages ou de liens obtenus lors d’une campagne de netlinking. Une ancre vague affaiblit le lien, quelle que soit sa provenance.
Un exemple pris sur la refonte d’un site de services d’une centaine de pages sous WordPress. Le thème générait automatiquement le nom de la société en H1 sur chaque page, et le titre réel de la page redescendait en H2. Résultat : les pages secondaires se ressemblaient toutes pour Google, et les visuels du catalogue partaient sans aucun attribut alt.
Nous avons repris le gabarit : un H1 unique reprenant le sujet réel de chaque page, les H2 pour les sections, un alt descriptif sur chaque image, et les div de structure remplacées par header, main, article et footer. Aucun changement de design, aucune ligne de contenu réécrite. Dans les semaines suivantes, les titres affichés en résultats correspondaient enfin au contenu des pages, et les pages profondes ont commencé à ressortir sur leurs propres requêtes.
Ce type de correction relève de l’optimisation technique d’un site, au même titre que la vitesse de chargement ou la gestion de l’indexation.
Des balises correctes pour un site vraiment visible
De la syntaxe au référencement, un même fil relie tout ce qui précède : une balise juste sert simultanément le navigateur, l’internaute et les moteurs. Le réflexe s’acquiert vite, à condition d’en faire une routine plutôt qu’une correction d’urgence après une chute de trafic.
- Vérifier qu’un seul H1 résume le sujet de la page.
- Refermer chaque balise ouverte, dans l’ordre d’imbrication.
- Écrire un title unique et descriptif page par page.
- Aucune image publiée sans attribut alt renseigné.
- Remplacer les div anonymes par des balises sémantiques HTML5.
- Laisser la taille des titres au CSS, jamais au choix du niveau.
Sur un site vivant, ce balisage se dégrade tout seul : une mise à jour de thème, une extension installée, un article publié à la hâte dans l’éditeur visuel. Un contrôle périodique, intégré à la maintenance d’un site web professionnel, revient bien moins cher qu’une reprise complète du balisage.
Questions fréquentes sur les balises HTML
Ces quatre questions reviennent systématiquement dès qu’on met les mains dans le code, souvent avec un vocabulaire flottant entre balise, tag et attribut. Voici les réponses courtes.
Pourquoi mes balises HTML ne s’affichent pas ou cassent le design ?
Trois pistes, dans cet ordre. Si vos balises apparaissent en clair à l’écran, elles ont été échappées : les chevrons ont été convertis en entités et le navigateur les lit comme du texte, pas comme du code. Si le design se disloque à partir d’un endroit précis, cherchez une balise non refermée ou un guillemet d’attribut manquant juste avant. Si l’affichage est simplement inattendu, le HTML est probablement correct et le problème vient du CSS appliqué à cette classe.
Quelle est la différence entre une balise HTML et un tag XML ?
Le HTML dispose d’un jeu de balises fini et prédéfini, dont chaque nom a un sens connu du navigateur, qui tolère par ailleurs pas mal d’approximations. En XML, l’auteur invente ses propres balises pour décrire des données, mais la syntaxe est stricte : toute balise doit être refermée et correctement imbriquée, sans quoi le fichier est rejeté. Un sitemap ou un flux RSS sont du XML, pas du HTML.
C’est quoi un tag de balisage en développement web ?
« Tag » est simplement le terme anglais pour balise, et vous l’entendrez souvent tel quel dans une équipe technique. Attention au faux ami : sur un CMS, un « tag » désigne aussi une étiquette de classement d’articles, qui n’a rien à voir avec le balisage du code.
Comment s’appelle le code entre chevrons dans un site internet ?
C’est une balise, ou tag en anglais. Le mot entre les chevrons est le nom de la balise (p, a, img), et ce qui le suit éventuellement, ce sont ses attributs.
Une page bien balisée ne se remarque pas : elle se comprend, du navigateur au lecteur d’écran jusqu’à Google.
Christophe Despres
Je suis Christophe Despres, le fondateur de l’agence SEO 1er Contact. Spécialiste du référencement naturel et de la visibilité en ligne, j’accompagne les entreprises dans le développement de leur présence sur Google grâce à des stratégies concrètes, durables et adaptées à leurs objectifs commerciaux.