Pas besoin dâĂȘtre un geek pour apprendre le HTML.
Pas besoin de savoir coder comme un développeur web pour maßtriser les balises HTML.
Et pas besoin dây passer des heures pour comprendre le codage HTML.
Câest rassurant nanâ? đ
Oui elle est gentille la pâtite dame, mais ça fait peur quand mĂȘmeâ!
Bah oui, une barre oblique calĂ©e entre 2 symboles et câest fini, le cerveau humain se referme, car tout lui paraĂźt compliquĂ©.
Alors ça vous dit de vous faire accompagner dâune killeuse pour apprendre le langage HTML pour les nulsâ?
(Promis, je ne vais pas vous faire un cours dâinformatique et je vais essayer de rendre cet article ludique.)
Câest quoi le langage HTMLâ?
Commençons par les bases.
Le HTML (HyperText Markup Language) est le langage utilisé pour créer des pages web.
Ce code HTML permet de formater et structurer une page web, Ă lâaide de balises.
En bref, les balises HTML expliquent à Google (et aux autres moteurs de recherche) comment hiérarchiser les infos présentes dans la page web et comment présenter cette page (titre, sous-titre, paragraphe, image, etc.).
CombinĂ© au style CSS (feuille de style), le codage HTML permet de mettre en forme toutes les pages dâun site Internet.
Mais devinez quoiâ?
En rĂ©alitĂ©, vous nâavez mĂȘme pas besoin dâapprendre le HTML pour crĂ©er un site web, ni pour rĂ©diger des contenus web.
Bah aloooooooooors, pourquoi tu nous expliques tout ça Adeliiiiiineâ????
Hey oh, on se calme heinâ! đ
Si je vous explique le HTML pour les nuls, câest justement parce que vous ĂȘtes⊠curieux dâapprendreâ! đ
Donc mĂȘme si le but nâest pas de tout maĂźtriser, Ă partir du moment oĂč vous utilisez le web pour votre activitĂ© pro, vous DEVEZ en connaĂźtre les basesâ!
Alors on continueâ!
Apprendre le langage HTML pour les nuls, et non pas pour les dĂ©veloppeurs webâ!
Le code HTML peut ĂȘtre ultra complexe, câest vrai.
Mais il sâagit dans cet article de connaĂźtre les bases pour la crĂ©ation de contenus web, pas pour le dĂ©ploiement entier dâun site Internet. đ
Apprendre le langage HTML pour les nuls consiste à appréhender :
- la structure de texte, grĂące au balisage des titres et sous-titresâ;
- la mise en forme de texte, avec des balises pour mettre en gras, en italique, en souligné, etc. ;
- lâinsertion dâĂ©lĂ©ments au sein des pages, comme des images ou des liens hypertextes par exemple.
Donc PAS BESOIN de maĂźtriser le codage HTML «âcomplexeâ», celui qui vous fait peur. đ
Du style :

On passe au concretâ?
NâhĂ©sitez pas Ă mettre cet article dans vos favoris pour y revenir si besoin.
Voici les secrets du langage HTMLâŠ
Apprendre le HTML : comment crĂ©er une baliseâ?
Une balise HTML donne les infos de structure et mise en forme.
Pour créer une balise HTML, il faut :
- commencer la balise avec un chevron ouvert <
- décrire la balise
- ajouter les attributs
- terminer la balise avec un chevron fermé >
Ăa, câest pour une seule balise.
Mais lorsque vous insĂ©rez une balise, il y aura TOUJOURS une balise ouvrante et une balise fermante qui englobent votre contenu, câest-Ă -dire 2 balises.
«âWaouh, tu nous fais des calculs de haut vol Adeline đ â».
Exemple :
<h1>Titre de killeuse</h1>
Vous le voyez ici, la balise ouvrante informe que le contenu est un titre de 1er rang et la balise fermante (Ă laquelle on ajoute une barre oblique devant le nom de lâĂ©lĂ©ment) indique que le titre se termine Ă cet endroit.
Maintenant que vous savez ce quâest une balise HTML, voyons comment apprendre le HTML (HTML5, XHTML5, etc.) qui vous servira le plus dans la crĂ©ation de contenus.



Les balises HTML pour les titres et sous-titres : les balises Hn
Pour structurer et hiérarchiser un contenu, il faut obligatoirement insérer des titres et sous-titres.
Mais pas nâimporte comment.
Dans une page web, il y aura un seul titre de 1er rang : le titre compris dans la balise H1.
Dans cet article, mon titre H1 est «âApprendre le HTML : 10 min avec une killeuse pour tout savoirâ!â».
Puis viennent les titres de chaque paragraphe principal : les titres compris dans les balises H2.
Et si un paragraphe est dĂ©taillĂ© avec dâautres sous-titres, ils seront compris dans les balises H3.
đ Si on reprend lâexemple de cet article, les titres et sous-titres sont balisĂ©s comme ça :



