Blog LiveMentor
code HTML sur WordPress

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, 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 du code HTML ou CSS se cache derrière cette interface simplifiée et qu’il est toujours bon d’avoir des notions de base pour par exemple :

  • Ajouter des éléments de code avancés
  • Corriger des bugs
  • Être plus efficace
  • Ne pas être largué lorsque l’on discute avec un Dev pour son projet
  • Comprendre ce que l’on est en train de construire
  • Etc…

Il est assez probable que vous vous retrouviez face à du code un jour. Le but est d’en avoir le moins peur possible. Encore mieux même, de commencer à en 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 une bonne culture autour de cette problématique pour comprendre ce qu’il se passe dans l’arrière-cuisine.

Et je vous assure que cela vous aidera à débloquer pas mal de situations !

Le monde du code se divise en deux grandes catégories de langages de programmation informatique. Le code HTML est un langage appartenant à la catégorie « Front-End ». Je vous explique dans un instant ce que cela signifie.

Avant de se lancer, voici le plan de cet article :

I- Comprendre les deux grandes catégories de langages informatiques
II- Le code HTML, c’est quoi ?
III- Comment accéder au code HTML sur WordPress ?
IV- Les balises HTML indispensables sur WordPress
V- L’importance des bases en HTML

C’est parti !

I- 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 pouvoir le rendre lisible pour n’importe quel humain.

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

les différents types 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é de 3 langages universelles : HTML, CSS et JavaScript.

Pour bien comprendre et différencier ces 3 types de langage de la catégorie Front-End, nous allons utiliser un exemple trivial : une voiture.

comprendre le langage informatique avec l'exemple de la 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 de la voiture, les phares Xénon (pour enrichir la structure de base au niveau du design).

JavaScript = j’appuie sur un bouton et le GPS apparaît (pour créer des interactions).

Cette voiture, c’est comme un site. Elle a besoin de ces 3 langages universelles pour être fonctionnelle et attractive.

De l’autre côté, nous allons avoir une autre catégorie de langage « Back-End ». Nous n’allons pas rentrer dans le détail de cette catégorie car ce n’est pas l’objet de cet article, mais il est quand même intéressant de savoir que ces autres langages existent pour votre culture web.

b) Les langages « Back-End »

Aujourd’hui, il existe 4 langages Back-End assez courant : Ruby, Python, Javascript et PHP.

Le langage PHP est probablement le plus répandu de ces 4 langages sur le web. D’ailleurs, à titre d’information, WordPress a été construit en 2004/2005 grâce au langage PHP.

Les langages Back-End sont sous le capot de la voiture. Ils font l’intelligence d’un site internet.

Par exemple, admettons que vous souhaiteriez 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 ce chantier, vous allez avoir besoin d’utiliser du langage Back-End.

En gros, ce langage va recevoir l’identifiant et le mot de passe saisit par l’utilisateur dans le formulaire. Il va ensuite prendre cette information et la comparer avec celles qui sont stockées dans votre base de données.

Si la donnée correspond, alors le Back-End va 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 ».

Avez-vous remarqué le petit détail intéressant ?

Le JavaScript (JS) se situe dans les deux camps. Il est très à la mode car il permet à la fois de faire du Front-End et du Back-End avec l’avantage d’être extrêmement performant.

Les langages Front-End et Back-End communiquent ensemble. Il y a un mécanisme complémentaire entre les deux. Le Back-End trouve l’info et la traduit au Front-End qui se charge de l’afficher.

Il existe également plein d’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.

De nombreux langages ont été créés sur la base de langages, pour simplifier leur utilisation ou pour créer des éléments pré-construits qu’il nous suffit de reprendre. Ruby par exemple est un langage construit sur la base d’un autre, le langage C.

Mais passons ! Ce qui nous intéresse aujourd’hui c’est la base : le langage HTML.

II- 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 le sens où il s’agit d’un langage descriptif.

Il n’y a pas de logique de condition (si il se passe ça, alors il faut que je fasse ci) derrière le langage HTML. Contrairement par exemple aux langages Back-End, où la puissance de ces langages est caractérisée par une certaine intelligence, le HTML lui, nous dit de manière bête et méchante « Je veux tel type d’information, à tel endroit sur la page », point barre.

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 des ces deux langages qui vont permettre de créer un design !

En gros, 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 langages HTML (exemple :<img> pour les images ou <a href> pour les liens) directement depuis son ordinateur, en affichant le code source sur son navigateur.

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

