Les titres et les paragraphes en HTML

Dans cette leçon et dans les suivantes nous allons étudier quelques-uns des éléments HTML les plus utiles et les plus utilisés. Cela va également nous permettre de bien nous familiariser avec la syntaxe du HTML grâce à des exemples d’application.

Dans cette leçon, nous allons en particulier nous concentrer sur la définition de titres et de paragraphes en HTML.

 

Pourquoi différencier titres et paragraphes en HTML ?

Une nouvelle fois, rappelez-vous que le HTML est un langage de balisage.

Le seul et unique rôle du HTML est de nous permettre de créer un document structuré en différenciant d’un point de vue sémantique les différents éléments d’une page.

Utiliser les bons éléments HTML pour définir précisément les différents contenus de nos pages va permettre aux navigateurs (et aux moteurs de recherche) de comprendre de quoi et comment est composée notre page et donc de l’afficher et de la référencer au mieux.

Or, les titres font partie des éléments auxquels les moteurs de recherche, entre autres, vont apporter une grande importance pour comprendre le sujet de notre page. En effet, Google par exemple va se servir des contenus définis comme titres pour comprendre de quoi notre page traite en y accordant plus d’importance qu’aux contenus définis comme des paragraphes.

 

Définition de titres en HTML

Il existe six niveaux hiérarchiques de titres (“heading” en anglais) définis par les éléments h1, h2, h3, h4, h5 et h6 qui vont nous permettre d’organiser le contenu dans nos pages.

Bon à savoir : « h » signifie « heading », soit l’équivalent du mot « titre » en français. Les éléments en HTML portent souvent l’initiale de ce qu’ils représentent, en anglais.

L’élément h1 représente un titre principal dans notre page ou dans une section de page et, à ce titre, nous n’allons pouvoir utiliser qu’un seul élément h1 par page (ou par section de page, nous reviendrons sur ce concept plus tard).

Ici, je tiens d’ores-et-déjà à attirer votre attention sur un point : si vous déclarez plusieurs titres h1 dans votre page, ceux-ci s’afficheront bien : il n’y aura aucun blocage au niveau de l’éditeur ou du navigateur. Cependant, rappelez-vous une nouvelle fois que le HTML est un langage de sémantique et que sa bonne utilisation repose donc sur des règles et un ensemble de bonnes pratiques.

Dans le cas présent, utiliser plusieurs h1 serait aberrant car le h1 est censé représenter le titre principal de la page.

En revanche, nous allons pouvoir utiliser autant de titres de niveau h2, h3 etc. que l’on souhaite dans notre page. Théoriquement, si nos pages sont bien construites, nous ne devrions que rarement dépasser le niveau de titre h3.

See the Pen Cours HTML CSS 2.5.1 by Pierre (@pierregiraud) on CodePen.

Comme vous pouvez le voir, le navigateur comprend bien qu’il s’agit de titres d’importances diverses et les traite donc différemment par défaut, en leur attribuant une mise en forme différente (très grand et très gras pour un titre de niveau h1, puis de plus en plus petit jusqu’à h6).

Encore une fois, n’utilisez pas un élément de type h* pour écrire un texte en grand et en gras ! Utilisez le pour définir un titre dans votre page. Nous nous chargerons de la mise en forme du contenu plus tard, grâce au CSS.

Note : Il convient de ne pas confondre les éléments h* et l’élément title : l’élément title sert à donner un titre A notre page tandis que les éléments h* servent à définir des titres DANS notre page, c’est-à-dire à hiérarchiser et à organiser le contenu de notre page.

 

Définition de paragraphes en HTML

Pour créer des paragraphes en HTML, nous allons utiliser l’élément p.

On peut créer autant de paragraphes que l’on souhaite dans une page. A chaque nouveau paragraphe, il faut utiliser un nouvel élément p.

Pour chaque nouveau paragraphe, un retour à la ligne va être créé automatiquement et affiché par votre navigateur (exactement comme c’était le cas avec les titres).

See the Pen Cours HTML CSS 2.5.2 by Pierre (@pierregiraud) on CodePen.