Les titres servent à structurer le contenu d’une page. Plus la hiérarchie est élevée (p. ex. H1), plus le titre est important et il sera pondéré en conséquence par les moteurs de recherche (p. ex. Google). En général, il convient de ne pas utiliser trop de niveaux hiérarchiques, car la clarté pourrait en pâtir. Les hiérarchies de titres H1 à H4 se démarquent les unes des autres en termes de design (les hiérarchies H5 et H6 ont seulement été définies pour la forme).
Les titres peuvent également être munis de liens. Ils seront alors affichés en bleu.
Accessibilité
Les personnes possédant une vue normale reconnaissent les titres et la structure d’une page à l’aide de la taille et de l’emphase de la police. Tel n’est pas le cas chez les personnes malvoyantes. Elles (ou les lecteurs d’écran) reçoivent ces informations des balises h1 à h6 correspondantes. Il convient donc de les utiliser pour la pondération et non pour une mise en évidence d’ordre graphique.
Au début d’un texte plus long, on peut placer un lead qui résume les aspects les plus importants du texte. La police sera mise en gras.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum
mollis mauris enim. Morbi euismod magna ac lorem.
Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet.</p>
<p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum
mollis mauris enim. Morbi euismod magna ac lorem.</p>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.</p>
La taille de police, la longueur et l’espacement des lignes du corps de texte sont optimisés pour une lisibilité optimale. Les citations sont mises en italique. Les liens dans le corps de texte sont soulignés. Cependant, il convient de les utiliser avec parcimonie. Il est préférable de placer les liens à la fin d’un paragraphe.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet.
<p>
Lorem ipsum dolor sit amet, <cite>consectetur adipisicing elit</cite>. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, <a href="#">architecto fugit eveniet</a>.
</p>
Les listes sont utilisées pour représenter des contenus de manière structurée et pour permettre à l’utilisateur d’obtenir un aperçu rapide d’un sujet. Les listes suivantes sont utilisées:
ajout de l'attribut title="External link" sur les liens externes
Par défaut, les liens sont bleus et le texte n’est pas souligné. Lorsque la souris passe sur un lien (mouseover), il devient souligné. Les liens sur lesquels on a déjà cliqué deviennent violets.
On dévie de cette règle dans deux cas:
dans le cas d’un lien situé dans le corps de texte, le texte muni du lien est souligné. Les liens situés dans un élément de navigation (p. ex. dans la navigation globale) ne sont pas bleu, mais gris. L’apparence et le comportement de ces liens spéciaux sont décrits séparément aux endroits appropriés dans les présentes lignes directrices pour le design web.
Les classes .icon permettent d’ajouter une icône avant ou après le lien (classe .icon--external pour les liens externes).
Le lien vers le haut de page (top-link) est la contrepartie du lien d’ancre: il ramène les utilisateurs de n’importe quelle position de la page vers le haut de la page.
Le lien situé en fin de page est un top-link spécial. Chaque page (à l’exception de la page d’accueil et des pages de niveau 1) se termine par un tel lien de fin de page. Il comporte un lien vers le haut de la page actuelle ainsi que la date de la dernière mise à jour des contenus de cette page.