obtenir le code source sur son navigateur

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 va télécharger un code source qui ressemble à ça.

code source sur google chrome

C’est ce code source qui contient le code HTML. Le travail du navigateur est d’interpréter et de transformer ces informations en quelque chose de lisible pour un humain.

Imaginez-vous un monde dans lequel tous les articles de blog que vous lisez ressemblent à ça. C’est pas très agréable visuellement parlant. On peut rapidement chopper une belle migraine…

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

code html

Lien vers un autre article

code HTML "a-href"

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.

Avant de passer à l’expérimentation, il serait intéressant de connaître les principales balises HTML afin de pouvoir l’interpréter et l’intégrer.

III- Comment accéder au code HTML sur WordPress ?

Il suffit de se rendre sur l’onglet « Articles » ou « Pages » de votre back office WordPress et d’ouvrir un contenu existant sur votre site ou blog.

Ensuite, il suffit de cliquer sur l’onglet « Texte » et le tour est joué, vous pouvez éditer votre code HTML depuis WordPress !

accéder au HTML sur WordPress

IV- 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é des balises HTML encapsulent un contenu entre une balise de début et une balise de fin. Le nom des balises explique à votre navigateur que tel contenu est un titre, quand tel autre est un bouton par exemple.

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 :

les différents types de langages sur le web

Donne en HTML :

<img class="size-full wp-image-10945 aligncenter" src="https://www.livementor.com/blog/wp-content/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 clickable renvoyant vers une autre page de votre site, comme ci-dessous.

Créer une image clickable avec du HTML sur WordPress

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/blog/wp-content/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.

barre d'outil HTML simplifiée sur WordPress

En fait, 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…

code avancé HTML wordpress

Par exemple, pour ma part j’intègre beaucoup de sommaires clickables au sein de mes articles. Ils permettent une meilleure expérience de navigation et sont très appréciés en le référencement naturel pour obtenir des sitelinks.

Pour créer ces sommaires clickables, il n’y a pas d’autres choix que de se rendre dans l’onglet « Texte » afin de pouvoir accéder au HTML de notre article WordPress pour y insérer des balises spécifiques.

Voici à quoi cela ressemble concrètement : 

sommaire cliquable code HTML sur WordPress

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 !

V- L’importance des bases en HTML

Plusieurs raisons qui montrent l’importance de la maîtrise des bases du HTML :

  • Effectuer des actions de code avancées : comme celles vues plus haut afin de mettre en place 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 plus facilement : 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…)
  • Etc…

le HTML sur WordPress, c’est un peu comme de la magie. On écrit un bout de code et hop… on obtient quelque chose !

Personnellement, j’aime m’amuser à creuser les différentes possibilités en HTML, le champ des possibles est immense.

On peut trouver du code pour tout sur le web, il suffit de chercher un petit peu 🙂

Vous allez y prendre plaisir, et WordPress a l’avantage de tout simplifier, on peut directement avoir un aperçu du rendu.

D’ailleurs vous l’aurez remarqué, il a beau être accessible à n’importe qui, mais souvent, certaines actions effectuées sur le code HTML sont quand même nécessaires pour tirer le meilleur de WordPress.

Nul besoin d’être un expert en code informatique. En revanche, ce savoir de base vous permettra certes, de mettre en place certaines actions, mais surtout, de mieux comprendre dans quel écosystème on travaille et ce que l’on est concrètement en train de construire.

Et c’est toujours plus agréable de ne pas être à la ramasse lorsque l’on discute avec un développeur 🙂

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 !

Rendez-vous dans la partie édition de votre WordPress puis cliquez sur l’onglet « Texte » qui je le rappelle permet d’accéder au code HTML de votre page ou article.

Ensuite, tester 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.

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

Suite dans le prochain épisode… Restez connecté 🙂

À votre tour maintenant !

J’aimerais savoir dans les commentaires de cet article : 

Quels sont les éléments que vous faites ou que vous souhaiteriez faire apparaître sur vos pages / articles grâce au HTML ?

Cet article est une introduction à notre formation complète sur WordPress.

formation wordpress livementor

Vous avez trouvé une faute d’orthographe dans cet article ? Vous pouvez nous en faire part en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée .

Avatar

Thomas Meyer

Nos conseils dans votre boite mail

Envie de progresser à nos côtés ? Rejoignez-nous dans l'aventure ! Chaque semaine, nous partageons nos meilleurs conseils.

Rejoindre la newsletter
Do NOT follow this link or you will be banned from the site!

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :