À quoi sert le langage HTML ?
Le HTML (HyperText Markup Language) est le langage qui dit ce que contient une page web : titres, paragraphes, listes, liens et formulaires. Le navigateur lit ce texte et en fait la page que vous voyez.
Un HTML bien structuré aide les moteurs de recherche, les lecteurs d'écran et les collègues qui reprendront votre page.
À la fin de cette leçon
Remarque
Je peux structurer une page avec un HTML qui a du sens.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Élément | une partie de la page, écrite avec une balise | <p>Bonjour</p> |
| Balise | le mot entre chevrons qui ouvre ou ferme un élément | |
| Attribut | un réglage placé dans la balise ouvrante | href="menu.html" |
| Titre | un élément h1 à h6 qui nomme une partie de la page | |
| Repère | un élément qui dit le rôle d'une zone : en-tête, navigation, contenu | |
| Formulaire | un élément qui regroupe des champs à envoyer |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Un élément a deux balises
Un élément s'écrit en trois morceaux : une balise ouvrante comme <p>, un contenu, puis une balise fermante comme </p>. Les éléments s'emboîtent, comme des boîtes dans des boîtes.
Un attribut s'écrit dans la balise ouvrante : un nom, un signe égal, une valeur entre guillemets. Un lien nomme sa cible avec href.
Exemple : un titre, un paragraphe et un lien
<h1>Le restaurant universitaire</h1>
<p>Le menu change chaque jour.</p>
<p>Voir le <a href="https://exemple.fr/menu">menu de la semaine</a>.</p>
<!-- Changez le texte du lien, puis lancez de nouveau. -->
Les titres dessinent le plan de la page
Les éléments h1 à h6 sont des titres. Le h1 nomme la page, un h2 nomme une partie, un h3 nomme une sous-partie. Il n'y a qu'un h1 par page.
Un titre ne sert pas à grossir un texte : la taille se règle en CSS. Les titres forment un plan que lit un lecteur d'écran, et un moteur de recherche s'en sert pour comprendre la page.
Avant de lancer les Run
Remarque
Appuyez sur Démarrer en haut de la page et attendez que le labo tourne. Il propose JupyterLab, pour éditer, et un aperçu de la page site. Les scripts du labo écrivent leurs mots en anglais : la page d'exemple est un menu de repas en anglais.
Lister les fichiers de la page
docker exec jupyter ls siteAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Compter les balises de la page
docker exec jupyter python3 steps/tags.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Afficher le plan des titres
docker exec jupyter python3 steps/outline.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Ce que disent les deux scripts
Le premier Run liste trois fichiers : app.js, index.html et style.css. Le script des balises compte 36 balises ouvrantes : cinq a, cinq li et trois section.
Le script du plan écrit un h1, Lunch menu, puis trois h2 décalés vers la droite. C'est le plan de la page : un titre, trois parties.
Les repères disent le rôle de chaque zone
Les éléments header, nav, main, section et footer disent à quoi sert une zone : en-tête, navigation, contenu principal, partie, pied de page. Un div ne dit rien.
Une personne qui navigue au clavier ou avec un lecteur d'écran saute d'un repère à l'autre. Elle trouve le contenu sans lire tout le reste.
Un formulaire relie chaque champ à son étiquette
Un form regroupe des champs. Chaque champ input a un attribut id, et son label a un attribut for avec la même valeur. Cliquer sur l'étiquette place alors le curseur dans le champ.
Sans étiquette, un lecteur d'écran lit « champ de saisie » sans dire ce qu'il faut écrire.
Exemple : un champ et son étiquette
<form>
<label for="nom">Votre nom</label>
<input id="nom" type="text">
<button type="submit">Envoyer</button>
</form>
<!-- Cliquez sur « Votre nom » : le curseur entre dans le champ. -->
Une erreur fréquente
Attention
Beaucoup pensent qu'on choisit un h3 parce que le texte est plus petit. Non : le niveau dit la place dans le plan, pas la taille. Ne sautez pas de niveau, de h1 à h3 par exemple, et réglez la taille avec le CSS.