L'agence
Services
Nos référencesActualités
Vous avez un projet ? 
Contactez-nous !
Contactez-nous

Balise HTML et rédaction web : tout comprendre au langage numérique

Tristan de La Chevasnerie
Tristan de La Chevasnerie
Rédacteur web
Partager cet article
Tout comprendre aux balises HTML dans la rédaction web !

Certes, ce terme en a effrayé plus d’un au moment de sa formation à la rédaction web. Pourtant, maîtriser le langage de la rédaction web et plus précisément, du SEO, n’est pas si impossible qu’il n’y paraît ! 

Pour vous rassurer, sachez qu’il n’est pas impératif de maîtriser le fonctionnement des balises HTML pour les utiliser efficacement. Cependant, connaître leurs noms et leurs fonctionnalités vous évitera des confusions et autres maladresses, d’autant plus que cela vous évitera d’être perdu lors de vos futures discussions avec des experts SEO !

Vous souhaitez une prestation de rédaction web ? Faites appel à l’expertise de l’agence de rédaction web Pierrot ! 

Qu’est-ce qu’une balise HTML ? 

En quelques mots, une balise HTML (HyperText Markup Language) est un élément de code inséré dans un texte sur le Web. Son usage est fondamental, car elle fait office de colonne vertébrale en structurant les pages et les contenus qui sont publiés en ligne. 

Une balise HTML est un élément de code inséré dans un texte sur le Web.

Il existe plusieurs balises HTML et chacune d’entre elles possède une utilisation qui lui est propre. Leur seul point commun réside dans leur code de construction : 

  • Écrire les textes en minuscules ; 
  • Insérer la balise d’ouverture “<>” avant le texte, puis la balise de fermeture “</>” à la fin du texte. 

Pour mieux comprendre, voici un exemple de balise HTML avec le titre de l’article que vous êtes en train de lire. Tout d’abord, notez que dans le lexique HTML, le titre principal se nomme H1 (le H symbolise le heading et le numéro représente son niveau dans la hiérarchisation d’un texte). Avec cette précision, retenez que le titre de cet article est : Balise HTML et rédaction web : tout comprendre au langage numérique. 

Adapté en langage HTML, cela se présente sous cette forme : <h1>balise HTML et rédaction web : tout comprendre au langage numérique</h1>. 

Quels sont les fonctions des balises HTML et comment les utiliser ? 

Les balises HTML servent à l’expérience utilisateur  

Véritables éléments dédiés à la rédaction web, les balises HTML ont pour mission de structurer un contenu ou une page web dans l’unique objectif de permettre aux internautes de naviguer sans difficulté sur vos contenus. 

Lorsqu’un rédacteur web rédige une page ou simplement un article de blog, il mettra un point d’honneur à soigner l’agencement et la hiérarchisation des textes. Cette manœuvre est ainsi primordiale pour les lecteurs, mais elle l’est aussi pour les robots d’indexation des moteurs de recherche comme Bing, Ecosia, Baidu et, bien entendu, Google. Ne négligez surtout pas l’importance de créer un contenu adapté aux exigences du numérique ! Si une page visitée par un robot ne lui convient pas, celui-ci passe immédiatement à un autre site. 

La création de contenu web n’est pas une mince affaire. Pierrot vous apporte son savoir-faire dans la gestion, la rédaction et la publication de contenus à destination de votre entreprise ou de vos clients ! 

Vous utilisez WordPress ? L’outil programme les balises HTML pour vous ! 

Si vous entretenez un site internet, il y a de fortes chances que vous utilisiez WordPress ou Hubspot. Ces CMS (systèmes de gestion de contenu) sont très pratiques puisque les balises HTML sont automatiquement installées. Hiérarchie des titres, mots en gras ou en italique et listes à puce, nul besoin d’installer les codes de construction comme expliqué précédemment. 

A contrario, si vous utilisez un autre outil de gestion de contenu comme Wix ou Dupral, il convient de maîtriser quelques notions de balises HTML, car il vous faut éditer à la main l’ensemble des balises. Pour ce faire, voici un guide de l’ensemble des balises HTML que vous devez connaître en rédaction web !  

Les balises HTML on page

