HTML-CSS: Les éléments Heading, Paragraph et Break

Le HTML sert à différencier d’un point de vue sémantique les différents objets que l’on peut rencontrer et dont on peut avoir besoin (titre, paragraphe, espace, image, etc.).

Pour faire cela, le HTML va utiliser des éléments. Et le moment est arrivé pour nous d’apprendre à créer des paragraphes, des titres, et à faire des retours à la lignes en HTML.

Pour créer des paragraphes, tout d’abord, on va utiliser l’élément p. On peut créer autant de paragraphes que l’on souhaite dans une page. Pour chaque nouveau paragraphe, il faut rouvrir une balise <p>. A chaque nouveau paragraphe, un retour à la ligne est automatiquement effectué.

Si maintenant vous désirez créer un retour à la ligne à l’intérieur même d’un paragraphe, il faudra utiliser l’élément br (diminutif de break).

Cet élément est constitué d’une seule balise orpheline, qu’on notera donc <br />.

Pour créer des titres, on va utiliser les éléments h1, h2, h3, h4, h5 et h6 pour créer des titres de diverses importances. Ainsi, un titre h1 sera considéré comme un titre très important tandis qu’un titre h6 sera considéré comme très peu important.

Voilà ce que ça donne en image :

Les titres apparaissent en gras et ont des tailles différentes selon leur degré d’importance. Et c’est précisément là où j’en reviens à mon premier point : vous ne devez JAMAIS utiliser le langage HTML pour mettre en forme le contenu.

Ce que vous voyez n’est qu’une mise en forme automatique faîte par votre navigateur, une interprétation visuelle de ce que vous avez donné à votre navigateur. Cependant, vous ne devez jamais utiliser un titre de niveau h1 pour mettre un texte en gros et en gras.

Le résultat d’une interprétation et n’est qu’une mise en forme automatique. Le CSS permet de faire réellement tout ce que l’on désire d’un point de vue visuel : créer des styles tout comme enlever des styles automatiques.

Les éléments Strong, Emphasis et Mark

L’élément strong est utilisé pour indiquer aux moteurs de recherche qu’un contenu est particulièrement important, afin que celui-ci soit traité avec plus d’importance. Le résultat visuel est une mise en forme automatique en gras. Mais encore une fois, on n’utilise pas l’élément strong pour mettre un texte en gras !

L’élément em, pour emphasis (« emphase » en français) est proche de l’élément strong. Il sert lui aussi à signifier qu’un contenu est important, mais moins important tout de même qu’un contenu entre des balises strong.

L’intérêt de ces éléments, il est avant tout dans l’optimisation du référencement du site. En effet, normalement, vous devriez avoir ciblé des mots clefs et essayer d’être bien référencé sur ces mots là. Les balises strong et em vous aident à atteindre ce but, entre autres.

Enfin, l’élément mark est utilisé pour faire ressortir du contenu. Ce contenu ne sera pas forcément considéré comme important, mais cette balise peut servir dans le cas de l’affichage de résultats suite à une recherche d’un de vos visiteurs par exemple.

Listes ordonnées et non-ordonnées

Les listes servent à ordonner du contenu, à lui donner un ordre cohérent.

Visuellement, les listes en HTML correspondent à ce que vous créez lorsque vous utilisez des puces dans un document LibreOffice :

• Élément numéro 1
• Élément numéro 2
• Élément numéro 3

En HTML, les listes vont avoir deux grands intérêts : on va pouvoir les utiliser pour créer des menus ou, dans leur forme brute, pour mieux présenter du contenu pour un blog par exemple.

Il existe trois grands types de listes en HTML : les listes ordonnées, les listes non-ordonnées et un dernier type un peu particulier : les listes de définition. Nous allons commencer avec les listes ordonnées et non-ordonnées.

La différence entre les listes ordonnées et non-ordonnées est que les listes ordonnées possèdent un aspect de subordination, d’ordre logique, de classement tandis que ce n’est pas le cas pour les listes non-ordonnées.

Pour créer une liste non-ordonnée, on va avoir besoin de deux nouveaux éléments : l’élément ul (abréviation de unordered list), qui va contenir toute la liste et l’élément li (pour list item) que l’on va utiliser pour créer chaque élément de la liste.

Dans l’exemple précédent, les différents éléments de la liste n’ont pas de cohérence entre eux et on ne peux donc pas les classer, les ordonner (sans contexte du moins). C’est pourquoi on a utilisé une liste non-ordonnée.

Pour créer une liste ordonnée maintenant, nous allons simplement remplacer l’élément ul par l’élément ol (pour ordered list).

Cette fois-ci, il y a une relation de subordination, un ordre logique et naturel entre les éléments de la liste (on met généralement l’introduction avant la conclusion) ; on utilise donc une liste ordonnée.

Les Listes de définitions

Dernier grand type de listes que nous allons voir ensemble, les listes de définition son utilisées pour définir des termes.

Pour créer une liste de définition, il va nous falloir utiliser l’élément dl (pour definition list), l’élément dt (pour definition term) et l’élément dd pour la définition en soi.

Il n’y a qu’une règle à respecter lorsque l’on crée une liste de définitions : vous devez toujours placer l’élément dt avant l’élément dd, c’est-à-dire le terme à définir avant sa définition. Cela est assez intuitif et ne devrait donc pas vous poser de problème.

En revanche, il est tout à fait possible d’associer plusieurs termes à une définition ou même plusieurs définitions à un même terme.

Les Listes imbriquées

HTML nous offre la possibilité d’imbriquer les listes les unes dans les autres très simplement.

Pour imbriquer des listes, il suffit de commencer une liste, puis d’en ouvrir une seconde à l’intérieur d’un élément de la première (on peut évidemment imbriquer plus de deux listes en répétant le même processus).

Voici une illustration, en imbriquant par exemple une liste non-ordonnée à l’intérieur d’une liste ordonnée :

Comme vous le voyez, si on n’oublie pas d’élément, les listes restent très simples à utiliser et à manipuler. J’espère que vous comprenez mieux désormais l’importance de bien indenter son code !