Langage HTML : le guide indispensable pour tout comprendre

Le langage HTML, pour HyperText Markup Language, est un type de langage informatique qui décrit au navigateur comment afficher la page web. L'humain rédige du code HTML sur un éditeur de texte, la machine comprend le langage et rend le résultat à l'écran au moment d'ouvrir la page web. Titres en gras, listes à puces, images et vidéos, paragraphes de texte, formulaires ou encore liens de redirection : le contenu et la structure de la page sont écrits avec du langage HTML.

La grande majorité des pages web sont codées en HTML. A priori, la syntaxe semble complexe : le code utilise des chevrons, des barres obliques, des guillemets, le signe égal et des abréviations en anglais. La rédaction n'est pas naturelle, car elle utilise un langage spécifique compréhensible par la machine. En réalité, comparé à l'apprentissage d'une langue étrangère, apprendre à coder en HTML est facile : il suffit de connaître les différents éléments et attributs, ainsi que les standards d'écriture correspondants.

À moins d'utiliser un CMS, savoir coder en HTML, dans sa dernière version HTML5, est la base pour créer un site Internet. Pour comprendre rapidement, il faut revenir en 1989, lorsque le World Wide Web naît. Le World Wide Web fonctionne grâce à trois inventions majeures :

1. L'URL : c'est l'adresse qui identifie la page web. L'internaute renseigne l'URL dans le navigateur.
2. Le HTTP : c'est le protocole qui permet au navigateur d'aller chercher la page web hébergée sur le serveur, pour l'afficher sur l'écran de l'internaute. Le navigateur traduit l'URL en requête HTTP adressée au serveur, qui trouve la page web et l'envoie au navigateur.
3. HTML : c'est le langage utilisé pour représenter la page web. Le navigateur comprend le fichier HTML et affiche la page web à l'écran.

En résumé : le serveur stocke les fichiers HTML, identifiés avec des URL uniques ; lorsqu'un internaute renseigne l'URL, le serveur envoie au navigateur le fichier HTML correspondant en utilisant le protocole HTTP. Pour mettre en ligne une page web, il faut donc : une URL qui identifie la page, un fichier HTML qui définit l'affichage de cette page, un espace de stockage pour héberger le fichier HTML sur un serveur.

Le langage HTML suffit à coder une page web. En pratique néanmoins, d'autres langages informatiques lui sont souvent associés : les feuilles de style en cascade CSS permettent de personnaliser de manière rapide et avancée la mise en forme de la page web, JavaScript permet d'ajouter du contenu dynamique.

Comment écrire en HTML ?

Pour écrire en HTML, il faut insérer des éléments et des attributs dans des balises, en utilisant la syntaxe imposée. Un paragraphe de texte, par exemple, constitue un élément à écrire entre les balises < > ; cet élément peut être personnalisé, en utilisant l'attribut style à écrire : style="". Le code HTML pour écrire le texte du paragraphe en rose vif est : < p style="color: #FF69B4" >Paragraphe de texte affiché en rose.< /p >.

See the Pen langage-html_paragraphe-couleur by HubSpot France (@HubSpot-France) on CodePen.

Écrire les éléments HTML

Les éléments HTML, « tags » en anglais, désignent les différents types de contenus qui structurent la page web. Un paragraphe de texte, une image et une liste numérotée, par exemple, sont trois types de contenus distincts, chacun constitue donc un élément HTML spécifique. Pour indiquer au navigateur le type de contenu à afficher, il faut utiliser le nom de l'élément correspondant. Dans l'exemple : le paragraphe s'appelle p, l'image s'appelle img et la liste numérotée s'appelle ol.

En langage HTML, la plupart des éléments s'écrivent, dans l'ordre :

1. Une balise ouvrante : elle indique que l'élément commence. Elle s'écrit avec un chevron ouvrant et un chevron fermant, à l'intérieur duquel renseigner le nom de l'élément : < nom de l'élément >. La balise ouvrante n'est pas visible à l'écran.
2. Le contenu : le contenu de l'élément s'affiche à l'écran.
3. Une balise fermante : elle clôture l'élément. Elle s'écrit comme la balise ouvrante, en ajoutant une barre oblique après le chevron ouvrant : < /nom de l'élément >.