Indispensables pour le référencement naturel d’un site web, les balises HTML ont tout d’abord des conséquences importantes sur la structure d’un contenu ou d’une page. Lorsque l’on parle de balises HTML on page, celles-ci sont majoritairement liées à la mise en forme des blocs de texte, des titres et des images

La balise principale : la balise <H1>

Comme expliqué précédemment, la balise H1, codée <h1>, symbolise le titre principal d’un article ou du contenu d’une page. Son influence sur le SEO d’une page est considérable. Voici quelques conseils pour optimiser votre balise H1 : 

  • Veillez à ne pas excéder le maximum de 60 caractères (7 à 9 mots) pour favoriser un titre clair et concis  ; 
  • Ajoutez le mot-clé de votre contenu  ; 
  • Assurez-vous que le titre soit cohérent avec l’ensemble du contenu.

Quelques exemples de balises H1 codées en langage HTML : 

  • <h1>analyse sémantique : définition et exemple</h1>
  • <h1>audit seo : comment le faire et à quoi sert-il ?</h1>  
  • <h1>comment faire un titre accrocheur  ?</h1>

Retenez que la balise H1 doit être votre priorité lorsque vous rédigez un article ou une page. Il s’agit du premier élément qu’un lecteur aperçoit et il détermine si l’internaute reste sur votre page. Vous souhaitez rédiger un bon titre d’article ? Découvrez notre guide 2024 ! 

Les balises des différentes parties d’un texte : les balises <H2> à <H5>

Ces balises segmentent le contenu. En clair, elles agissent comme des sous-titres hiérarchisés selon leur numéro qui indiquent l’importance de la balise. Les H2 sont les seconds titres les plus importants d’un contenu, car ils représentent les différentes rubriques que comportent des pages de site ou bien des articles. Au sein des H2 se trouvent les autres balises allant de H3 à H5 qui composent les sous parties

En rédaction web; il convient de structurer votre texte avec des parties et des sous parties. En langage HTML, elles sont appelées H2, H3,H4, etc.

Notez bien ceci : le H2 comporte des H3 qui comportent des H4 dont eux-mêmes ont la possibilité de comporter des H5. Il n’est pas systématique d’ajouter des H3 dans un H2, mais, si vous le faites, assurez-vous de mettre au minimum deux H3 dans votre H2, sinon cela perturbe les exigences des moteurs de recherche. De plus, vous ne pouvez pas mettre de H4 dans votre H2 si il n’y a pas de H3. En résumé, cela est simplement une histoire de hiérarchie. 

Quelques exemples de balises de textes codées en langage HTML : 

  • <h2>les balises html on page</h2> ;
  • <h3>la balise principale : la balise h1</h3> ;
  • <h3>les balises des différentes parties d’un texte : les balises h2 à h5</h3>   

En respectant cette structure, vous optimisez votre référencement naturel et vous vous garantissez un bon positionnement dans les résultats de Google ! 

La balise pour les listes à puces : la balise <li>  

Rentrons dans un côté plus technique du langage HTML avec le codage des listes à puces. De la même manière que pour les balises Hn, il faut utiliser la construction suivante : <li>texte</li>. De plus, l’ensemble de la liste à puces doit elle aussi être comprise dans un codage qui est le suivant : <ul>liste à puces</ul>

Voici un exemple de liste à puces : 

Les meilleurs outils SEO  :

<ul>

  • <li>ahrefs</li> ; 
  • <li>google search console</li> ;
  • <li>semrush</li> ;
  • <li>screaming frog</li>

</ul>

La balise pour mettre un mot en gras : la balise <strong>

Comme clairement énoncé, la balise strong intervient pour mettre en mot en gras. La mise en forme de mots en gras apporte un avantage notable pour les lecteurs, car les mots les plus importants ressortent du texte et cela apporte une valeur ajoutée pour les robots d’indexations.

Exemples de mots en gras codés avec la balise strong : 

  • Maîtriser le <strong>seo</strong> offre un avantage notable pour la <strong>visibilité d’un site web</strong>   ;
  • L’outil <strong>yourtextguru</strong> permet d’optimiser un texte.

La balise pour mettre un mot en italique : la balise <l>

