Comment utiliser les balises HTML en rédaction web ?

Les balises HTML sont les éléments qui influencent la structure et la mise en forme d'une page web. Elles font partie du langage informatique HTML. Certaines balises comme le H1, la balise alt, la balise strong ou encore la balise title sont analysées par les moteurs de recherche et ont un fort impact sur le référencement naturel (SEO) d'une page de site web.

Les balises HTML sont souvent gérées automatiquement par l'éditeur de style de CMS comme Wordpress. Il suffit qu'on utilise les outils de mise en forme comme :

• L'éditeur de titres <H1> à <H6>
• Le bouton de mise en gras <strong>
• L'intégrateur d'un bloc de citation
• L'outil de création de listes à puces ou ordonnées

Les CMS permettent d'accéder au code HTML pour y faire des modifications. Le plus souvent, le sigle </> ou html dans le bloc de texte désigne le bouton qui donne accès au code.

Selon le type de balise certaines doivent être ouvertes et fermées <> et </>. D'autres sont orphelines, c'est à dire qu'on ne les ferme pas : on se contente uniquement d'ncadrer le code de <> sans insérer de </> en fin de phrase ou en fin de paragraphe. C'est notamment le cas de la balise <br>.

Conseil : Faites en sorte d'avoir dans chaque section de votre page web le code HTML le plus léger possible, c'est à dire sans signes parasites. Pour cela, évitez de copier/coller votre texte directement depuis un fichier Word vers votre CMS. Pour garder un code propre, passez votre texte mis en forme dans un logiciel de nettoyage de code du type HTML Cleaner avant de l'intégrer sur votre site web.

La gestion des balises HTML en rédaction web fait partie des bonnes pratiques à maîtriser lorsque l'on écrit pour le web.

Les balises HTML sont importantes en rédaction web car, en plus de structurer le contenu de votre document, elles sont prises en compte par Google et les autres moteurs de recherche, comme Bing ou Yahoo, pour le référencement naturel. D'ailleurs certaines balises ont un impact fort sur le SEO. Le rédacteur web doit donc structurer son contenu en tenant compte de ces différentes balises. Notamment, en insérant le mot-clé principal de sa page ou la requête sur laquelle il doit se positionner dans certaines balises comme la balise Title ou le H1. On parle alors d'optimisation de contenu.

Les balises HTML qu'utilise fréquemment le rédacteur web sont : 