Pour insérer un élément paragraphe, par exemple, il faut écrire : < p >texte du paragraphe< /p>. Seul le contenu, c'est-à-dire la partie de l'élément « texte du paragraphe », est affiché par le navigateur, le reste du code est invisible. À noter que les éléments HTML ne sont pas sensibles à la casse, c'est-à-dire que l'emploi de majuscules et de minuscules est indifférent. L'élément paragraphe s'écrit indistinctement < p > et < P >. Pour des raisons de lisibilité et de cohérence, le développeur néanmoins a intérêt à utiliser systématiquement les minuscules.

Le langage HTML qualifie certains éléments :

• Les éléments HTML dits « vides » n'utilisent pas la syntaxe balise d'ouverture, contenu, balise de fermeture : ils se composent d'une balise unique. C'est notamment le cas des éléments vides image « img » et saut de ligne « br ». Pour sauter une ligne à la fin d'une phrase, par exemple, il suffit d'insérer l'élément < br > sans contenu ni balise de fermeture.
• Le langage HTML distingue les éléments de bloc des éléments en ligne. Les éléments de bloc structurent la page : chacun représente une portion de contenu, séparée des autres. Les éléments en ligne donnent des informations sur une partie d'un contenu. Illustration : l'élément de bloc paragraphe < p > inclut l'élément en ligne lien hypertexte < a >, pour insérer une partie du texte cliquable à l'intérieur du paragraphe.

Il est possible d'imbriquer des éléments les uns dans les autres : un élément est inséré dans un autre élément, pour augmenter le niveau d'information à fournir au navigateur à propos d'un contenu. Exemple : pour mettre un mot en gras dans un paragraphe, il faut imbriquer l'élément en ligne < strong > dans l'élément de bloc < p >. Le langage HTML est le suivant : < p > Le < strong >mot< /strong > est en gras. < /p >.

See the Pen langage-html_strong by HubSpot France (@HubSpot-France) on CodePen.

Écrire les attributs HTML

Comme les éléments, les attributs HTML donnent de l'information au navigateur pour afficher le contenu. Mais à la différence de l'élément :

• L'attribut n'est pas structurant : il ne détermine pas un type de contenu à afficher, il décrit le contenu.
• L'attribut ne se suffit pas à lui-même : il est toujours l'attribut d'un élément. À noter que l'attribut est majoritairement facultatif. Certains éléments néanmoins ne fonctionnent qu'accompagnés d'un attribut. C'est le cas notamment de l'élément lien hypertexte < a > qui ne fonctionne qu'à condition de renseigner l'attribut href.
• L'attribut s'écrit différemment : il a un nom et une valeur. Le nom de l'attribut est renseigné après le nom de l'élément, et suivi du signe égal ; la valeur de l'attribut est renseignée entre guillemets : < élément attribut="" > contenu < /élément >. Un élément peut inclure plusieurs attributs.

À noter que le langage HTML utilise des caractères spéciaux : ils sont part intégrante de la syntaxe du code. Le chevron « < », par exemple, est interprété comme du code et ne paraît donc pas à l'écran. Pour utiliser des caractères spéciaux dans du texte à afficher à l'écran, il faut les remplacer par des références spéciales, entourées des caractères « & » et « ; ». Pour insérer « < » afin de symboliser « inférieur à », par exemple, il faut écrire « < ».

Comment créer un fichier HTML ?

C'est le fichier HTML qui contient le texte du code de la page web. Le fichier HTML est transféré sur le serveur : quand un internaute renseigne l'URL correspondante, le serveur envoie le fichier HTML au navigateur, qui affiche la page à l'écran.

Pour créer le fichier, un éditeur HTML suffit : le Bloc-notes sur Microsoft, TextEdit sur Mac ou tout autre logiciel de traitement de texte. Une fois le code rédigé en langage HTML dans l'éditeur de texte, il faut enregistrer le fichier au format .html dans un dossier dédié.

Le fichier HTML doit se présenter sous la forme suivante :

