From 5af2d668106782f836eaa2fbe04ebc6490dbf57c Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Tue, 13 May 2025 14:20:56 +0200 Subject: [PATCH] feat(doc): add HTML body tags documentation --- app/pages/docs/html/balises-de-base/+Page.mdx | 63 +++++++++++++++++++ app/pages/docs/html/balises-de-base/tabs.tsx | 24 +++++++ 2 files changed, 87 insertions(+) create mode 100644 app/pages/docs/html/balises-de-base/tabs.tsx diff --git a/app/pages/docs/html/balises-de-base/+Page.mdx b/app/pages/docs/html/balises-de-base/+Page.mdx index 8fdf6d2..dca2cc8 100644 --- a/app/pages/docs/html/balises-de-base/+Page.mdx +++ b/app/pages/docs/html/balises-de-base/+Page.mdx @@ -5,4 +5,67 @@ tags: [] --- import Callout from "@/components/Callout"; +import tabs from "./tabs"; +Dans l'article précédent, nous avons exploré la balise `` 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 ``. + +## 🏗️ La balise \ + +La balise `` 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 `` : + + + +On peut voir que la balise `` contient plusieurs éléments : +- `

` : Un titre de premier niveau. +- `

` : Un paragraphe de texte. +- `` : Une image. +- `` : 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 : + +- `

` : Titre de premier niveau _(le plus important)_. +- `

` : Titre de deuxième niveau. +- `

` : Titre de troisième niveau. +- `

` : Titre de quatrième niveau. +- `

` : Titre de cinquième niveau. +- `
` : 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. + + + 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 `

` et applique-lui un style CSS pour le personnaliser. + + +Il est recommandé d'utiliser une seule balise `

` par page pour le titre principal. +Ni plus, ni moins ! + +En revanche, tu peux utiliser plusieurs balises `

`, `

`, etc. pour les sous-titres. + +Les balises `

` jusqu'à `

` 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. + + + Il est préférable d'utiliser une balise `

` pour un sous-titre qui suit un `

`, et de ne pas sauter directement à un `

` ou `

`. + Cependant, tu peux totalement passer d'un `

` à un `

` 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. + \ No newline at end of file diff --git a/app/pages/docs/html/balises-de-base/tabs.tsx b/app/pages/docs/html/balises-de-base/tabs.tsx new file mode 100644 index 0000000..028700e --- /dev/null +++ b/app/pages/docs/html/balises-de-base/tabs.tsx @@ -0,0 +1,24 @@ +import { Snippet } from "@/components/Snippet"; + +const htmlBasicBodySnippets = [ + { + name: "Exemple de la balise body", + codeLanguage: "html", + withLineNumbers: true, + code: ` + + + + +

Bienvenue sur mon site !

+

Ceci est un exemple de page HTML.

+ Une image d'exemple + Visitez notre site + +`, + }, +]; + +export default { + htmlBasicBody: () => , +};