Face à du HTML, pas de panique !

Qu’est-ce que le HTML ?

L’HyperText Markup Language, généralement abrégé HTML, est le langage de balisage conçu pour représenter les pages Internet. C’est un langage permettant d’écrire de l’hypertexte, d’où son nom. Le HTML permet également de structurer sémantiquement et logiquement, et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie et des programmes informatiques.

Wikipédia

L’éditeur de texte que vous utilisez sur votre carnet Hypothèses permet de traduire un formatage HTML sous forme de boutons similaires à ceux d’un logiciel de traitement de texte.

Chaque bouton de l’éditeur de texte permet d’appliquer, en coulisses de votre contenu, une balise HTML qui se traduit par une mise en forme ou une mise en page particulière de votre contenu, qu’il s’agisse par exemple de souligner du texte, de le mettre en gras ou en italique, de lui donner un niveau de titre, etc.

Voici par exemple un billet publié sur un blog Hypothèses, qui contient des niveaux de titre, du texte en gras, en italique, un lien hypertexte et une image. En parallèle, voici le même texte sous sa forme HTML.

• 

• 

Pour éditer un billet sous sa forme HTML, il suffit d’ouvrir le menu trois points dans la barre horizontale en haut de l’éditeur de blocs, puis de choisir “Éditeur de code” à la place de l’éditeur dit “visuel”, que vous utilisez au quotidien.

Pourquoi est-il utile de connaître les bases du HTML sous WordPress ?

Il peut arriver que vous rencontriez des anomalies de mise en forme ou de mise en page que vous n’arrivez pas à résoudre, quelle que soit votre action sur les blocs, la barre d’édition d’un bloc ou les options de la colonne de réglages de l’éditeur de blocs.

Par exemple, si vous utilisez le système de double parenthèses pour l’insertion de notes de bas de page, il arrive que vous constatiez que l’ensemble de votre carnet, colonnes latérales de widgets comprises, se retrouve en italique, ou souligné.

Rien ne l’explique dans l’éditeur de blocs de votre billet. Et pourtant, en éditant le billet sous sa forme HTML, vous découvririez la réponse dans le code, sous la forme d’une erreur de balisage.

Un autre exemple très commun est le copié-collé depuis un logiciel de traitement de texte vers l’éditeur de texte de WordPress.

Les logiciels de traitement de texte, eux-aussi, permettent d’appliquer une mise en forme ou une mise en page à un contenu grâce aux boutons de la barre d’édition, qui se traduisent en coulisses par l’application de balises de code.

Cependant, la syntaxe du code des logiciels de traitement de texte est souvent dans un format propriétaire (par exemple le format RTF pour les documents .doc et .docx de Microsoft Word).

Lors d’un copié-collé dans l’éditeur de texte de votre carnet, WordPress interprète la syntaxe du code d’origine pour le transformer en code HTML.

L’opération est transparente et sans accroc pour les fonctions basiques qui existent dans l’éditeur de texte de votre carnet : gras, italique, niveaux de titre, liens hypertextes, images, alignement du texte et des images, etc.

Si la mise en forme ou la mise en page effectuée via le logiciel de traitement de texte est plus poussée que celle permise par les fonctions existant dans l’éditeur de texte de votre carnet, alors le code correspondant à cette mise en forme ou à cette mise en page ne peut être interprété, et est le plus souvent ignoré. Cependant, il arrive qu’il soit mal interprété, ou partiellement, ce qui mène à des anomalies de mise en forme ou de mise en page dont la raison ne peut être décelée qu’en regardant le code HTML du billet. Cela arrive moins avec l’éditeur de blocs qu’avec l’éditeur dit “classique”, car l’éditeur de blocs nettoie automatiquement la majorité du code qu’il n’est pas en mesure de comprendre.

Les balises HTML les plus simples

L’objectif de ce billet n’est pas de vous apprendre le langage HTML (Internet regorge d’articles pour cela) mais de vous aider à reconnaître les balises ayant un intérêt pour l’insertion de contenus dans vos billets.

Les éléments de code HTML, apposés sur une partie du contenu d’un billet, vont lui appliquer une mise en forme ou une mise en page particulière.

• un élément de code est composé de deux balises, l’une ouvrante, l’autre fermante, car il encadre le contenu auquel il s’applique. La balise ouvrante indique le début de l’application de l’élément de code sur le contenu, la balise fermante sa fin ;
• la balise ouvrante est composée du nom de l’élément de code, entouré de deux chevrons, ouvrant et fermant <...> ;
• la balise fermante est composée du nom de l’élément de code, précédé d’une barre oblique et entouré de deux chevrons, ouvrant et fermant </...> ;
• une balise ouvrante, à la suite du nom de l’élément de code, peut apporter des précisions sur la modification à apporter au contenu via des attributs.

Le HTML étant un langage international, les noms des éléments de code sont en anglais.

