71 lines
3.4 KiB
Plaintext
71 lines
3.4 KiB
Plaintext
---
|
|
title: Découverte des balises HTML courantes pour structurer une page web
|
|
description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web.
|
|
tags: []
|
|
---
|
|
|
|
import Callout from "@/components/Callout";
|
|
import tabs from "./tabs";
|
|
|
|
Dans l'article précédent, nous avons exploré la balise `<head>` et son rôle important dans une page HTML.
|
|
Maintenant, concentrons-nous sur les balises situées dans le corps de la page, c'est-à-dire dans la balise `<body>`.
|
|
|
|
## 🏗️ La balise \<body\>
|
|
|
|
La balise `<body>` est l'endroit où se trouve tout le contenu visible de la page... ou presque !
|
|
Elle contient tous les éléments que l'utilisateur peut voir et interagir avec, comme le texte, les images, les liens, etc.
|
|
|
|
Voici un exemple de code HTML simple avec la balise `<body>` :
|
|
|
|
<tabs.htmlBasicBody />
|
|
|
|
On peut voir que la balise `<body>` contient plusieurs éléments :
|
|
- `<h1>` : Un titre de premier niveau.
|
|
- `<p>` : Un paragraphe de texte.
|
|
- `<img>` : Une image.
|
|
- `<a>` : Un lien hypertexte.
|
|
|
|
Mais on y reviendra un peu après !
|
|
|
|
## 📝 Balises de textes et mise en forme
|
|
|
|
### 1. Titres et sous-titres
|
|
|
|
Les titres et les sous-titres sont des éléments importants _(pour ne pas dire essentiels)_ pour structurer le contenu d'une page web.
|
|
Le langage HTML fournit six niveaux de titres, du plus important au moins important :
|
|
|
|
- `<h1>` : Titre de premier niveau _(le plus important)_.
|
|
- `<h2>` : Titre de deuxième niveau.
|
|
- `<h3>` : Titre de troisième niveau.
|
|
- `<h4>` : Titre de quatrième niveau.
|
|
- `<h5>` : Titre de cinquième niveau.
|
|
- `<h6>` : Titre de sixième niveau _(le moins important)_.
|
|
|
|
Il est important de prendre en compte plusieurs éléments lors de l'utilisation des titres :
|
|
|
|
- **Accessibilité** : Les titres aident les lecteurs d'écran à comprendre la structure de la page.
|
|
- **SEO** : Les moteurs de recherche utilisent les titres pour comprendre le contenu de la page.
|
|
- **Lisibilité** : Les titres aident les utilisateurs à parcourir rapidement le contenu de la page.
|
|
- **Sémantique** : Les titres donnent du sens au contenu et aident à organiser l'information.
|
|
|
|
<Callout type="warning" title="Styles par défaut des titres et sous-titres">
|
|
La plupart du temps _(selon le navigateur)_, les titres sont affichés avec une taille de police plus grande que le texte normal.
|
|
|
|
Il est donc important de ne pas utiliser les balises de titres uniquement pour changer la taille du texte.
|
|
Si ton titre est le titre principal de la page, utilise la balise `<h1>` et applique-lui un style CSS pour le personnaliser.
|
|
</Callout>
|
|
|
|
Il est recommandé d'utiliser une seule balise `<h1>` par page pour le titre principal.
|
|
Ni plus, ni moins !
|
|
|
|
En revanche, tu peux utiliser plusieurs balises `<h2>`, `<h3>`, etc. pour les sous-titres.
|
|
|
|
Les balises `<h2>` jusqu'à `<h6>` sont utilisées pour les sous-titres et les titres de sections.
|
|
Elles permettent de structurer le contenu de la page et de créer une hiérarchie d'information.
|
|
|
|
<Callout type="warning" title="Hierarchie des titres">
|
|
Il est préférable d'utiliser une balise `<h2>` pour un sous-titre qui suit un `<h1>`, et de ne pas sauter directement à un `<h3>` ou `<h4>`.
|
|
Cependant, tu peux totalement passer d'un `<h6>` à un `<h2>` si tu le souhaites et que ça a du sens pour toi !
|
|
|
|
Il est important de respecter cette hiérarchie pour que le contenu soit facilement compréhensible par les utilisateurs et les moteurs de recherche.
|
|
</Callout> |