Utilisez dans le cadre d’une citation ou pour distinguer un terme d’une autre langue, il convient d’utiliser la balise <l> (il s’agit bien d’un L en minuscule).

Exemple d’une citation codée en italique : Jean-Paul Sartre a dit <l>l’existence précède l’essence</l> 

La balise pour insérer une image : la balise alt

Pour illustrer vos propos, rien de tel qu’une image. Pour en ajouter une, suivez la construction suivante : <img src=“lien url de l’image” alt=“description de l’image/>

Avec un exemple clair, voici ce que cela donne : <img src=https://i.etsystatic.com/19824621/r/il/b3b343/2696792851/il_1588xN.2696792851_f7vj.jpg alt=magnifique champ de fleurs/>

Les balises HTML off page 

Après l’étude des balises présentes dans un contenu, passons à celles qui apparaissent dans les résultats de recherche et qui incitent un internaute à cliquer sur votre lien. Les balises off page les plus utilisées par un rédacteur web sont le Title et la méta description

Créer un Title

Concrètement, le Title (à ne pas confondre avec le H1) est un lien cliquable en bleu qui se trouve sur la SERP. Sa position dans les moteurs de recherche est régie par les exigences de ces derniers. Les moteurs affichent un contenu selon son degré d’optimisation et de pertinence pour les internautes.  

Exemple de Title et de méta description que l'on retrouve sur la SERP.

Pour créer un Title, celui-ci doit évidemment correspondre au contenu de la page ou de l’article dont le lien redirige l’internaute, mais il ne doit pas être écrit exactement comme le H1, car les robots d’indexation ne l’acceptent pas. D’un point de vue technique, le Title ne doit pas dépasser 70 caractères au risque d’être tronqué par le moteur de recherche. Il doit également contenir les mots-clés principaux du contenu. 

Exemple d’une balise Title en langage HTML : 

<title>qu’est-ce qu’un audit sémantique ?</title>

Créer une méta description 

La méta description est le petit texte qui accompagne le Title dans les résultats de recherche. Ce texte apporte les informations essentielles du contenu afin d’inciter l’internaute au clic. Idéalement, la méta ne doit pas excéder un total de 160 caractères au risque d’être elle aussi tronquée, mais cela est moins gênant que pour un Title. 

Voici le code HTML pour insérer un Title avec sa méta description : 

<html>

<head>

<title>qu’est-ce qu’un audit sémantique ?</title>  

<meta name=description content=votre contenu est riche d’informations, mais présente une sémantique assez pauvre ? Améliorez-la avec un audit sémantique !/>

</head>

</html>

À présent, vous voici avec toutes les clés en main pour assurer une rédaction web optimale ! Vous souhaitez davantage de renseignements ou un accompagnement en rédaction SEO ? Contactez-nous ! 

FAQ

Comment repérer une balise HTML ? 

Pour distinguer une balise HTML dans un article web, rien de plus simple. Celle-ci se compose d’une balise ouvrante “<” et d’une balise fermante “/>” Il existe différentes balises et celles-ci comportent des termes très variés à insérer entre les balises ouvrantes et fermantes selon leurs objectifs. 

Quelles sont les 4 balises essentielles pour un site web ? 

Les balises HTML à prioriser sont : 

  • La méta description : contient toutes les informations essentielles du contenu affichées sur la SERP  ; 
  • Le Title : titre principal également affiché sur la SERP  ; 
  • La méta keyword : contient le mot-clé lu en priorité par Google  ; 
  • La méta robot : signale aux robots d’indexation si la page ou le contenu peut être référencé. 

Qu’est-ce qu’une balise span ? 

La balise span, codée <span>, est efficace lors de la création du template d’un site ou d’une page afin de délimiter les zones de textes. Grâce à elle, vous ne vous retrouverez pas avec un seul et unique bloc de texte lors de l’ajout de matière textuelle.

Vous avez un projet de rédaction ?
Contactez-nous !

L'agence Pierrot est spécialisée dans la rédaction à destination des professionnels et des entreprises. Brochures, rédaction web, articles de presse, nos rédacteurs vous prêtent leurs plumes pour traduire vos mots.

Contactez-nous
crossmenu