Comprendre les Bases du Code HTML sur WordPress

Maîtriser les bases du code HTML sur WordPress est essentiel pour être pleinement à l’aise dans la gestion de son site WordPress.

Comme nous le savons tous et toutes, WordPress présente l’immense avantage de faire les choses à notre place, lorsque l’on parle de code. Son interface simplifiée permet à n’importe qui peut s’improviser développeur web. Avec WordPress et ses multiples extensions, il est possible de créer un site de A à Z, sans avoir à écrire une seule ligne de code !

Mais n’oublions pas que derrière cette interface simplifiée se cache bel et bien du code HTML, ou CSS et qu’il est toujours bon d’avoir des notions de base, par exemple pour :

• Ajouter des éléments de code avancés
• Corriger des bugs
• Être plus efficace
• Savoir de quoi l’on parle lorsque l’on échange avec un ou une développeur pour son projet
• Comprendre ce que l’on est en train de construire, etc.

Il est de toute façon probable que vous vous retrouviez un jour ou l’autre face à du code. Le but est donc d’en avoir le moins peur possible et, même mieux : d’être capable d’apprécier son caractère magique ! 🙂

L’objectif de cet article n’est pas de faire de vous des experts en HTML, mais plutôt de vous fournir quelques bonnes bases, afin de comprendre ce qui se passe dans l’arrière-cuisine.

C’est parti !

Introduction : Comprendre les deux grandes catégories de langages informatiques

Les langages de programmation représentent la syntaxe qui est utilisée pour qu’un navigateur (Google Chrome, Safari…) comprenne clairement ce qu’il y a sur un site internet afin de le rendre lisible aux internautes.

Il existe deux grandes catégories de langages sur le web.

a) Les langages « Front-End »

Il s’agit des langages qui permettent l’affichage d’une information sur une page. La catégorie Front-End est composée de 3 langages universels : HTML, CSS et JavaScript.

Pour bien comprendre et différencier ces 3 types de langage, nous allons utiliser un exemple simple : une voiture. Une bonne vieille Citroën C3.

HTML = la voiture avec le châssis, les roues et le capot (la structure de base).

CSS = les couleurs, la peinture, le design intérieur, les phares (pour enrichir la structure de base).

JavaScript = toutes les interactions avec la voiture, par exemple lorsque j’appuie sur un bouton et que le GPS s’affiche. 

Tout comme cette voiture, un site a besoin de ces 3 langages pour être fonctionnel.

b) Les langages « Back-End »

De l’autre côté, il existe une autre catégorie de langages dits « Back-End ». Nous n’allons pas rentrer dans le détail, car ce n’est pas l’objet de cet article mais, pour votre culture web, il est tout de même intéressant de savoir que ces langages existent, et que les 4 plus courants sont Ruby, Python, JavaScript et PHP.

Le langage PHP est probablement le plus répandu sur le web. WordPress a justement été construit en 2003 grâce au langage PHP.

Les langages Back-End sont sous le capot de la voiture. Ils font tourner un site internet.

Par exemple, admettons que vous souhaitiez mettre en place un système d’identification sur votre site, avec un espace personnel pour chaque utilisateur disposant d’un login et d’un mot de passe. Pour réaliser cet ajout, vous allez avoir besoin d’utiliser du langage Back-End. C’est ce langage qui va recevoir l’identifiant et le mot de passe saisis par l’utilisateur dans le formulaire ; prendre ces informations et les comparer avec celles stockées dans votre base de données. Si les données correspondent, le Back-End va alors dire au Front-End : « C’est bon, tu peux afficher la page de l’espace personnel de cet utilisateur », ou au contraire : « Je ne connais pas cette information, tu peux afficher une page erreur d’identification ».

Dans tous les cas, les langages Front-End et Back-End communiquent ensemble et se complètent : le Back-End trouve l’information et la traduit au Front-End, qui se charge de l’afficher.

Il existe de nombreux autres langages de programmation (Front-End et Back-End), plus ou moins connus, pour des usages plus spécifiques, comme Scala ou C++, par exemple. Ces langages ont été créés sur la base d’anciens, langages, pour simplifier leur utilisation ou pour créer des éléments préconstruits qu’il suffit de reprendre. Ruby, par exemple, est un langage construit sur la base d’un autre, le langage C.

Mais revenons à nos moutons : le langage HTML.

1. Le code HTML, c’est quoi ?

Le HTML est le langage de programmation le plus courant sur le web. Il est extrêmement simple à comprendre, dans la mesure où il s’agit d’un langage descriptif. Il n’y a pas de logique de condition (s’il se passe ceci, alors il faut que je fasse cela). Contrairement par exemple aux langages Back-End, qui se caractérisent par une certaine complexité, le HTML, lui, dit de manière toute simple « Je veux tel type d’information, à tel endroit sur la page ».

Ensuite, le langage CSS va dire « Et moi en plus, je veux que ce soit grand, en rouge et avec des étoiles ». C’est l’alliance de ces 2 langages qui va permettre de créer un design !

Pour résumer, le HTML représente la structure de base du contenu affiché sur une page web (titres, sous-titres, liens, images, gras, listes…).

Il est possible de retrouver ces informations interprétées sous forme de balises par le langage HTML (exemple : <img> pour les images ou <a href> pour les liens) directement depuis son ordinateur, en affichant le code source sur son navigateur.

1. Pour le faire apparaître, rien de plus simple qu’un clic droit !

2. Cliquez ensuite sur « Afficher le code source de la page» sur la liste affichée par le navigateur (ici, Google Chrome).

Votre navigateur va parcourir la page sur laquelle vous vous trouvez actuellement, et télécharger un code source qui ressemble à ça :

C’est ce code source qui contient le code HTML. Imaginez un monde dans lequel tous les articles de blog ressembleraient à ça. Ce ne serait pas très agréable à lire…

Le travail du navigateur est d’interpréter ces informations et de les rendre lisibles pour un être humain. Illustrons la différence que l’on a entre ce que l’on voit sur notre ordinateur et le langage HTML :

Titre de la page

Lien vers un autre article

Il est possible d’éditer ce code HTML directement depuis le back-office (l’espace administrateur) de WordPress, lorsque vous êtes dans le mode édition d’un article ou d’une page.

Mais, avant de passer à l’expérimentation, encore faut-il connaître les principales balises HTML pour pouvoir les interpréter.

2. Comment accéder au code HTML sur WordPress ?

1. Rendez-vous sur l’onglet « Articles » ou « Pages » de votre back-office WordPress, et ouvrez un contenu existant sur votre site ou blog.

2. Cliquez ensuite sur l’onglet « Texte », et le tour est joué : vous pouvez éditer votre code HTML depuis WordPress !

3. Les balises HTML indispensables sur WordPress

Il existe de nombreuses balises HTML sur le web, mais nous allons nous concentrer sur les plus couramment utilisées sur WordPress.

La grande majorité de ces balises encapsulent un contenu entre une balise de début et une balise de fin. Le nom des balises explique par exemple à votre navigateur que tel contenu est un titre et tel autre un bouton.

Elles s’écrivent de cette manière <xxx> et se termine dans la plupart des cas par une balise </xxx> qui ferme la ligne de code. Par exemple, <em>LiveMentor</em> est la version HTML de « LiveMentor » (en italique).

1. Les titres

<h1> (titre principal)

<h2> (sous-titre de niveau 2)

<h3> (sous-titre de niveau 3)

etc…

PS : Attention ici pour la balise <h1>. Vous n’avez pas besoin d’ajouter cette balise et vous ne devriez pas la voir non plus. Le titre que vous attribuez à votre article est automatiquement considéré comme étant un titre1 (H1) sur WordPress. Je rappelle qu’il est très mal vu par Google d’avoir plusieurs H1 au sein d’une même page. Cela pénalisera votre référencement naturel.

2. Les liens

<a href>

Exemple :

« LiveMentor » donne en HTML :

<a href="https://www.livementor.com/">LiveMentor</a>

Les liens peuvent être internes (vers d’autres pages de votre site) ou externes (vers des pages d’un autre site).