Si jâavais ajoutĂ© des sous-parties Ă ces titres H2, je les aurais donc balisĂ©es en H3.
Les balises Hn informent Google de la structure de notre article et des grandes parties et sous-parties.
Dâun point de vue SEO (rĂ©fĂ©rencement naturel), le balisage Hn est trĂšs important : les H1 et H2 doivent ĂȘtre optimisĂ©s pour rendre votre article plus puissant aux yeux des algorithmes.
«âNan mais lĂ Adeline, tu me perds.â»đ
OK, OK, je mâarrĂȘte lĂ pour les dĂ©tails, mais jâespĂšre que vous avez compris lâidĂ©eâ!
Maintenant, suivez-moi pour apprendre le langage HTML pour débutant le plus utilisé dans la création de contenus web.
Apprendre le HTML pour créer un paragraphe
Pour indiquer la prĂ©sence dâun paragraphe, la balise Ă insĂ©rer est la suivante :
<p>Votre paragraphe qui dit que câest trop cool dâapprendre le HTML aux cĂŽtĂ©s des Killeuses du web</p>
Rien de particulier Ă savoir. Peu importe la longueur de votre paragraphe, il vous suffit dâinsĂ©rer la balise correspondante au dĂ©but et Ă la fin de votre paragraphe.
La balise HTML pour mettre en gras
Il existe 2 balises pour mettre un mot en gras : la balise bold et la balise strong.
<b>votre mot en gras</b>
<strong>votre mot en gras</strong>
Il nây a pas de grande diffĂ©rence entre les 2 donc vous pouvez utiliser celle que vous prĂ©fĂ©rez.
đ Voici les explications si vous souhaitez en savoir plus.
La balise HTML pour faire une liste Ă puces
La liste à puces comprend la totalité de la liste, ainsi que chacune des puces.
Pour la retranscrire en HTML, il faut procéder de cette maniÚre.
<ul>Texte pour introduire vos éléments
<li>élément de la liste</li>
<li>élément de la liste</li>
<li>élément de la liste</li>
</ul>
Apprendre le HTML pour insérer un lien interne ou externe
Dans cette balise, vous faites apparaĂźtre Ă la fois le lien (interne ou externe) et Ă la fois lâancre de votre lien, câest-Ă -dire le groupe de mots dans lequel le lien sera insĂ©rĂ©.
<a href=«âlien Ă insĂ©rerâ»>ancre du lien</a>
Par exemple, je veux vous présenter un livre au top pour maßtriser le langage HTML.
En code HTML, ça donnera ça :
Je veux vous prĂ©senter un <a href=«âhttps://amzn.to/3AKDItTâ»>livre au top pour maĂźtriser le langage HTML</a>.
La balise HTML pour insérer une image
Cette balise se referme simplement Ă lâaide dâun chevron.
<img src=«âlien de lâimageâ»>
Balisage HTML pour souligner
<u>mot Ă souligner</u>
Balisage HTML pour mettre en italique
<i>mot Ă mettre en italique</i>
Pssssst, nâoubliez pas de mettre cet article dans vos favoris pour vĂ©rifier vos balises HTML si nĂ©cessaireâ! đ
Mais comme je vous lâai dit au dĂ©but, vous nâaurez pas forcĂ©ment besoin de maĂźtriser le codage HTML pour mettre en ligne des pages web.
Vous savez pourquoi ?
Tout simplement parce que les CMS font tout le boulot Ă votre placeâ! đ
Les quoiâ?
Les CMS (Content Management System).
Ces systĂšmes de gestion de contenu, tels que WordPress, vous facilitent la tĂąche. Vous nâavez quâĂ faire la structure et mise en forme de votre texte comme vous la faites sur Word par exemple.
Comment NE PAS intĂ©grer le code HTML dans WordPressâ? đ
Quand vous souhaitez intégrer du texte sur un site web et le mettre en ligne, il suffit de rédiger sur Word, puis le copier et le coller dans WordPress.
Ensuite, vous faites votre mise en page et mise en forme (titres et sous-titres, gras, etc.)
Et WordPress se charge lui-mĂȘme dâintĂ©grer le codage HTML correspondant.
Câest aussi simple que çaâ?
OUI.
Je vous montre en imagesâŠ



Voici un article, intégré dans WordPress. Vous le voyez en haut à gauche, vous pouvez hiérarchiser vos titres, mettre en gras, insérer des liens, etc.
Ceci est la version «âĂ©diteur visuelâ» de votre article.
WordPress crĂ©e automatiquement le bon code HTML, visible dans la version «âĂ©diteur de codeâ».



Vous le verrez, le langage HTML est moins «ânetâ» quâun texte codĂ© entiĂšrement par lâhumain, mais les rĂ©sultats sont tout aussi puissantsâ! Dâun point de vue SEO comme dâun point de vue design.
Comment intĂ©grer du codage HTML dans WordPressâ?
Si vous ĂȘtre trĂšs rigoureux et souhaitez insĂ©rer vous-mĂȘme le langage HTML Ă vos textes, il vous suffit de baliser entiĂšrement votre texte et lâintĂ©grer directement dans la version «âĂ©diteur de codeâ».
Puis vous pouvez vĂ©rifier la mise en forme dans la version «âĂ©diteur visuelâ».
Pour vous aider Ă baliser vos contenus, vous avez dâailleurs dâexcellents outils gratuits Ă disposition :
https://www.mesoutils.com/generateur.php
https://html-online.com/editor/
Comment apprendre le HTMLÂ ? Cours HTML en ligne
Si vous souhaitez aller plus loin dans le HTML ou les langages CSS ou JavaScript, vous pouvez vous former gratuitement juste ici :
https://fr.w3docs.com/apprendre-html.html
https://developer.mozilla.org/fr/docs/Learn/HTML
Pratiquez en parallĂšle grĂące aux gĂ©nĂ©rateurs de codes HTML vus prĂ©cĂ©demment et vous serez au topâ!
Voili voilouâ!
Vous avez maintenant toutes les notions de base pour passer du statut de «ânul en HTMLâ» au statut de «âdĂ©butant en HTMLâ»â! đ
Vous savez structurer (<hn>), insérer (<a href> <img>) et mettre en forme (<strong>, <p>, <i>, <u>).
You are the best.đ
Et nâoubliez pas que vous avez aussi toutes les clĂ©s pour ne plus avoir besoin de maĂźtriser ce fameux langage HTMLâ! đ€
Allez, je vous laisse avec vos chevrons, barres obliques et symboles en tout genre, jâai un bibimbap qui mâattend (merci beaucoup Do đ„°).