Cette page présente un échantillon des éléments HTML, pour tester les enrichissements typographiques possibles d'un document web.
Paragraphes
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.
Deuxième 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.
Marquages sémantiques
<em>
et<strong>
- L'élément d'emphase
<em>
sert à insister sur un texte. L'élément<strong>
sert à donner plus d'importance à un texte. Exemple : l'italique est moins lisible sur écran, il convient d'en user avec parcimonie. <i>
- L'élément
<i>
sert à différencier des mots du texte principal, par exemple des termes techniques, ou des mots dans une langue étrangère, comme les locutions latines non francisées a priori ou modus vivendi. <b>
- L'élément
<b>
sert à distinguer un texte, sans lui apporter une importance particulière. Habituellement utilisé pour les mots-clés dans les résumés, les noms de produits dans des tests, ou encore pour la première phrase d'un paragraphe. <abbr>
⚠et<acronym>
⚠- L'élément
<abbr>
représente une abréviation et permet d'en fournir une description complète. Exemple : le CSS sert à habiller la structure HTML. L'élément<acronym>
représentait une abréviation se prononçant comme un mot normal : y'a-t-il un ovni à l'OuLiPo ? Ce dernier ne doit plus être utilisé mais remplacé par<abbr>
. <dfn>
- L'élément
<dfn>
marque le terme que définit le texte environnant. Par exemple, le courriel est le système de courrier électronique qui nous permet d'envoyer des messages à travers le monde. <del>
et<ins>
- Les éléments
<del>
et<ins>
sont utilisés pour marquer les parties d'un document qui ont étésuppriméesou insérées. Par exemple, un shérif peut employer35 suppléants. <u>
⚠- L'élément
<u>
permet d'afficher un texte souligné. Il s'utilise de façon exceptionnelle, pour signaler un texte mal ortografié ou un nom propre chinois, par exemple : 汉代. Le soulignement est réservé aux hyperliens. <mark>
- L'élément
<mark>
sert à surligner certains mots par rapport au contexte, comme les résultats d'une recherche dans le document ou pour attirer l'attention sur certains mots d'une citation. Pour le même effet visuel, non sémantique, utilisez.mark
. <small>
et<big>
⚠- L'élément
<small>
représente des annotations et des petits caractères comme les mentions légales ou liées au copyright. Comme l'élément<big>
ne se limite qu'à de la présentation formelle, il ne doit plus être utilisé, mais remplacé par le sélecteur CSS.big
. <sub>
et<sup>
- Les éléments
<sub>
et<sup>
marquent les indices et les exposants, par exemple : H2O et E=mc2. Ne pas confondre no et °C. <time>
- L'élément
<time>
représente une heure ou une date précise du calendrier grégorien et pour les rendre interprétables par un ordinateur. Née le et morte le à Londres, Ada Lovelace est considérée commele premier programmeur du monde
.
Astuce : pour obtenir le même effet visuel, mais sans incidence sémantique, utilisez les sélecteurs CSS homonymes : .i
, .b
, .del
, .ins
, .small
, etc.
Autres enrichissements typographiques
Les enrichissements typographiques suivants ne sont pas disponibles nativement en HTML et sont donc proposés en CSS par Tiny Typo :
.quiet
pour du texte discret : Majuscule et CAPITALES.lw
pour passer en minuscules : Majuscule et CAPITALES.up
pour passer en capitales : Majuscule et CAPITALES.sc
pour passer en petites capitales : Majuscule et CAPITALES.caps
pour des capitales avec majuscules : Majuscule et CAPITALES
Ancres et liens
L'hyperlien <a>
est le fondement de la navigation sur le Web. Ceux-ci doivent être visuellement distingués du reste du contenu. Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages. Tiny Typo les signale ainsi :
- Lien interne
.external
: Lien externe.mailto
: Ecrivez-nous !.tel
: +33 1 23 45 67 89.download
: Document à télécharger (PDF – 215 Ko)
Lorsqu'elle diffère de la page d'origine, la langue de la cible est renseignée dans l'attribut HTML hreflang=""
qui s'affiche ainsi :
- Lien interne
.external
: Lien externe.mailto
: Ecrivez-nous !.tel
: +44 20 7946 0886.download
: Document à télécharger (PDF – 215 Ko)
Les liens internes et les liens externes sont différenciés. Lorsqu'elle différe de la page d'origine, mieux vaut spécifier la langue de destination : voici la liste des traductions françaises du W3C et la dernière recommandation HTML 5.1. Pour en savoir plus, lire cet article sur la signalétique des hyperliens.
Ancre de retour en haut de page : #top
Titre de niveau h1
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.
Le chapeau, ici distingué par le sélecteur CSS .lead
, est un texte généralement court, précédant le corps d'un article, et dont le but est d'en encourager la lecture, en résumant le propos qui va être développé.
Titre 1 avec lien et small
Titre 2 avec lien et small
Titre 3 avec lien et small
Titre 4 avec lien et small
Titre 5 avec lien et small
Titre 6 avec lien et small
Ci-dessus, titres avec <a>
et <small>
.
Tailles de texte
La taille du texte est définie en une fois pour l'ensemble du document. Elle s'exprime en unités relatives (em
et %
) afin de permettre aux lecteur/trices de l'agrandir facilement si besoin.
N'utilisez jamais les titres h…
pour afficher un texte plus gros !
- Texte plus gros
avec.biggest
- Texte plus gros
avec.bigger
- Texte plus gros
avec.big
- Texte de base
- Texte plus petit
avec.small
- Texte plus petit
avec.smaller
Il est possible — par exemple lorsque l'habillage graphique ne coïncide pas parfaitement avec la réalité du document HTML — de styler d'autres éléments HTML comme des titres, avec .h1
, .h2
, .h3
, etc. :
Listes
Liste, avec <ul>
:
- Rouge tomate, chaud et dynamisant
- Vert sapin, naturel et équilibrant
- Bleu océan, profond et reposant
- Jaune soleil, vif et réjouissant
Énumération, avec <ol>
:
- 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é.
Liste de définitions, avec <dl>
, <dd>
, <dt>
:
- 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.
Listes hétérogènes
- 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
- Exemple de liste ordinaire
- 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
- Exemple d'énumération
- 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
- Chat
- Felix
- Kiki la Doucette
- Chien
- Perruche
- Chat
- Troisième niveau
- Troisième niveau
- Troisième niveau
- 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.
Tableaux de données
Autrefois employé pour mettre en page, l'élément HTML <table>
n'est pas stylé par défaut. Utilisez systématiquement le sélecteur CSS .table
et les éléments associés — <tbody>
, <thead>
, <tr>
, <td>
, <th>
— pour baliser les tableaux de données. Indiquez un titre via l'élément <caption>
.
entête | R | V | B |
---|---|---|---|
footer | footer | footer | footer |
Rouge | 255 | 0 | 0 |
Vert | 0 | 255 | 0 |
Bleu | 0 | 0 | 255 |
Un tableau présente des données, souvent chiffrées. Les tableaux de données doivent être titrés et les cellules reliées à leurs en-têtes.
Citations, code et poésie
Citations
Les citations s'emploient pour signaler un changement de locuteur/trice dans le texte. Voici une citation ordinaire, avec la balise HTML <blockquote>
, où la source est ici distinguée par .src
:
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.
Tim Berners-Lee, inventeur du Web.
Pour les citations au fil du texte, on utilise la balise HTML <q>
(ci-après avec changement de langue) : Mens sana in corpore sano
, dixième Satire de Juvénal. 頑張ってください
s'exclama-t-il alors.
Web Design is 95% Typography.
Les citations peuvent être imbriquées. Par exemple, le procès-verbal rapporte : La professeur clôtura le dernier atelier en lançant :
Je vous dis à tous et toutes :
.happy holidays!
et أعيادا سعيدة
et j'espère vous retrouver en pleine forme au retour
N'oublions la balise HTML <cite>
⚠, qui signale un titre d'œuvre, par exemple dans une référence bibliographique : Douglas Adams, Le Guide du routard galactique, Paris, Denoël, 1982, 224 pages.
Code
Plusieurs éléments HTML servent à citer des bouts de code informatique :
<code>
:extrait de code
<var>
: variable<samp>
: extrait de script<kbd>
: raccourci-clavier<tt>
⚠ : teletype
L'élément <pre>
matérialise un bloc de texte pré-formaté, par exemple de l'ASCII art :
____ ____ ____ ||p |||r |||e || ||__|||__|||__|| |/__\|/__\|/__\|
Autre exemple, avec du code informatique :
<!doctype html>
<html lang="fr">
<head>
<title>Titre de la page</title>
<link rel="stylesheet" href="css/tinytypo.css">
</head>
<body>
<h1>Ma première page web<h1>
<!-- Le reste du contenu -->
...
</body>
</html>
Contact
Le moyen de contacter les auteur·e·s du document se marque avec <address>
(et non pas pour toute adresse, par exemple postale), typiquement utilisé dans le <footer>
:
Contactez-nous via Github
Alignements et encadrés
Avec Tiny Typo, il est possible d'aligner les blocs et de créer des encadrés, par l'ajout de sélecteurs CSS :
.text-left
: ferre le texte à gauche.text-right
: ferre le texte à droite.text-center
: centre le texte.text-justify
: justifie le texte.box
: encadré
.left
: positionne le bloc à gauche.right
: positionne le bloc à gauche.center
: centre le bloc.p
: marge basse, calée sur la grille, comme les paragraphes
Alignements
Texte justifié avec .text-justify
. Il est possible de justifier le texte, c'est-à-dire que toutes les lignes d'un paragraphe aient la même longueur. Est-ce intéressant de le faire ? D'un point de vue de lisibilité, des études montrent qu'un texte en drapeau est plus accessible à l'œil : l'irrégularité des fins de lignes sert de repère visuel et fatigue moins le lecteur. Pourtant, un alignement justifié donne un résultat esthétique plus agréable et une impression de plus grande régularité.
Texte ferré à gauche avec .text-left
. Il ne faut pas confondre le terme de justification avec l'expression « justifié » à gauche ou à droite souvent employée à tort à la place de « ferré » à gauche ou à droite. Les textes sont par défaut ferrés à gauche et sont par nature, selon la taille de l'écran, sa définition et la taille de la fenêtre dans laquelle le texte apparaît, d'une justification plus ou moins longue.
Texte centré avec .text-center
. Un texte peut être centré sur un axe vertical central. Lorsque vous centrez un texte, pensez à annuler le retrait de première ligne pour le paragraphe concerné, si vous l’utilisez. Pourquoi ? Parce que le texte ne se centre pas entre les marges de la page, mais entre le retrait de première ligne (à gauche) et la marge de droite. Hé oui, c’est la vie.
Texte ferré à droite avec .text-right
. Le terme de « fer » vient de la façon dont le compositeur alignait les lignes sur son composteur en typographie : les lignes étaient alignées sur le « fer » à gauche, sur la partie mobile du composteur, afin de créer un « drapeau » à droite ; elles étaient « ferrées » à droite, sur la partie fixe du composteur, afin de créer un « drapeau » à gauche.
Encadrés
Les encadrés, typiquement <aside>
, sont caractérisés par le sélecteur CSS .box
. Ils peuvent être positionnés avec .left
, .right
et .center
, et ferrés avec les classes précédentes.
Maecenas fringilla dignissim venenatis. Donec ut mi a odio sagittis facilisis. Fusce in risus elit. In quam turpis, elementum et elementum rutrum, dictum quis nibh. Morbi iaculis eros in purus pellentesque accumsan pellentesque sem porttitor. Aliquam erat volutpat. Donec vitae luctus neque.
Connaissez-vous l’histoire de l’inspecteur qui critique dans une classe l'importance que l’instituteur accorde à la ponctuation ? Ce dernier fait alors écrire par une élève au tableau : « L’inspecteur dit : l’instituteur est un âne ». L’inspecteur se récrie. L’instituteur fait alors corriger : « L’inspecteur, dit l’instituteur, est un âne ».
Duis sodales erat et odio imperdiet vitae sodales ligula dapibus. Sed commodo orci a nisi iaculis sit amet mollis ante sagittis. Praesent dapibus ligula eget massa vehicula rhoncus. Vestibulum purus odio, hendrerit nec faucibus vel, commodo eu justo. Sed rhoncus ligula vel velit consectetur pharetra. In pellentesque justo ut libero bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas viverra egestas felis, non vestibulum nibh hendrerit sit amet.
Mauris lacinia, ante id sodales pretium, eros est gravida sapien, nec auctor dolor massa a dui. Vivamus consequat suscipit elit in imperdiet. In consectetur varius tortor, vel dictum ipsum dignissim vel. Nulla faucibus suscipit ipsum non porttitor. Fusce non ante non mi adipiscing faucibus. Sed odio risus, malesuada eget placerat id, semper eget turpis. Cras ante lorem, pretium ut vestibulum nec, vehicula eget orci.
Les règles de typographie fine, que l’on nomme microtypographie dans le langage professionnel des métiers du livre, sont très souvent négligées sur le Web, faute de connaissance suffisante du code typographique
déplorent Marie-Valentine Blond, Olivier Marcellin et Melina Zerbib, dans Lisibilité des sites web : Des choix typographiques au design d’information, 2009, p. 279.
Duis sodales erat et odio imperdiet vitae sodales ligula dapibus. Sed commodo orci a nisi iaculis sit amet mollis ante sagittis. Praesent dapibus ligula eget massa vehicula rhoncus. Vestibulum purus odio, hendrerit nec faucibus vel, commodo eu justo. Sed rhoncus ligula vel velit consectetur pharetra. In pellentesque justo ut libero bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas viverra egestas felis, non vestibulum nibh hendrerit sit amet.
Proin sit amet fringilla ipsum. Aenean pretium, nibh ac luctus tristique, odio nisi tincidunt tortor, quis dignissim sem nulla non neque. Morbi laoreet, neque nec ultrices volutpat, arcu odio pharetra tellus, sed bibendum mi dolor eget augue. Cras varius, mi ut eleifend convallis, diam leo molestie est, vitae feugiat ipsum mauris at ante. Vestibulum eu sapien metus. Pellentesque tincidunt sodales nibh eu adipiscing.
Medias et albums
Les éléments <figure>
et <figcaption>
fonctionnent ensemble pour associer une légende à une image ou autre média. Ces illustrations peuvent être positionnées avec .left
, .right
et .center
.
Paragraphe précédé d'une image centrée. Praesent egestas turpis ut risus lacinia eu cursus urna dapibus. Donec nibh enim, pulvinar vitae ornare ut, ultrices sit amet neque. Quisque ultrices venenatis mi, id fringilla eros malesuada a. Curabitur sagittis mollis arcu, sit amet scelerisque magna varius ac. Vivamus ullamcorper vulputate ipsum, adipiscing varius leo porttitor a. Curabitur luctus gravida nibh, sit amet auctor metus vulputate quis. Aliquam eu nulla risus. Cras in suscipit odio. Etiam ut nisl ut velit ornare pharetra a sed lacus.
Paragraphe précédé d'une image calée à gauche. Connaissez-vous les Font Cats ? Prenez un chat, une typo et mariez-les, vous obtenez les Chats-Typographiques, un moyen comme un autre de se souvenir de quelques fontes les plus connues grâce à la photo du chat qui lui correspond.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel lectus eget tortor cursus dapibus sit amet imperdiet lacus. Nullam purus ipsum, aliquet eget imperdiet scelerisque, interdum in felis. Maecenas dolor eros, iaculis et pretium ac, eleifend sit amet lacus. Etiam a lacus eget dui aliquet tempor. Duis dapibus magna dictum enim ultrices ac pharetra lacus convallis. Donec felis ipsum, tristique ornare fermentum quis, fringilla nec arcu. Nunc tortor arcu, fermentum in dictum sit amet, aliquam eu ante. Integer volutpat, erat cursus posuere rutrum, erat tellus varius erat, quis tempus eros risus a lacus.
Paragraphe précédé d'une image calée à droite. Duis sodales erat et odio imperdiet vitae sodales ligula dapibus. Sed commodo orci a nisi iaculis sit amet mollis ante sagittis. Praesent dapibus ligula eget massa vehicula rhoncus. Vestibulum purus odio, hendrerit nec faucibus vel, commodo eu justo. Sed rhoncus ligula vel velit consectetur pharetra. In pellentesque justo ut libero bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas viverra egestas felis, non vestibulum nibh hendrerit sit amet.
Album
Il est possible de regrouper plusieurs images pour constituer un album, avec .album
.
Proin sit amet fringilla ipsum. Aenean pretium, nibh ac luctus tristique, odio nisi tincidunt tortor, quis dignissim sem nulla non neque. Morbi laoreet, neque nec ultrices volutpat, arcu odio pharetra tellus, sed bibendum mi dolor eget augue. Cras varius, mi ut eleifend convallis, diam leo molestie est, vitae feugiat ipsum mauris at ante. Vestibulum eu sapien metus. Pellentesque tincidunt sodales nibh eu adipiscing.
Effets de style
Avec Tiny Typo, les images peuvent recevoir des effets de style, avec .shadow
et .border
et leurs angles peuvent être arrondis avec .round
et .circle
.
Les vignettes sont distinguées par la classe .thumb
, par défaut sans effet.
Familles de fontes
Les pangrammes suivants, qui contiennent toutes les lettres de l'alphabet, ainsi que les caractères accentués, cédille et ligatures, permettent de visualiser le rendu de chaque famille de fontes.
Fonte 1, avec .font1
: agh! iIl1 0O
Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Fonte 2, avec .font2
: agh! iIl1 0O
Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Fonte 3, avec .font3
: agh! iIl1 0O
Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Fonte 4, avec .font4
: agh! iIl1 0O
Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.