· 

Comment utiliser les balises HTML en rédaction web ?

ordinateur-avec-balises-html

C'est quoi des balises HTML ?

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.

Comment utiliser les balises HTML ?

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.


Quelles sont les balises HTML utiles en rédaction web SEO ?

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.

 


Vous trouvez cet article intéressant ?

 



Comment faire des balises HTML on page ?

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  ou <h1>

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>


Les balises H2 à H6

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>


Les listes

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 mise en gras

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 ? 

 


La mise en italique

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>.

 


formation en rédaction web d audrey clabeck

Envie d'apprendre à bien rédiger pour le web ?



Les citations

 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>

 

Le code HTML pour créer un lien hypertexte

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 </>

La balise HTLM image - attribut alt

 

 

Il existe aussi une balise HTML pour intégrer une image sur une page web. On l'appelle l'attribut alt.

Le nom de l'image doit décrire ce que l'on voit sur l'image.

 

EXEMPLE : 

 

<img src="adresse de l'image" alt="chien noir avec un os">

Les featured snippet

exemple de featured snippet sur Google

Qu'est-ce qu'un featured snippet ?

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.

Le snippet paragraphe

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



Le snippet liste

exemple de featured snippet liste sur google

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>


Comment utiliser les balises off page ?

exemple de balises off page sur Google title et meta description

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

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

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.



Rédactrice web depuis 2014 et formatrice en rédaction web, Audrey Clabeck est également gérante de l'agence de rédaction Digitext. Elle est spécialisée dans la création de stratégies de contenu. Elle est également la créatrice de la formation Rédaction Web Level Up ! 

Sur Un Article sur le Web, elle publie ses conseils en rédaction web et parle de content marketing.

 

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

Écrire commentaire

Commentaires: 13
  • #1

    Ayélé (lundi, 01 février 2021 13:22)

    Merci pour cet article très complet et facile à comprendre.

  • #2

    Anne (vendredi, 25 février 2022 05:33)

    J'ai beaucoup appris. Merci

  • #3

    karamoko inza (samedi, 28 mai 2022 22:13)

    j'ai aimé

  • #4

    Emmanuel (samedi, 15 octobre 2022 23:12)

    Comment centré les texte en html

  • #5

    Dramera Ibrahim (lundi, 12 décembre 2022 07:19)

    J’ai aimé et je suis très content j’ai appris beaucoup

  • #6

    Saintfleur Feguens (jeudi, 16 février 2023 17:16)

    J’ai aimé . Merci pour cet article

  • #7

    Le Yatagan (samedi, 25 février 2023 17:29)

    Merci beaucoup pour ces exemples de balises.
    Ça m'a trop servis

  • #8

    CHRISTIAN (mercredi, 22 mars 2023 00:02)

    Je beaucoup apris à propos de la balise html merci beaucoup

  • #9

    Dåvë Člēvĩn's (mardi, 28 mars 2023 15:55)

    Trop cool

  • #10

    BIDJOGO Loïc (jeudi, 18 janvier 2024 18:44)

    Merci j'ai beaucoup découverte et je beaucoup appris

  • #11

    Kuate (jeudi, 18 janvier 2024 20:31)

    Avoir découvert le contenu m'a permis d'apprendre beaucoup de choses

  • #12

    Alfred kabore (vendredi, 23 février 2024 01:54)

    Merci beaucoup mes cours sont en anglais et je ne comprenais pas bien merci beaucoup ça m'a vraiment servi pour les balises

  • #13

    Barre Christiane (dimanche, 26 mai 2024 01:38)

    Merci de m'avoir apporté quelques notions sur les balises.
    Actuellement je me renseigne sur la manière la plus appropriée de créer un site web pour mon gendre qui travaille dans la rénovation (plaquiste, peintre, parquet, carrelage, isolation intérieure). cela va me prendre pas mal de temps rien que pour les recherches.
    Après viendra la création du site. Je sais que je vais galérer, mais je suis têtu.

FRANCE

 

Un Article pour le Web

Agence éditoriale web et SEO

 

54, rue Principale

57480 Haute-Kontz

France

 

+33 (0)7 62 14 0988

+33 (0) 3 82 59 03 24

contact@unarticlepourleweb.fr

 Grand-Duché de Luxembourg

 

Digitext sàrl

Agence éditoriale web et formation en rédaction web au Luxembourg et en ligne.

 

1, Heinrischmillen

 L-5670 Altwies

Grand-Duché de Luxembourg

 

+352 691 127 687

Audrey@digitext.lu