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ées ou insérées. Par exemple, un shérif peut employer 35 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 : H₂O et E=mc². Ne pas confondre n^o 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 10 décembre 1815 et morte le 27 novembre 1852 à Londres, Ada Lovelace est considérée comme le 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.