Le langage des pages : HTML

Lecture : 7 min 6 questions de quiz

Une page web, c'est d'abord du texte. Le HTML est le langage qui décrit ce texte : ce qui est un titre, ce qui est un paragraphe, ce qui est un lien. Sans lui, le navigateur ne saurait pas quoi afficher.

Le rôle du HTML

Le HTML sert à structurer le contenu : dire ce que chaque morceau représente. Il ne s'occupe ni des couleurs ni des animations.

Le HTML décrit le sens : titre, paragraphe, liste, lien, image.
Le CSS décrit l'apparence : couleurs, polices, disposition.
Le JavaScript décrit le comportement : réactions aux clics, animations.

Cette séparation permet à une même page d'être lue par un navigateur, par un lecteur d'écran ou par un moteur de recherche.

Une balise, des attributs

Un élément HTML s'écrit avec une balise ouvrante, un contenu et une balise fermante :

<p>Bonjour, voici un paragraphe.</p>

Certaines balises n'ont pas de contenu : elles sont auto-fermantes, comme <img> ou <br>.

Une balise peut porter des attributs, écrits nom="valeur" dans la balise ouvrante :

<a href="https://fr.wikipedia.org/">Un lien vers Wikipédia</a>

Ici, href contient l'adresse de destination du lien.

Le squelette d'une page

Toute page web ressemble à ceci :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Titre de l'onglet</title>
  </head>
  <body>
    <h1>Le titre visible</h1>
    <p>Le contenu de la page.</p>
  </body>
</html>

<!DOCTYPE html> annonce que c'est du HTML moderne ;
<html lang="fr"> indique la langue du document ;
<head> contient les informations invisibles : titre, encodage, description ;
<body> contient tout ce qui s'affiche.

Les éléments s'imbriquent comme des poupées russes : on parle de parents et d'enfants.

Les balises essentielles

Balise	Rôle
`<h1>` à `<h6>`	Les titres, du plus important au moins important
`<p>`	Un paragraphe
`<a>`	Un lien
`<img>`	Une image
`<ul>`, `<ol>`, `<li>`	Une liste à puces ou numérotée
`<table>`	Un tableau
`<form>`, `<input>`, `<button>`	Un formulaire
`<div>`, `<span>`	Des conteneurs, sans sens particulier

Il existe aussi des balises sémantiques qui décrivent la zone de la page : <header>, <nav>, <main>, <footer>, <section>, <article>. Elles aident les lecteurs d'écran et les moteurs de recherche à comprendre la page.

Les liens

Un lien peut être absolu (une adresse complète) ou relatif (un chemin dans le même site). Il peut aussi pointer vers une ancre, c'est-à-dire un endroit précis de la page, avec un dièse :

<a href="#reponse">Aller à la réponse</a>

Les commentaires

Un commentaire s'écrit entre . Il est invisible à l'écran, mais reste présent dans le code source :

<!-- Ceci est une note pour les développeurs -->

C'est une leçon importante : ce qui n'est pas affiché peut quand même être lu. N'écris jamais de mot de passe ni de donnée personnelle dans un commentaire.

Un HTML de qualité

Un bon code HTML est :

indenté, pour être lisible ;
sémantique, pour donner du sens au contenu ;
accessible : textes alt pour les images, titres hiérarchisés, langue déclarée ;
complet : un <title> et une description pour les moteurs de recherche.

Le W3C propose un service de validation qui vérifie qu'une page respecte les règles du langage.

À retenir

Le HTML décrit la structure et le contenu de la page ; l'apparence, c'est le CSS.
Un élément = une balise ouvrante, un contenu, une balise fermante ; les attributs complètent la balise.
Un lien s'écrit avec la balise <a> et son attribut href ; une image avec <img> et son texte alt.
Le titre de l'onglet est dans <title>, dans <head>.
Un commentaire HTML n'est pas affiché, mais il reste lisible dans le code source.

Lexique

Balise: Un mot-clé entre chevrons qui décrit un élément de la page, comme <p> ou <h1>.
Attribut: Une information ajoutée dans la balise ouvrante, écrite nom="valeur".
Élément: L'ensemble formé par la balise ouvrante, le contenu et la balise fermante.
Sémantique: Le sens donné au contenu par la balise choisie (titre, liste, navigation…).
Accessibilité: Tout ce qui rend une page utilisable par tous, y compris les personnes en situation de handicap.
Code source: Le texte HTML envoyé par le serveur, visible avec Ctrl + U.