Titres HTML
Le titre est un en-tête placé au début d'une page ou d'une section d'un livre. Il est très important d'utiliser différents types de titres pour structurer le contenu d'une page web. Les titres aident les moteurs de recherche à comprendre et à indexer la structure de la page web.
Balises de titre
Il existe 6 niveaux de titres en HTML : <h1>, <h2>, <h3>, <h4>, <h5> et <h6>.
Les balises <h1> à <h6> sont utilisées pour marquer les titres en fonction de leur importance. La balise <h1> représente le titre le plus important de la page web, tandis que <h6> représente le moins important et le plus petit.
Exemple des balises de titre HTML <h1> - <h6> :
Comment utiliser les balises HTML <h1>-<h6> ?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Importance des titres
- Les titres HTML mettent en évidence les sujets importants et la structure du document, améliorant ainsi l'engagement des utilisateurs.
- Utilisez une seule balise
<h1>sur chaque page web. Cette balise doit décrire le contenu de votre page et contenir un mot-clé pour améliorer le classement sur Google. - Les moteurs de recherche utilisent les titres pour indexer la structure et le contenu de la page web.
Taille des titres
Vous pouvez modifier la taille par défaut des titres. Définissez la taille de n'importe quel titre avec la propriété CSS font-size :
Exemple de modification de la taille du titre avec la propriété font-size :
Comment styliser une balise HTML <h1> à l'aide de la propriété CSS font-size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>Notes importantes
- N'utilisez pas les balises de titre pour augmenter la taille du texte ou le mettre en gras. Utilisez plutôt des propriétés CSS comme font-weight et font-size. Rappelez-vous que les moteurs de recherche utilisent les titres pour structurer le contenu.
- Ne sautez pas les niveaux de titre. Utilisez
<h1>comme titre principal de la page web, suivi des titres<h2>, puis des titres<h3>moins importants, etc. - Évitez d'utiliser
<h1>plus d'une fois sur une page.
Règles horizontales HTML
La balise <hr> définit un changement thématique entre des éléments de niveau paragraphe dans une page HTML. L'élément <hr> est utilisé pour séparer le contenu dans une page HTML :
Exemple de titres séparés par l'élément <hr> :
Exemple d'élément HTML <hr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>Lorem ipsum is simply dummy text...</p>
<hr />
<h2>This is heading 2</h2>
<p>Lorem ipsum is simply dummy text...</p>
<hr />
<h3>This is heading 2</h3>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Élément head HTML
L'élément HTML <head> contient des métadonnées (titre du document, jeu de caractères, styles, liens, scripts), des informations spécifiques sur la page web qui ne sont pas affichées à l'utilisateur.
Les métadonnées fournissent aux navigateurs et aux moteurs de recherche des informations techniques sur la page web.
Exemple d'utilisation de l'élément <head> :
Exemple d'élément HTML <head>
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<p>HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>Qu'est-ce qu'un en-tête ?
Ne confondez pas la balise HTML header avec une balise de titre HTML (heading), car les en-têtes (headers) sont des blocs de texte qui se répètent en haut de la page. Un titre (heading) est un titre ou un sous-titre affiché sur la page web.
Pratique
Parmi les affirmations suivantes, lesquelles sont vraies concernant les titres HTML ?