Les blocs de l’éditeur de blocs

L’éditeur de blocs délimite chaque bloc par des balises HTML, indiquant le type de bloc appliqué à un contenu. C’est une notation propre à WordPress et son système de blocs.

Par exemple :

• bloc paragraphe (“paragraph” en anglais): <!-- wp:paragraph -->... <!-- /wp:paragraph -->
• bloc titre (“heading” en anglais) : <!-- wp:heading -->... <!-- /wp:heading -->
• bloc image : <!-- wp:image-->... <!-- /wp:image -->
• bloc lire la suite (“read more” en anglais) : <!-- wp:more -->... <!-- /wp:more -->

Chaque bloc va ensuite contenir du code HTML standard.

Par exemple, un bloc paragraphe contient l’élément de code <p> indiquant que le contenu est un paragraphe :

<!-- wp:paragraph -->
<p>...</p>
<!-- /wp:paragraph -->

Les paragraphes <p>

p pour “paragraph“

C’est la balise qui entoure un paragraphe de texte. Tout texte est contenu dans un paragraphe. Fractionner le texte en plusieurs paragraphes se traduit visuellement par un interligne plus grand entre les paragraphes. Dans l’éditeur de blocs, faire un retour à la ligne marque un changement de paragraphe (c’est-à-dire qu’il ferme la balise paragraphe et en ouvre une autre, le cas échéant).

Les niveaux de titre <h1> <h2>

h pour “heading” (“titre” en français)

Ce sont les balises pour les titres de niveau 1, 2, etc.

Les niveaux de titre permettent la bonne structuration de votre texte, à la fois pour votre lectorat, pour les robots d’indexation des moteurs de recherche et pour les lecteurs d’écran (voir les bonnes pratiques d’accessibilité).

Par convention, le titre de niveau 1 est réservé au titre du billet. Ce sont donc les titres à partir du niveau 2 qui sont utilisés dans le contenu du billet.

Le gras <b> ou <strong>

b pour “bold” (“gras” en français)

Cette balise permet de mettre un texte en gras.

À la place de <b>, WordPress utilise la balise <strong> (“fort” en français) pour mettre du texte en gras. En-dehors de WordPress, la balise <strong> signifie qu’il s’agit d’insister graphiquement sur le texte, mais le résultat peut être autre qu’une mise en gras, en fonction du logiciel utilisé.

L’italique <i> ou <em>

i pour “italic“

Cette balise permet de mettre un texte en italique.

À la place de <i>, WordPress utilise la balise <em> (emphasis, “emphase” en français) pour mettre du texte en italique. En-dehors de WordPress, la balise <em> signifie qu’il s’agit d’insister graphiquement sur le texte, mais le résultat peut être autre qu’une mise en italique, en fonction du logiciel utilisé.

Le soulignement <u>

u pour “underlined” (“souligné” en français)

Cette balise permet de souligner du texte.

Les liens <a href=”…”>

Pourquoi apprendre à écrire des liens ? Parce qu’il existe toujours des endroits dans WordPress où ajouter un lien n’est possible qu’en HTML, car ces endroits ne disposent pas d’un éditeur de texte comme celui dont vous avez l’habitude (par exemple dans certains widgets, au niveau de la description d’une catégorie ou encore de la légende des images).

• l’URL, c’est à dire l’adresse Internet du lien, se place entre les guillemets ;
• le texte du lien (c’est à dire le texte qui apparaîtra cliquable au lectorat du billet) s’écrit entre la balise ouvrante <a href="..."> et la balise fermante </a>.

Avec ces informations, vous devriez pouvoir afficher votre billet sous sa forme HTML, via l’éditeur de code, sans risquer la syncope.

Les problèmes récurrents

Mise en forme (gras, italique, souligné) appliquée à l’ensemble du carnet

Si vous rencontrez ce problème, dû à une erreur de balisage entre de l’italique, du souligné ou du gras, et les doubles parenthèses de notes de bas de page, vous pouvez à présent le résoudre.

Ce problème se manifeste lorsqu’un morceau de texte d’une note de bas de page est souligné / en gras / en italique, et que la balise fermante de cette mise en forme ne se trouve pas dans la note de bas de page (avant la double parenthèse fermante), mais après. La mise en forme en question est alors considérée comme infinie à partir du point où vous avez placé la balise ouvrante.

• avec l’éditeur de code, éditez le billet le plus récent qui n’est pas concerné par le problème de mise en forme ;
• au niveau des notes de bas de page, repérez l’élément de code ouvert (après la double-parenthèse ouvrante) mais dont la balise fermante se trouve après la double-parenthèse fermante ;
• déplacez la balise fermante pour la placer avant la double-parenthèse fermante.

Cette procédure est illustrée dans l’animation ci-dessus.

---

Image mise en avant et image de fin : Photo par NESA by Makers sous licence Unsplash

---

---