Cette page montre comment Corpus habille le texte courant. Rien n'y est décoré à la main : chaque exemple est écrit avec les balises ordinaires de l'éditeur, et c'est le template qui décide de l'allure.
Les titres
L'article porte déjà son titre en h1. Un seul h1 par page : dans le corps, on commence donc au niveau 2, et on descend d'un cran à chaque fois qu'une idée dépend de la précédente. Sauter un niveau, passer de h2 à h4, laisse un trou dans le sommaire que lit une personne aveugle.
Un titre de niveau 3
Il dépend du titre de niveau 2 qui le précède.
Un titre de niveau 4
Et celui-ci du niveau 3. Au-delà, la page est trop profonde : mieux vaut la couper en deux.
Le texte courant
Un paragraphe ordinaire. La largeur de lecture est bornée par le template, autour de soixante-dix caractères : au-delà, l'œil peine à retrouver le début de la ligne suivante.
Un paragraphe d'accroche, avec la classe lead. Un seul par page, juste sous le titre.
Dans une phrase, ce qui compte se met en gras et ce qui prend une nuance se met en italique. On peut citer du code, poser un lien, ou noter une CMS abréviation.
Les listes
Une liste à puces, quand l'ordre n'a pas d'importance :
- Le premier élément
- Le deuxième, qui peut tenir sur plusieurs lignes sans que cela change quoi que ce soit à sa présentation
- Le troisième
Une liste numérotée, quand l'ordre compte, comme dans les étapes d'une recette :
- Préparer
- Cuire
- Servir
La citation
Aucune classe à poser : la balise de citation reçoit son filet toute seule.
On ne fait pas de bonne cuisine avec de mauvais produits.
Les messages
Quatre tons, et un seul balisage. Le role="note" les fait annoncer comme une remarque par un lecteur d'écran, et la couleur n'est jamais le seul indice : le titre du message dit déjà de quoi il s'agit, ce qui reste vrai pour une personne qui ne distingue pas le rouge du vert.
Le tableau
Un tableau sert à comparer des données, jamais à mettre en page. La première ligne est une ligne d'en-tête, et c'est elle qui permet à un lecteur d'écran d'annoncer « Cuisson, 25 minutes » plutôt que « 25 » tout seul.
| Recette | Préparation | Cuisson |
|---|---|---|
| Velouté de potimaron | 10 min | 25 min |
| Ratatouille | 25 min | 40 min |
| Tarte fine à la tomate | 15 min | 25 min |
Le bouton
Un lien qui déclenche une action prend la classe btn. Un lien qui mène simplement à une autre page reste un lien.