Il existe deux profils d’ancres de liens : les ancres naturelles sur des noms de marque comme « LiveMentor » et les ancres optimisées sur des mots-clés précis comme « réserver son nom de domaine« .

En référencement naturel, Google accorde beaucoup d’importance aux liens externes pointant vers votre site internet. Les fameux « backlinks » qui feront l’objet d’un futur article sur le blog de LiveMentor ! 🙂

En revanche, si Google remarque une trop grosse part d’ancres optimisées, vous vous exposez à une pénalité Google.

En règle générale, vous pouvez faire 20% d’ancres optimisées pour 80% d’ancres naturelles.

3. Les images 

<img>

Exemple :

Ce qui donne, en HTML :

<img class="size-full wp-image-10945 aligncenter" src="https://www.livementor.com/wpapp/uploads/2020/07/langages-informatiques.png" alt="les différents types de langages sur le web" width="838" height="286" />

Pour les balises images, l’attribut src= contient le chemin de l’image à afficher (fichier image), il est obligatoire. L’attribut alt= n’est quant à lui pas obligatoire. En revanche, d’un point de vu SEO, il est très recommandé de l’intégrer. L »attribut alt= contient une description textuelle de l’image (Google ne pouvant lire les images). il est aussi préconisé pour des raisons d’accessibilités (lecteurs malvoyants ou chargement du fichier image impossible).

4. Le gras

<strong>

Exemple :

« LiveMentor » donne en HTML :

<strong>LiveMentor</strong>

5. L’italique 

<em>

Exemple :

« WordPress » donne en HTML :

<em>WordPress</em>

6. Les listes

<0l> (liste numérotée)

<ul> (liste à puces)

<li> (pour distinguer chaque ligne au sein d’une même liste)

Exemple : 

Voici 5 outils SEO très utiles :

1. Moz
2. Ubersuggest
3. Ahrefs
4. Answer The Public
5. Keywords Everywhere

Donne en HTML :

Voici 5 outils SEO très utiles :

<ol>
<li>Moz</li>
<li>Ubersuggest</li>
<li>Ahrefs</li>
<li>Answer The Public</li>
<li>Keywords Everywhere</li>
</ol>

Etc…

Il est également possible de combiner plusieurs balises HTML en mêmes temps. Par exemple, si je veux mettre un lien (<a href>) en gras (<strong>), en italique (<em>) et qui s’ouvre dans un nouvel onglet lorsque l’on clique dessus (target= »_blank ») comme : Monétiser son site WordPress, le code HTML renseigné sera :

<strong><em><a href="https://www.livementor.com/blog/monetiser-site-wordpress" target="_blank">Monétiser son site WordPress</a></em></strong>

Un autre exemple pourrait être l’intégration d’un lien dans une image afin d’obtenir une image cliquable renvoyant vers une autre page de votre site, comme ci-dessous.

Si un internaute clique sur cette image, il sera alors renvoyé vers notre formation Marketing Digital.

Pour ce cas là, le code HTML sera alors :

<a href="https://www.livementor.com/formation/marketing-digital/" target="_blank" rel="><img class="aligncenter wp-image-10907" src="https://www.livementor.com/wpapp/uploads/2020/07/Bannière-Blog-Marketing-Digital.png" alt="formation marketing digital" width="598" height="163" /></a>

Notons également que chaque élément HTML peut contenir un ou plusieurs attributs. Les attributs HTML sont des valeurs supplémentaires permettant de personnaliser les éléments HTML ou de modifier leur comportement.

Par exemple et comme nous venons de le voir, si j’intègre un attribut target="_blank" dans une balise de lien, alors j’indique au lien de s’ouvrir dans un autre onglet du navigateur de l’internaute. Je modifie donc le comportement de ma balise HTML <a href> qui de base, s’ouvre sur la même page en remplaçant l’existante.

Tous ces éléments de code HTML sont caractérisés par votre barre d’outil WordPress qui reprend ces différents éléments. Ces boutons qui ressemblent fortement à ceux d’un logiciel de traitement de texte comme Microsoft Word, permettent en fait à n’importe quel utilisateur de faire du formatage HTML de façon simplifiée.