• La balise <title>
• La balise <meta description>
• Les balises titre <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• La balise <strong> (mise en gras d'une partie de texte)
• La balise <p> (paragraphe)
• La balise <br> (saut de ligne)
• La balise <ul> et <li> (liste à puces)
• La balise <ol> et <li> (liste ordonnée)
• La balise <a href> (la balise pour créer un lien hypertexte)

De nombreuses autres balises existent, cependant, il est plus rare qu'un rédacteur web aient à les intégrer à la main.

Les balises HTML on page sont les balises qui ont un impact sur la structure du texte visible par l'internaute. Ce sont toutes les balises liées à la mise en forme des blocs de texte, des titres et du contenu. La balise alt, qui sert à nommer une image, est aussi une balise on page.

La balise H1 est la balise liée au titre de l'article ou du contenu de la page. Elle possède un fort pouvoir SEO.

Nos conseils pour rédiger une bonne balise H1 : 

• Ne pas dépasser 60 caractères espaces comprises ou 7 à 9 mots.
• Insérer le mot-clé principal ou la requête web visée dans votre titre.
• Rédiger un titre en lien avec votre article, il doit être compréhensible.

EXEMPLES de balise <h1> : 

<h1>5 conseils pour rédiger un bon titre d'article</h1>

<h1>Comment rédiger un article de blog qui plaît ?</h1>

<h1>L'importance de la balise H1 en SEO</h1>

Il s'agit des balises HTML qui sont utilisées pour créer des sous-titres. 

Ces sous-titres sont : H2, H3, H4, H5 et H6.

Tout comme le titre H1, les sous-titres jouent un rôle important en SEO. Cependant, la puissance SEO diminue avec le niveau du sous-titre. Aussi un sous-titre H2 est bien plus important d'un point de vue référencement naturel qu'un sous-titre H6.

EXEMPLE de balises HTML de sous-titre : 

<h2>Le rôle des sous-titres en SEO</h2>

<h3>Structurer le contenu</h3

<h3>Optimiser le contenu</h3>

La création d'une liste à puces et ordonnée est aussi du langage HTML.

EXEMPLE de balises HTML pour une liste à puces : 

Les principaux moteurs de recherche sont : 

<ul>

<li>Google</li>

<li>Bing</li>

<li>Yahoo</li>

</ul>

EXEMPLE de code HTML pour insérer une liste ordonnée : 

Pour optimiser du contenu il faut :

<ol>

<li>Chercher le mot-clé à traiter</li>

<li>Vérifier l'intention de recherche selon Google</li>

<li>Télécharger un guide sur Yourtext.Guru</li>

<li>Réaliser la recherche documentaire</li>

<li>Rédiger le texte<li>

<li>Relire le texte</li>

<li>Vérifier le niveau d'optimisation du texte avec un outil SEO</li>

<li>Intégrer le texte sur le CMS</li>

</ol>

La balise <strong> sert à mettre des mots en gras.

EXEMPLE de balise <strong> : 

J'aime beaucoup le <strong>métier de rédacteur web SEO</strong>.

As-tu déjà entendu parler du <strong>Cocon Sémantique</strong> inventé par Laurent Bourrelly ? 

Pour mettre une partie de texte en italique on utiles la balise <I>

EXEMPLE  de balise <I> : 

Steve Jobs a dit <I>souvent les gens ne savent pas ce qu'ils veulent jusqu'à ce que vous le leur montriez</I>.

Bill Gates a dit <I>savoir n'est pas assez, il faut appliquer; souhaiter n'est pas assez, il faut le faire</I>.

 Si l'on peut mettre des citations en italique, nous avons aussi la possibilité de les intégrer avec des balises HTML prévues à cet effet. 

Il existe plusieurs façons d'intégrer une citation sur une page web. Voici les 2 plus courantes :

• En utilisant le code HTML <q> qui met la partie de phrase concernée en citation. 
• En créant un bloc de citation avec la balise <blockquote>.

EXEMPLE d'intégration de citation sur un site internet :

Jean Dion a dit <q>le principe de l'évolution est beaucoup plus rapide en informatique que chez le bipède</q>

<figure>

    <blockquote cite="URL du site où on a trouvé la citation">

        <p>Le meilleur endroit pour cacher un corps, c'est la deuxième page de Google.</p>

    </blockquote>

La création nécessite du code HTML et une ancre de lien. Une ancre de lien est le texte qui va accueillir votre lien, c'est à dire, le texte cliquable. 

EXEMPLE de balise <a> :

<a href="url-de-la-page-visee">texte que l'on souhaite voir apparaître</a>

Méthode d'insertion d'un lien HTML avec la balise <a href> :

1. On voit ici que la balise <a> est ouverte au début du code <a href="
2. Elle est suivie de l'url précédée de "et terminée par"
3. La balise <a est fermée grâce au signe > après l'url
4. L'ancre de lien est placée après le >
5. La fermeture de la balise lien est réalisée après l'ancre par l'insertion de </>

Le featured snippet est une réponse courte apportée à une requête sur le moteur de recherche Google. Il se positionne dans un encart très visible au-dessus des résultats naturels situés en première page de Google. Le featured snippet est doté d'un lien qui permet à l'internaute d'être redirigé vers la page du site web.

La balise snippet paragraphe permet de mettre en évidence une réponse à une question. Celle-ci doit être concise : pas plus d'une cinquantaine de mots.

EXEMPLE de balise pour intégrer un snippet paragraphe :

<div class="hsg-featured-snippet">

<h2>Qu'est-ce qu'un featured snippet?</h2>

<p>Un featured snippet est un bloc situé au dessus des résultats naturels de la première page de Google. Il apporte une réponse à la requête. Sa visibilité est susceptible d'attirer plus de visites sur le site web.<p>

</div

Tout comme le featured snippet paragraphe, le snippet liste se positionne au-dessus des résultats naturels en première page de Google. Sa seule différence est de ne pas être un paragraphe sous un sous-titre, mais une liste à  puces ou ordonnée.

EXEMPLE de balise featured snippet liste à puces : 

<div class="hsg-featured-snippet">

<h2>À quoi servent les balises HTML</h2>

<ul>

<li>à structurer le contenu</li>

<li>à optimiser le contenu</li>

<li>à créer des pages web</li>

</ul>

</div>

EXEMPLE de balise featured snippet liste ordonnée : 

<div class="hsg-featured-snippet">

<h2>Comment créer un bon contenu ?</h2>

<ol>

<li>Définir l'intention de recherche des internautes</li>

<li>Choisir le mot-clé</li>

<li>Créer le plan de la page web ou de l'article</li>

<li>Citer ses sources</li>

<li>Insérer des liens</li>

<li>Optmiser le contenu avec un outil SEO</li>

</ol>

</div>

Les balises off-page vont vous permettre d'optimiser votre site web en agissant sur des éléments non visibles sur la page. Pour le rédacteur web, les deux balises off-pages les plus utilisées sont la balise title et la balise meta description.

La balise title et une balise HTML qui permet de créer le titre visible sur la page de requête de Google ou d'un autre moteur de recherche. Idéalement, il contiendra pas plus de 70 caractères espaces compris et contiendra le mot-clé. Elle est intégrée dans le header du site et est un élément SEO important. 

EXEMPLE de balise title : 

<title>Les balises HTML pour le rédacteur web : Le tuto</title>

La balise meta description sert à décrire le contenu d'une page web. Elle est placée sous le title. Elle a une fonction d'incitation au clic. La longueur d'une balise Title est idéalement autour des 160 caractères espaces compris mais peut être aussi plus longue. Dans ce cas, Google choisira de la tronquer ou d'en extraire certains mots qu'il juge pertinents. On l'intègre dans la artie head du site.

Bon à savoir : Il arrive que Google n'affiche pas la meta description rédigée par le rédacteur. Dans ce cas, le moteur de recherche crée une description avec des éléments de phrases qui se trouvent dans la page web. C'est aussi ce qu'il fait quand le rédacteur a oublié d'intégrer la meta description sur le site web.

EXEMPLE de balise meta description :

<html>
<head>
<title>Les balises HTML expliquées au rédacteur web</title>
<meta name="description" content="Le tuto complet pour apprendre à utiliser les balises HTML utile en rédaction web. À télécharger, la fiche mémo : Les balises HTML pour le rédacteur web." />
</head>
</html>

Vous avez maintenant toutes les clés en mains pour intégrer les balises dans vos articles de blog et contenus de pages de site internet. Je vous souhaite une excellent rédaction.

Ces autres articles et ressources pourraient vous intéresser : 

Qu'est-ce qu'une ancre de lien - définition ? 

Apprendre à coder en HTML : éléments balises et attributs