• La 1ère ligne du fichier mentionne le type de document comme suit : < !DOCTYPE html >. Cette information n'est pas visible à l'écran.
• La 2ème ligne indique le langage de balisage utilisé, avec l'élément racine : < html >. Cet élément englobe tout le code, il doit être fermé à la fin du fichier, avec la balise < /html >. Ces indications n'apparaissent pas à l'écran.
• La 3ème ligne insère l'élément < head > : toutes les informations contenues à l'intérieur des balises < head > informations < /head > sont invisibles par l'internaute. Il s'agit d'informations à destination du navigateur : meta description, title et CSS interne, notamment.
• L'élément < body > est inséré en suivant : c'est cet élément qui englobe le contenu à afficher sur la page web. Texte, images, tableau HTML, vidéos, formulaires ou encore boutons : tous les éléments sont insérés entre les balises < body > contenu à afficher < /body >.

Le squelette de la page web ressemble à ceci :

< !DOCTYPE html >

< html >

< head >

< /head >

< body >

tous les éléments HTML du contenu à afficher sur la page web

< /body >

< /html >

Pour que le fichier HTML soit facilement lisible, les différents éléments peuvent être disposés en décalé : l'indentation ne modifie pas la compréhension du code par le navigateur. Autre moyen de s'y retrouver aisément dans un fichier HTML long et complexe : les commentaires HTML. Il est possible d'écrire des informations exclusivement à destination du développeur dans les balises < !-- -- >, sans impact sur le code.

See the Pen langage-html_doctype by HubSpot France (@HubSpot-France) on CodePen.

Les éléments HTML fréquemment utilisés

Les titres

Les éléments de titre, de h1 à h6, indiquent que le texte est un titre ou un sous-titre : le navigateur l'affiche avec une mise en forme spécifique. Pour insérer un titre HTML, il faut écrire : < hx > Titre < /hx > ou x indique le numéro du niveau de titre.

See the Pen langage-html_titres by HubSpot France (@HubSpot-France) on CodePen.

Les paragraphes

L'élément paragraphe < p > indique au navigateur d'insérer un paragraphe de texte. Un saut de ligne est automatiquement ajouté avant et après les balises < p > paragraphe < /p >.

See the Pen langage-html_paragraphes by HubSpot France (@HubSpot-France) on CodePen.

Les listes

Pour coder une liste à puces en langage HTML, il faut utiliser l'élément < ul >. L'élément < ol > affiche une liste numérotée. Entre les balises de l'élément liste, chaque ligne de la liste, à puces ou à numéros, est codée dans les balises < li > ligne < /li >.

See the Pen langage-html_listes by HubSpot France (@HubSpot-France) on CodePen.

Les images

Pour insérer une image HTML sur la page web, il faut utiliser l'élément vide < img >. Cet élément ne fonctionne qu'à condition d'inclure l'attribut src : l'attribut src, pour source, indique au navigateur le chemin pour récupérer l'image à afficher. Pour coder une image en HTML, il faut écrire : < img src=""/ >.

See the Pen langage-html_image by HubSpot France (@HubSpot-France) on CodePen.

Les liens

L'élément pour insérer un lien HTML s'écrit : < a >. Pour fonctionner, l'élément doit obligatoirement inclure l'attribut href, qui indique l'emplacement de redirection : une page du site web, une page d'un site tiers ou une ancre sur la page web affichée. Le code s'écrit : < a href="" >texte cliquable< /a >.

See the Pen langage-html_lien-hypertexte by HubSpot France (@HubSpot-France) on CodePen.

Les éléments génériques div et span

La plupart des éléments HTML sont dits « sémantiques » : ils indiquent des informations traitées par le navigateur. Les éléments div et span, au contraire, n'indiquent aucune information : ce sont des conteneurs génériques à vocation exclusivement structurante, qui produisent des effets à condition de leur attribuer des propriétés CSS. L'élément div HTML est un élément de bloc alors que l'élément span est un élément en ligne.

See the Pen langage-html_div-span by HubSpot France (@HubSpot-France) on CodePen.

Les éléments de mise en évidence em et strong

