feat(doc): add HTML body tags documentation
This commit is contained in:
parent
5258ffdbca
commit
5af2d66810
@ -5,4 +5,67 @@ tags: []
|
|||||||
---
|
---
|
||||||
|
|
||||||
import Callout from "@/components/Callout";
|
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>
|
||||||
24
app/pages/docs/html/balises-de-base/tabs.tsx
Normal file
24
app/pages/docs/html/balises-de-base/tabs.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { Snippet } from "@/components/Snippet";
|
||||||
|
|
||||||
|
const htmlBasicBodySnippets = [
|
||||||
|
{
|
||||||
|
name: "Exemple de la balise body",
|
||||||
|
codeLanguage: "html",
|
||||||
|
withLineNumbers: true,
|
||||||
|
code: `<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head></head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Bienvenue sur mon site !</h1>
|
||||||
|
<p>Ceci est un exemple de page HTML.</p>
|
||||||
|
<img src="image.jpg" alt="Une image d'exemple">
|
||||||
|
<a href="https://www.example.com">Visitez notre site</a>
|
||||||
|
</body>
|
||||||
|
</html>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
htmlBasicBody: () => <Snippet snippets={htmlBasicBodySnippets} />,
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user