Titre de niveau h1 (page ou article)
Publié le 14 mars 2016
Chaque page web est identifiée par un titre, unique dans le site. C’est le titre de premier niveau du document. Il est balisé par l’élément HTML h1. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Titre de niveau h2
Le titre ci-dessus est de niveau 2, balise <h2>
. Il s’utilise après un élément <h1>
, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Titre de niveau h3
Le titre ci-dessus est de niveau 3, balise <h3>
. Il s’utilise après un élément <h2>
, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Titre de niveau h4
Le titre ci-dessus est de niveau 4, balise <h4>
. Il s’utilise après un élément <h3>
, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Titre de niveau h5
Le titre ci-dessus est de niveau 5, balise <h5>
. Il s’utilise après un élément <h4>
, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Titre de niveau h6
Le titre ci-dessus est de niveau 6, balise <h6>
. Il s’utilise après un élément <h5>
, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tout paragraphe est marqué par l’élément HTML <p>
. L’idée principale doit être exprimée clairement au début du paragraphe. Les autres phrases servent à expliquer et à illustrer le message qu’on veut transmettre. Bref, un paragraphe pour chaque idée et une idée par paragraphe.
Ici, retour à la ligne, avec l’élément <br>
. Espace insécable.
Second paragraphe. Selon la norme typographique adoptée, la première ligne d’un paragraphe peut être en retrait (alinéa rentrant). Sur un document électronique comportant de nombreux paragraphes courts, on évite parfois ce retrait pour le remplacer par une ligne vierge, détachant mieux les paragraphes et les prêtant ainsi mieux à la lecture rapide.
Troisième paragraphe, précédé d’une ligne horizontale de séparation <hr>
. La lecture sur écran est fastidieuse et provoque rapidement de la fatigue oculaire. Il est donc recommandé d’aérer le texte : faire des paragraphes courts et sauter une ligne entre chaque.
Voici une citation ordinaire, avec la balise HTML <blockquote>
, où la source est précisée avec <footer>
:
Mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.
- Rouge tomate, chaud et dynamisant
- Vert sapin, naturel et équilibrant
- Bleu océan, profond et reposant
- Jaune soleil, vif et réjouissant
- Coupez les tomates et la mozzarella en fines tranches ;
- Intercalez les tranches ;
- Arrosez d'un filet d’huile d’olive ;
- Parsemez de basilic fraîchement haché.
- Internet
- Réseau informatique international qui connecte les ordinateurs entre eux, tout comme le réseau routier relie les villes entre elles. Ce réseau propose trois types de services fondamentaux : le courriel, le Web et l’échange de fichiers.
- Web
- Le World Wide Web est le système hypertexte permettant de visiter des pages sur le réseau Internet.
- Rouge
- Orange
- Dans la nature
- Courges
- Citrouille
- Potiron
- Carotte
- Abricot
- Courges
- Objets frabriqués
- Mimolette
- Feu clignotant
- Robe des moines boudhistes
- Dans la nature
- Jaune
- Vert
- Bleu
- Indigo
- Violet
- Premier item
- Deuxième item
- Troisième item
- Quatrième item
- Cinquième item
- Premier
- Deuxième
- Premier
- Deuxième
- Premier
- Deuxième
- Troisième
- Troisième
- Troisième
- Sixième item
- Septième item
- le niveau 1 est une ul
- les éléments d’une liste dans une phrase commencent par une minuscule et se terminent par une virgule, sauf le dernier élément qui, s’il termine la phrase, prend un point.
- Le niveau 2 est une ol
- Avec du texte long, pouvant s’écouler sur plusieurs lignes. Les éléments d’une liste formée de plusieurs phrases se comportent comme des alinéas (majuscule en début, point à la fin).
- Troisième niveau (ul)
- Chat
- Quatrième niveau (ol)
- Kiki la Doucette
- Chien
- Perruche
- Chat
- Troisième niveau
- Troisième niveau
- Troisième niveau (ul)
- deuxième item de niveau 2
- dernier item de niveau 1
Par convention, sur les sites de la DILA les liens externes s’ouvrent dans une nouvelle fenêtre (ou onglet). Ils sont suivis d’une icône spécifique et le title du lien comporte l’intitulé + la mention "- Nouvelle fenêtre".
Les liens de téléchargement doivent comporter soit directement dans le texte, soit dans le title du lien, la mention du format et du poids du document téléchargé.
Lorsqu’elle diffère de la page d’origine, la langue de la cible est renseignée dans l’attribut HTML hreflang=""
.
Les indications contenues dans ce type de bloc (class="sg-comment") sont destinées aux développeurs. Les retirer en production.