Donc, en appuyant par exemple sur le bouton italique « I« , vous ajoutez indirectement une balise HTML sur WordPress qui donne l’information d’afficher une partie de votre texte en italique.

Il existe également d’autres types de balise plus poussées permettant de faire apparaître des tableaux, des cases à cocher, des menu déroulant, des barres de progressions…

Il peut par exemple être intéressant d’intégrer des sommaires cliquables au sein de vos articles. Ils permettent une meilleure expérience de navigation, et sont très appréciés en référencement naturel pour obtenir des sitelinks.

Pour créer ces sommaires cliquables, il faut vous rendre dans l’onglet « Texte », afin de pouvoir accéder au HTML de votre article WordPress, et y insérer des balises spécifiques.

Voici à quoi cela ressemble : 

En amont de chaque début de chapitre (avant le <h2>), il faut penser à bien ajouter la balise de liaison pour le clic afin de rendre le sommaire fonctionnel :

<a name="ChapX"></a>

C’est notamment pour ce genre d’éléments que la partie réservée à l’édition du HTML sur WordPress est très utile !

4. L’importance des bases en HTML

Voici quelques bonnes raisons de maîtriser les bases du HTML :

• Effectuer des actions de code avancées, afin de créer une mise en forme personnalisée et plus poussée en créant des combinaisons spécifiques.
• Repérer et régler des problèmes de formatage. Des erreurs d’édition se produisent souvent et nécessitent l’accès à l’interface HTML pour les régler (erreur de lien, problème de mise en forme suite à un copié-collé depuis un Google Doc…).
• Être plus productif : en optimisant sa mise en page plus rapidement (suppression du superflux, meilleure vue globale…).
• Rendre la lecture du contenu plus agréable (sommaires cliquables, tableaux…).
• Intégrer des attributs rel= "nofollow" ou rel= "dofollow" dans les balises de lien pour des enjeux de référencement naturel
• Analyser la structure des contenus de ses concurrents, directement depuis le code source sur votre navigateur (nombre de h2, présence des mots-clés dans les h2, types de balises HTML utilisées), etc.

Le champ des possibles est immense en HTML ! On peut trouver du code pour tout sur le web, il suffit de chercher un peu 🙂

WordPress a de plus l’avantage de tout simplifier, et de donner immédiatement un aperçu du rendu final. Nul besoin d’être développeur informatique pour tirer le meilleur de WordPress. En revanche, ces connaissances de base vous permettront non seulement de mettre en place des actions concrètes, mais aussi de mieux comprendre l’écosystème dans lequel vous travaillez !

Conclusion : et le CSS, alors ?

Prochaine étape : comprendre les bases du CSS sur WordPress !

Ce fameux langage CSS qui va permettre d’ajouter du design, du style à notre structure de base en HTML.

Exemple : 

Salut à tous,

Vous aimez la magie ? Vous verrez, le CSS a plus d’un tour dans son sac.

Pour mélanger du CSS avec du HTML, vous avez la possibilité d’utiliser ce que l’on appelle dans le jargon informatique, des « attributs style » dans vos balises HTML.

C’est parti pour une petite mise en pratique !

1. Rendez-vous dans la partie édition de votre WordPress, puis cliquez sur l’onglet « Texte » qui, rappelons-le, permet d’accéder au code HTML de votre page ou article.
2. Ensuite, testez cette balise HTML de titre contenant un attribut style.

Vous verrez par vous même ! 🙂

<h2 style="color:green">Titre de mon texte</h2>

…. magie !

L’attribut <style> contient des éléments de mise en forme pour la structure de votre contenu en HTML. Il spécifie un style particulier pour l’élément HTML.

Les instructions de design renseignées dans ces attributs style sont écrites par défaut en CSS. D’où l’intérêt de maîtriser également les bases du langage CSS 😉

À votre tour, maintenant ! Faites-nous savoir en commentaire de cet article quels sont les éléments que vous faites, ou que vous souhaiteriez faire apparaître sur vos pages grâce au HTML. Et si vous voulez aller plus loin, n’hésitez pas à jeter un œil à notre formation complète sur WordPress.