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.
+ 
+ Visitez notre site
+
+`,
+ },
+];
+
+export default {
+ htmlBasicBody: () => ,
+};