5. Titres et Paragraphes¶
Maintenant que vous savez tout sur les règles du html, nous allons apprendre le vocabulaire nécessaire pour coder.
Rappel sur l'importance de la sémantique : Comme je vous l'ai dit plus tôt, la sémantique est très importante en HTML. C'est à dire qu'il faut nommer les éléments par leur nom, et utiliser les bonnes balises. C'est pourquoi les prochains cours sont axés sur les différentes balises qui existent et ce qu'elles veulent dire.
Les balises titres¶
Le titre de votre page est la balise <h1> :
Il existe 6 niveaux de titre, allant de <h1> (titre de la page) à <h6>. La balise <h1> étant plus importante que la balise <h2> et ainsi de suite. Chaque page web peut contenir <h1> un ou plusieurs titres de <h2> à <h6>.
<!-- Titre de niveau 1 -->
<h1>
Le titre de ma page
</h1>
<!-- Titre de niveau 2 -->
<h2>
Sous-titre
</h2>
<!-- Titre de niveau 3 -->
<h3>
Sous-sous-titre
</h3>
<!-- Titre de niveau 4 -->
<h4>
Sous-sous-sous-titre
</h4>
<!-- Titre de niveau 5 -->
<h5>
Sous-sous-sous-sous-titre
</h5>
<!-- Titre de niveau 6 -->
<h6>
Sous-sous-sous-sous-sous-titre
</h6>
Le titre de ma page
Sous-titre
Sous-sous-titre
Sous-sous-sous-titre
Sous-sous-sous-sous-titre
Sous-sous-sous-sous-sous-titre
Notez
Bien qu'il soit permis par le standard HTML d'utiliser plusieurs éléments <h1> sur une même page tant que ceux-ci ne sont pas imbriqués, cela est considéré comme une mauvaise pratique. Une page devrait généralement avoir un seul élément <h1> qui décrit le contenu de la page (semblable à l'élément <title>).
La balise paragraphe¶
Nous allons commencer par les balises les plus utilisées, celles qui définissent un paragraphe : <p>.
Si vous avez plusieurs paragraphes, vous pouvez les faire suivre :
<p>
Un super paragraphe de texte pas très long.
</p>
<p>
Un super paragraphe de texte un peu plus long, mais pas de beaucoup.
</p>
Un super paragraphe de texte pas très long.
Un super paragraphe de texte un peu plus long, mais pas de beaucoup.
Les sauts de ligne¶
L'espace entre deux paragraphes est important. Si vous souhaitez n'avoir qu'un simple retour à la ligne, il faut utiliser la balise <br> :
<p>
Un super paragraphe de texte pas très long.<br>
Un super paragraphe de texte un peu plus long, mais pas de beaucoup.
</p>
Un super paragraphe de texte pas très long.
Un super paragraphe de texte un peu plus long, mais pas de beaucoup.
La balise <strong>¶
Cette balise est une balise de type inline. Vous pouvez donc l'utiliser dans une balise comme <p>, <li> par exemple.
En plus de mettre en valeur son contenu pour les moteurs de recherche, elle le fait aussi pour les internautes en le mettant en gras :
Un super paragraphe avec du texte en gras.
La balise <em>¶
Cette balise a les mêmes propriétés que la balise <strong> : elle est de type inline et permet de mettre en avant du contenu, mais dont la priorité est moindre que celui compris dans les balises <strong>.
Elle aussi fait ressortir le contenu pour les internautes en le mettant en italique :
Un super paragraphe avec du texte en italique.
Une page d'exemple¶
Le code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Roger, maître du HTML et dresseur de Pokémon</title>
</head>
<body>
<h1>Roger, maître du HTML et dresseur de Pokémon</h1>
<h2>Présentation</h2>
<p>Bonjour et bienvenue sur mon site. Je m'appelle Roger et je suis désormais un maître de niveau 99 en HTML.</p>
<h3>Mes Pokémon</h3>
<p>Je collectionne les Pokémon avec l'application <strong>Pokémon GO</strong>. C'est mon jeu préféré, j'adore.</p>
<h4>Mes autres passions</h4>
<p>Après <strong>Pokémon GO</strong>, mon autre passion est le football.<br>
Je supporte l'équipe de Dunkerque et je rêve de voir <em>mon équipe préférée écraser le PSG</em>.</p>
<p>Si je ne joue pas à Pokémon GO et que je ne regarde pas un match de football de Dunkerque, j'écoute du Céline Dion.</p>
</body>
</html>
Le rendu de la page :
-
Il est temps de faire vos premiers pas de développer HTML. Exercice 1