Code HTML - Les principales balises pour les éditeurs de texte
CODE HTML – LES BALISES POUR FORMATER DU TEXTE
Vous souhaitez utiliser un éditeur de texte (par exemple celui de WordPress) ? Mais vous ne connaissez pas vraiment le code HTML à utiliser pour formater du texte ? Dans cet article, je vous présente le code HTML avec les balises indispensables pour mettre en forme du texte.
A la fin de cet article, vous saurez comment procéder pour utiliser les balises et le résultat que vous pourrez obtenir avec à travers des exemples concrets. Le gros avantage d’utiliser le code HTML, c’est que vous aurez une parfaite maîtrise de votre contenu. Voici toutes les informations que vous trouverez dans l’article :
1. Utiliser le code HTML dans un éditeur de texte
2. Les balises de code HTML pour les éditeurs de texte
2.1. Les différents titres et sous-titres
2.2. Créer des paragraphes
2.3. Saut de ligne
2.4. Listes à puces ou numérotées
2.5. Créer des tableaux
2.6. Insérer une image
2.7. Insérer un lien
2.8. Mettre le texte en gras
2.9. Souligner le texte
2.10. Mettre en italique
2.11. Aligner le texte
2.12. Changer la taille du texte
2.13. Changer la couleur du texte
2.14. Changer la police du texte
3. Tableau des balises de code HTML pour éditer du texte
1. UTILISER LE CODE HTML DANS UN ÉDITEUR DE TEXTE
Pour utiliser le code HTML, vous aurez deux solutions. La première est d’utiliser un éditeur WYSIWYG comme vous pouvez en trouver avec WordPress lorsque vous allez créer un article ou une page. C’est un éditeur dans lequel vous rédigez votre texte et vous pouvez basculer pour qu’il le transforme en code HTML.
Code HTML pour vos articles dans les éditeurs de texte
Il va insérer automatiquement les balises. Vous pourrez par exemple partir de ce texte modifié pour ajouter d’autre élément de code HTML. Voici deux éditeurs WYSIWYG connus :
- BlueGriffon
- WordPress (utiliser l’éditeur dans la création d’articles)
Une autre solution est d’utiliser un logiciel pour éditer du code. Un des plus connus (et il est gratuit) est Notepad ++. Il permet de créer du code HTML et d’enregistrer le résultat. Dans notre cas, ce n’est pas très pertinent.
Une autre solution, c’est d’utiliser un éditeur HTML qui affiche en direct le résultat de votre code HTML dans une seconde fenêtre, vous pouvez ainsi réaliser très facilement le formatage de votre texte. Un peu à la manière de JSFiddle.
2. LES BALISES DE CODE HTML POUR LES ÉDITEURS DE TEXTE
Maintenant, voyons quelles sont les balises que l’on peut utiliser pour formater du texte avec du code HTML. Il n’y a pas d’ordre d’importance. Vous remarquerez que toutes les balises de code HTML ont une similarité. Elles commencent par « < » et se termine par « > ».
Pour les utiliser, la majorité demande à être ouverte puis fermée. Par exemple, pour utiliser la balise <p>, vous devrez ouvrir la balise <p> puis la fermer avec la balise </p>. Votre texte sera placé entre les deux. Vous remarquerez que la seconde balise contient une barre oblique, cela signifie que c’est celle de fermeture. Par exemple :
<p>Voici un texte d’exemple</p>
Le texte apparaîtra de la manière suivante lorsque la page HTML s’affichera :
Voici un texte d’exemple
Ci-dessous, je vous présente les principales balises de code HTML. Dans la partie suivante, je vous indiquerais toutes les balises que l’on peut utiliser dans un tableau récapitulatif.
2.1. LES DIFFÉRENTS TITRES ET SOUS-TITRES
Il existe deux types de balises pour le titre. Il y a le titre principal de l’article qui utilise <title>Votre titre</title>, mais ce dernier se trouve dans l’en-tête de la page, la partie <head>. Autrement dit, vous n’avez pas besoin de connaître cette balise si vous utilisez un éditeur de texte dans un CMS.
Non, pour le titre vous devez connaître les balises <h> qui signifient « Heading ». Ces dernières ont six grandeurs. Vous pouvez aller de H1 à H6. Ils servent à créer des sous-titres pour vos paragraphes. Par exemple :
<h1>Titre principal de l’article</h1> <h2>Sous titre de l’article</h2> <h3>Sous titre de l’article</h3> <h4>Sous titre de l’article</h4> <h5>Sous titre de l’article</h5> <h6>Sous titre de l’article</h6>
Pour votre référencement SEO, vous devez utiliser seulement une fois la balise <h> de niveau 1 (en début d’article), ensuite chaque balise doit suivre la précédente, vous ne pouvez pas passer d’un niveau 2 à 4. Il faut descendre dans l’ordre. Le résultat des titres sera le suivant :
2.2. CRÉER DES PARAGRAPHES
Il s’agit d’une balise très simple à utiliser, peut-être une des plus évidentes. ll s’agit de <p>, elle permet de découper vos articles en paragraphes. Pour l’utiliser, il suffit de faire :
<p>Votre premier paragraphe qui suit un sous-titre</p>
Le résultat sera le suivant :
Votre premier paragraphe qui suit un sous-titre
2.3. SAUT DE LIGNE
Une autre balise très simple à utiliser dans le code HTML, vous l’utiliserez généralement dans votre paragraphe, elle permet de passer à la ligne. Il s’agit de <br />. Pour sauter une ligne, il suffit d’en insérer deux dans le code HTML.
<p> Votre premier paragraphe qui suit un sous-titre<br /> <br /> Passons à la suite après ce saut de ligne.</p>
Le résultat sera le suivant :
Votre premier paragraphe qui suit un sous-titre
Passons à la suite après ce saut de ligne.
2.4. LISTES À PUCES OU NUMÉROTÉES
Un des éléments très intéressants que vous allez pouvoir utiliser dans le code HTML pour formater votre texte. On utilise généralement trois types de liste à puces. On trouve donc les listes numérotées, puces et définitions.
Pour les trois types, il faut utiliser des balises dans les balises. Pour faire simple, il y a des balises principales dans lesquelles on place des balises secondaires. Avec un exemple, c’est beaucoup plus simple. Voici un exemple de liste numéroté :
<ol> <li>Exemple 1</li> <li>Exemple 2</li> <li>Exemple 3</li> </ol>
Et le résultat en HTML
La balise principale est <ol>, nos éléments sont ensuite placés dans des balises <li>. Pour créer une liste à puce avec du code HTML dans un éditeur de texte, il suffit de remplacer <ol> par <ul> :
<ul> <li>Exemple 1</li> <li>Exemple 2</li> <li>Exemple 3</li> </ul>
Et le résultat en HTML
- Exemple 1
- Exemple 2
- Exemple 3
Par contre, pour utiliser la structure des listes de définitions, ce sera différent, elle se construit sur plusieurs niveaux.
<dl> <dt>Titre de la definition</dt> <dd>La définition en elle même</dd> <dt>2 eme titre de la definition</dt> <dd>La définition 2eme en elle même</dd> </dl>
Et le résultat avec le code HTML
- Titre de la definition
- La définition en elle même
- 2 eme titre de la definition
- La définition 2eme en elle même
Liste HTML – Guide complet
Après cette introduction, vous pouvez également découvrir un article complet sur les listes HTML. Vous retrouverez la mise en place de listes à puces, numérotées ou définitions. Vous verrez aussi comment modifier visuellement ces dernières. Par exemple, en utilisant vos propres images à la place des puces.
2.5. CRÉER DES TABLEAUX
Une autre utilisation classique de code HTML dans un éditeur de texte concerne les tableaux. Pour présenter des données, vous en utiliserez régulièrement… Pour créer un tableau, il va falloir utiliser une structure imbriquée. Cette dernière débute par la <table>, ensuite pour chaque ligne de votre tableau vous devrez utiliser la balise <tr> puis <td> pour les colonnes.
Pour créer un entête à votre tableau, il faudra utiliser la balise <th> à la place de <td> (donc pour la première ligne). Voici un exemple d’utilisation d’un tableau :
<table> <tr> <th>Titre 1</th> <th>Titre 2</th> </tr> <tr> <td>Colonne 1</td> <td>Colonne 2</td> </tr> <tr> <td>Ligne 2</td> <td>Ligne 2</td> </tr> <tr> <td>Ligne 3</td> <td>Ligne 3</td> </tr> <tr> <td>Ligne 4</td> <td>Ligne 4</td> </tr> </table>
Le résultat du tableau
| Titre 1 | Titre 2 |
|---|---|
| Colonne 1 | Colonne 2 |
| Ligne 2 | Ligne 2 |
| Ligne 3 | Ligne 3 |
| Ligne 4 | Ligne 4 |
Tableau HTML – Guide complet
Après cette introduction, vous pouvez également découvrir un guide complet sur les tableaux HTML. Vous retrouverez la mise en place d’un tableau avec le code nécessaires. Mais vous découvrir comment mettre en forme ces derniers, en-tête, pied, titre, bordures, couleur de fond… Ainsi, vous pourrez créer des tableaux adaptés à vos besoins.
2.6. INSÉRER UNE IMAGE
Vous souhaiterez certainement ajouter des images dans vos articles et pages. En effet, il s’agit d’un élément permettant d’améliorer le référencement naturel d’une page. On utilise pour cela la balise <img />.
Sa particularité, c’est qu’elle n’a pas de balise de fermeture comme vous pourrez le voir dans l’exemple. Elle contient trois paramètres, « src » pour donner l’emplacement de l’image, « title » qui donne un titre à cette dernière et « alt » qui affichera un texte si le lien de l’image est erroné. Exemple de code HTML pour insérer une image :
<img src="https://www.numelion.com/wp-content/uploads/2018/07/balises-code-html.jpg" title="Code HTML" alt="Code HTML" />
Et le résultat sera :
2.7. INSÉRER UN LIEN
Une des balises essentielles dans les articles. En effet, pour optimiser votre maillage interne (et donc votre référencement), vous devrez insérer des liens qui pointent vers d’autres articles de votre site internet. Vous pourrez aussi les utiliser pour créer des liens vers d’autres sites lorsque vous les citerez.
On utilise les liens avec le code HTML <a>. Cette dernière utilise « href » pour indiquer le lien et « title » qui permet de donner un titre à votre lien, c’est facultatif pour ce deuxième paramètre. Une information importante, vous pouvez ajouter la notion follow ou nofollow à vos liens. Follow signifie que les moteurs de recherche vont suivre le lien et nofollow qu’ils ne doivent pas suivre le lien. Par exemple, pour un lien d’affiliation, il faudra toujours que ce dernier soit en nofollow.
Pour utiliser la balise, rien de plus simple comme sur l’exemple ci-dessous. A noter par défaut un lien est follow donc inutile de préciser dans ce cas. Il faudra faire la précision si vous souhaitez le passer en « nofollow » comme dans l’exemple :
<a href="https://www.numelion.com" title="Mon site internet" rel="nofollow">Découvrir Numelion</a>
Le code HTML va afficher ce lien dans la page :
2.8. METTRE LE TEXTE EN GRAS
Il est possible de mettre en gras le texte pour lui donner plus d’importance lors de la lecture par les visiteurs. C’est également un indicateur pour les moteurs de recherche qui pourront l’utiliser dans le cadre du référencement naturel. C’est d’ailleurs un élément pris en compte par les outils des audits SEO.
Pour cela, on utilise la balise <strong> ou <b>, voici un exemple de code HTML avec les balises :
<strong>Texte à mettre en évidence</strong> <b>Le deuxième texte</b>
Et le résultat :
Texte à mettre en évidence
Le deuxième texte
2.9. SOULIGNER LE TEXTE
Nous venons de mettre en valeur le texte en le mettant en gras, mais on peut aussi le souligner, pour cela on utilise la balise <u> (pour underline). Comme d’habitude on entoure le texte :
<u>Texte à souligné</u>
Et le résultat sera :
Texte à souligné
2.10. METTRE EN ITALIQUE
Vous pouvez également mettre un texte en valeur avec la balise italique. Il s’agit de la balise <i>, mais vous pouvez aussi utiliser la balise <em>, le résultat sera le même.
Le code sera le donc :
<i>Texte en italique avec la 1er balise (I)</i>
<em> Texte en italique avec la seconde balise (em)</em>Pour le résultat du code HTML on obtiendra :
Texte en italique avec la 1er balise (I)
Texte en italique avec la seconde balise (em)
2.11. ALIGNER LE TEXTE
Une balise très utile pour positionner son texte sur une page HTML ou un article. Vous aurez la possibilité de le placer à gauche, droite, centre ou justifié. Pour cela, il y aura quatre paramètres de possibles :
- left
- right
- center
- justified
Il s’agit d’un paramètre qu’il faudra utiliser dans une autre balise, par exemple celle pour les paragraphes (<p>) ou les titres (h).
<p align="left">Gauche</p> <p align="center">Centre</p> <p align="right">Droit</p>
Gauche
Centre
Droit
2.12. CHANGER LA TAILLE DU TEXTE
Il est également possible de modifier la taille du texte sans passer par du code CSS. Pour cela, on va utiliser la balise <font> avec le paramètre « size » et la modification de taille souhaitée. Les valeurs possibles vont de 1 à 7.
En fonction de la taille par défaut de votre texte, vous pourrez le grossir ou le réduire. Par exemple, si la taille par défaut est 3, indiquer va le réduire et 4 l’augmenter.
Le code HTML ressemblera donc à celui-ci :
<font size="1">Texte à 1</font> <font size="3">Texte à 3</font> <font size="7">Texte à 7</font>
Pour le résultat de la balise HTML:
Texte à 1
Texte à 3
Texte à 7
2.13. CHANGER LA COULEUR DU TEXTE
Comme pour la taille du texte, on peut modifier la couleur du texte sans passer par le code CSS et en utilisant la balise <font>. Pour cela, on utilisera le paramètre « color ». Ce dernier permet d’utiliser une combinaison HTML à six chiffres désignant une couleur. Vous pouvez utiliser un site comme « HTML Color Codes » pour trouver le code de la couleur souhaité parmi 16 millions de possibilités.
Pour faire plus simple, vous pouvez utiliser le nom parmi 16 couleurs déjà définies, voici la liste de ces dernières :
- Black
- Maroon
- Green
- Olive
- Navy
- Purple
- Teal
- Gray
- Silver
- Red
- Lime
- Yellow
- Blue
- Fuchsia
- Aqua
- White
Pour utiliser le code HTML, on aura donc :
<font color="#0404B4">Texte en bleu avec un code couleur</font> <font color="red">Texte en rouge avec le nom</font>
Et le résultat :
Texte en bleu avec un code couleur
Texte en rouge avec le nom
2.14. CHANGER LA POLICE DU TEXTE
Une autre possibilité de la balise <font>, c’est de changer la police de texte qui sera utilisée. Pour cela on utilisera le paramètre « face ». L’idéal est d’indiquer plusieurs polices, si le navigateur ne peut afficher la première, il tentera la seconde.
Exemple de code HTML pour la police :
<font face="arial,helvetica">Mon texte en Arial</font>
Et le résultat :
Mon texte en Arial
3. TABLEAU DES BALISES DE CODE HTML POUR ÉDITER DU TEXTE
Ci-dessus, nous venons de voir les principales balises de code HTML. Pour simplifier ces dernières et pour que vous ayez une vue d’ensemble, je vous propose un petit tableau qui les résume. Ce tableau à bien entendu été réalisé avec le code HTML et donc les balises qui vont avec ;).
| Balise HTML | Informations | Définition |
|---|---|---|
| <h1> | Titre de niveau 1 | |
| <h2> | Titre de niveau 2 | |
| <h3> | Titre de niveau 3 | |
| <h4> | Titre de niveau 4 | |
| <h5> | Titre de niveau 5 | |
| <h6> | Titre de niveau 6 | |
| <p> | Paragraphe | |
| <br/> | Saut à la ligne | |
| <ol> | Liste numérotée | |
| <ul> | Liste à puces | |
| <li> | Elément liste à puces ou numérotée | |
| <dl> | Liste de définitions | |
| <dt> | Terme d’une liste | |
| <dd> | Définition d’une liste | |
| <table> | Tableau | |
| <tr> | Ligne d’un tableau | |
| <th> | Cellule en-tête | |
| <td> | Cellule tableau | |
| <img /> | Insérer une image | alt, title |
| <a> | Lien | href, title, rel |
| <strong> | Mise en valeur | |
| <b> | Autre mise en valeur | |
| <u> | Souligné | |
| <i> | Italique | |
| <em> | Autre italique | |
| <align> | Aligner le texte | left, center, right, justified |
| <size> | Taille du texte | 1 à 7 |
| <color> | Couleur de texte | |
| <face> | Police de texte |
Commentaires
Enregistrer un commentaire
🖐 Hello,
N'hésitez pas à commenter ou vous exprimer si vous avez des trucs à dire . . .👉