Les éléments < em > et < strong > mettent en valeur une portion de texte. L'élément HTML < em > affiche le texte en italique, l'élément HTML < strong > l'affiche en gras.

See the Pen langage-html_italique-gras by HubSpot France (@HubSpot-France) on CodePen.

Les attributs HTML fréquemment utilisés

• L'attribut style personnalise l'apparence par défaut du paragraphe, du texte ou encore de l'image. L'attribut style prend différentes valeurs : text-align, color ou encore font-size. Pour coder un paragraphe HTML en couleur, par exemple, il faut écrire la balise couleur HTML : < p style="color: code couleur" >paragraphe< /p >.
• L'attribut id identifie un élément pour lui appliquer une mise en forme spécifique avec CSS. Pour afficher tous les titres en rose, par exemple, il faut renseigner l'attribut id="rose" dans chaque élément de titre, puis indiquer la mise en forme à afficher avec CSS.
• L'attribut href renseigne l'emplacement de redirection du lien hypertexte. Il est obligatoire pour faire fonctionner l'élément < a >.
• L'attribut src indique la source de l'image. L'élément img contient obligatoirement l'attribut src. Il peut également contenir les attributs : alt text, qui décrit l'image sans en afficher la description, height et width, pour personnaliser la taille de l'image, ou encore title, pour afficher un titre quand l'internaute survole l'image avec le pointeur de sa souris.
• L'attribut type de l'élément input détermine le comportement du contrôle interactif input. Lorsqu'il prend la valeur button, par exemple, le navigateur affiche un bouton cliquable ; pour créer une checkbox HTML, il faut renseigner la valeur checkbox : < input type="checkbox" >.

Où apprendre à coder en HTML ?

Différentes méthodes permettent d'apprendre à coder en HTML : lire un ouvrage dédié, visionner des tutoriels vidéo, suivre une formation spécialisée ou encore pratiquer dans un éditeur de code. Ces ressources peuvent être utilisées cumulativement. Voici cinq supports pour apprendre à coder en ligne.

L'e-book HubSpot à télécharger gratuitement

HubSpot met à disposition son Guide d'introduction aux langages HTML et CSS pour les marketeurs en téléchargement gratuit. Cet e-book initie aux langages HTML et CSS, et développe leurs spécificités respectives. À destination du marketeur, le guide lui apprend à coder les balises HTML indispensables et lui donne les clés pour mettre à jour un fichier CSS.

La formation en ligne OpenClassrooms

OpenClassrooms est un site de formation en ligne, qui dispense ses enseignements sous forme de parcours diplômant ou de cours en accès libre. Le cours Apprenez à créer votre site web avec HTML5 et CSS3, accessible aux débutants, apprend à utiliser les langages informatiques HTML et CSS en 20 heures.

La plateforme interactive en ligne Codecademy

Très populaire, la plateforme de digital learning Codecademy permet d'apprendre les bases du codage en HTML5. Le cours Learn HTML se compose de divers modules sur une durée totale de neuf heures, et qui incluent notamment : introduction à la syntaxe HTML, création de tableaux et de formulaires. À noter que certaines ressources, notamment les quiz, sont accessibles à condition de souscrire un abonnement payant.

La chaîne YouTube freeCodeCamp

freeCodeCamp est une association à but non lucratif. Son objet : diffuser gratuitement la connaissance en matière de codage, pour permettre à tous de développer des sites web. freeCodeCamp utilise plusieurs supports de diffusion à cet effet, notamment un compte Twitter, une plateforme en ligne et une chaîne YouTube. Ces vidéos constituent une ressource intéressante et efficace pour l'élève qui privilégie l'apprentissage visuel.

L'éditeur de code CodePen

freeCodeCamp l'annonce en message d'accueil sur sa plateforme : « Practice is the key. Practice, practice, practice. ». L'apprentissage passe par l'entraînement, et l'autodidacte apprécie pratiquer le code HTML par lui-même. L'éditeur et testeur de code CodePen permet de se perfectionner en s'exerçant : l'utilisateur entre son code HTML, et visualise instantanément le résultat à l'écran.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.