Structuration de texte

Niveaux de titre

Bonnes pratiques :

Le document doit respecter la hiérarchie des titres (pas de h2 sans ou avant un h1 précédant).
Eviter de dépasser le niveau 3 (la structure du document devient trop complexe au delà)
Limiter à un h1 par page, pour faciliter le référencement

Ils sont définis au travers des balises h1, h2…

<h1>Niveaux de titre</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Paragraphes

Balise p

Un paragraphe est un bloc de texte, éventuellement sur plusieurs lignes, dont les lignes vont s'ajuster automatiquement en fonction de la largeur du conteneur.

<p>Lorem ipsum dolor sit amet. Hic Quis cupiditate est neque 
    esse non maxime dolor vel voluptate dolorem ad totam galisum et suscipit adipisci. 
    Ut facere laudantium non quaerat exercitationem sed voluptatem minima cum laborum itaque et officia officiis. 
    Eum quasi dolores aut possimus minima et praesentium reiciendis aut provident corrupti et accusantium galisum! 
</p>

Les sauts de lignes passés dans le code n'ont aucune influence sur le document HTML produit.

Sauts de ligne forcés

La balise br est une balise orpheline permettant de forcer le passage à la ligne d'une partie du texte, sans quitter le paragraphe.
Elle ne doit pas être utilisée pour modifier la présentation du texte, mais sa structure.

Mise en avant

Emphase

Pour mettre l'accent sur une partie du texte, utiliser la balise em :

<p>Scaleway est un hébergeur web aux <em>pratiques douteuses</em>.</p>

Accentuation

Pour insister sur une partie du texte, utiliser la balise strong :

<p>Il est important de lire les <strong>conditions générales de vente</strong>.</p>

La présentation des parties mises en avant avec em et strong pourra ensuite être adaptée avec la feuille de style associée.
Eviter l'usage des anciennes balises b, i, u permettant de mettre respectivement en gras, italique, souligné.

Listes

Liste non ordonnée

Unordered List ⇒ ul

<ul>
    <li>1er élément</li>
    <li>2ème élément</li>
    <li>3ème élément</li>
</ul>

Liste ordonnée

Ordered List ⇒ ol

<ol>
    <li>Elément A</li>
    <li>Elément B</li>
    <li>Elément C</li>
</ol>

Imbrication de listes

<ul>
    <li>1er élément
        <ul>
            <li>elm 1.a</li>
            <li>elm 1.b</li>
        </ul>
    </li>
    <li>2ème élément
        <ul>
            <li>elm 2.a</li>
            <li>elm 2.b</li>
        </ul>
    </li>
</ul>

div et span

Ce sont 2 balises non sémantiques sans vocation particulière autre que celle de cibler des parties de documents, de façon à leur appliquer un style et une mise en forme.

La balise div est de type block et permet de créer une zone regroupant d'autres éléments (paragraphes, autres div…).
La balise span est inline et permet de cibler une zone particulière de texte.

<div>
    <p>Ah ouais, la blague de développeur elle est… spéciale !</p>
    <p>C’est l’histoire d’un administrateur qui configure ses variables d’environnement, et là……… <span>PATH le chemin !</span></p>
    <p>Un développeur comme les autres… <span>Mais sûrement un dev J2E</span> !</p>
</div>

Pour aller plus loin : HTML sémantique