La philosophie du HTML

En créant un blog dans le guide précédent, nous avons vu une bonne pratique : préparer des styles réutilisables, avec la classe article et la classe special, a permis de développer le site plus facilement en renforçant la cohérence visuelle.

De manière générale, en informatique, les bonnes pratiques permettent d’écrire du code plus facile à lire et à modifier sur le long-terme. C’est très utile pour ne pas s’emmêler les pinceaux, surtout si tu fais un site qui contient plusieurs pages ! Pour adopter les bonnes pratiques, il faut bien comprendre la séparation des rôles entre le HTML et le CSS.

Voici le schéma d’une page simple. Le HTML sert à lister les éléments de la page et comment ils sont imbriqués. Le CSS positionne et met en forme ces éléments pour aider le visiteur à comprendre la structure de la page. Grâce aux marges et au padding, on comprend que le <h1> est séparé du reste, et que les paragraphes font partie du bloc <div>.

Éléments de bloc et inline

Il existe de nombreux éléments de bloc, dont les titres, les paragraphes, ainsi que <div>, le conteneur générique. Les éléments de bloc s’empilent verticalement, les uns sous les autres. Mais tous les éléments ne sont pas des blocs ! La deuxième grande famille, les éléments en ligne (inline), se positionnent sur la même ligne que le contenu précédent.

Tu connais déjà deux éléments inline : <em> pour l’emphase en italique et <strong> pour le gras. Il existe également <span>, le conteneur générique inline. C’est comme une <div>, mais pour appliquer le style de ton choix à une partie du texte.

<p>Les éléments inline <span style="color: red"> s'insèrent au fil du texte et peuvent revenir à la ligne</span>, mais ils ne créent pas un nouveau bloc.</p>

La sémantique des éléments

Les éléments génériques <span> et <div> sont neutres et permettent de partir de zéro dans ton style, mais il serait tout à fait possible de changer le style de <em>, qui est en italique par défaut, pour le remplacer par la couleur rouge. L’important est de respecter la valeur sémantique de l’élément, autrement dit sa signification. Quelque soit ta personnalisation, <em> devrait toujours correspondre à l’emphase. De la même manière, la balise <strong> correspond à un contenu important ou urgent. Le style est en gras par défaut, mais tu peux le remplacer par autre chose.

Dans la première version de HTML, il existait uniquement les balises <i> pour l’italique et <b> pour le gras. Les balises <em> et <strong> ont été ajoutées plus tard pour apporter une valeur sémantique plus précise. Le HTML moderne comporte aussi de nombreux blocs qui n’ont aucun style par défaut, mais dont le nom permet de comprendre le rôle de l’élément dans la page : <article>, <header>, <main>, <nav>, etc. Ces éléments ne sont pas obligatoires, mais ils peuvent apporter de la clarté à ton code HTML. De plus, cela aide les robots et les logiciels de lecture à comprendre le contenu de ta page.

La séparation des rôles

En résumé, le HTML moderne a un rôle purement sémantique. Il décrit la signification des éléments de la page et leurs relations via les imbrications. On pourrait comprendre un document HTML juste en le lisant :

Sur cette page, il y a un menu de navigation (<nav>), puis un article (<article>) qui contient des sous-titres, des paragraphes, des images…

Le CSS a pour but de donner un style visuel aux éléments, mais aussi de les placer sur la page :

Le menu de navigation est sur la gauche, tandis que l’article est à droite.

Le CSS peut aussi s’adapter aux tailles d’écran, pour placer les éléments différemment sur téléphone :

Sur mobile, le menu de navigation est caché. Un bouton apparaît dans un coin de l’écran pour accéder au menu.

Lorsque le CSS n’existait pas encore, le HTML devait permettre de créer des mises en pages basiques, avec des balises comme <i> et <b>, ou encore le centrage du texte par exemple. Progressivement, les sites sont devenus plus complexes, et l’arrivée du CSS a permis de séparer les rôles : la sémantique pour le HTML et la mise en page pour le CSS. C’est pourquoi les éléments modernes comme <nav> et <article> sont apparus. Il est toujours courant d’utiliser les conteneurs génériques <div> et <span>, mais on préfère utiliser les éléments porteurs de sens quand ils sont applicables.