diff --git a/app/pages/docs/html/balises-de-base/+Page.mdx b/app/pages/docs/html/balises-de-base/+Page.mdx
index dca2cc8..de4335b 100644
--- a/app/pages/docs/html/balises-de-base/+Page.mdx
+++ b/app/pages/docs/html/balises-de-base/+Page.mdx
@@ -66,6 +66,92 @@ Elles permettent de structurer le contenu de la page et de créer une hiérarchi
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
+
+
+### 2. Paragraphes de texte
+
+En reprenant l'exemple précédent, on peut voir que la balise `` est utilisée pour définir un paragraphe de texte.
+
+Il s'agit d'une des balises les plus courantes en HTML et elle est utilisée pour structurer le texte sur la page en sections distinctes et lisibiles.
+
+### 3. Mise en forme du texte
+
+Il existe plusieurs balises HTML qui permettent de mettre en forme le texte, comme :
+- ``
+ - Indique un texte comme étant important _(sémantique)_.
+ - Par défaut _(selon le navigateur)_, le texte est affiché en gras.
+- ``
+ - Indique un texte comme étant mis en emphase _(sémantique)_.
+ - Par défaut _(selon le navigateur)_, le texte est affiché en italique.
+- ``
+ - Indique un texte comme étant souligné _(non sémantique)_.
+ - Par défaut _(selon le navigateur)_, le texte est affiché avec un soulignement.
+- ``
+ - Indique un texte comme étant en gras _(non sémantique)_.
+ - Par défaut _(selon le navigateur)_, le texte est affiché en gras.
+- ``
+ - Indique un texte comme étant en italique _(non sémantique)_.
+ - Par défaut _(selon le navigateur)_, le texte est affiché en italique.
+
+
+ La balise `` est utilisée pour indiquer que le texte est important, tandis que la balise `` est utilisée pour appliquer un style de gras sans signification sémantique.
+
+ Il en est de même pour les balises `` et `` avec un style italique.
+
+ Bien entendu, niveau style on va chercher à privilégier le CSS pour appliquer des styles de mise en forme plutôt que d'utiliser les balises HTML.
+
+
+## 🔗 Liens vers des ressources externes
+
+### 4. Liens hypertextes
+
+Un lien hypertexte est un élément cliquable qui permet de naviguer vers une autre page web ou une autre section de la même page.
+Il est créé à l'aide de la balise `` _(pour "anchor")_ et peut contenir du texte, des images ou d'autres éléments.
+
+Il est construit avec l'attribut `href` qui spécifie l'URL de la page vers laquelle le lien doit pointer.
+
+Dans l'exemple ci-dessous, on peut voir un lien vers la page d'accueil du Memento ainsi qu'un lien vers une section :
+
+
+
+## 🖼️ Images et médias
+
+### 5. Images
+
+L'ajout d'une image à une page web est un élément essentiel pour rendre le contenu plus attrayant et informatif.
+Il est créé à l'aide de la balise `![]()
`.
+
+Cette balise est construite avec l'attribut `src` qui spécifie l'URL de l'image à afficher.
+Mais il est également important d'utiliser l'attribut `alt` pour fournir une description de l'image, ce qui est utile pour l'accessibilité et le référencement.
+
+## 📋 Listes et tableaux
+
+### 6. Listes
+
+Les balises `` et `` sont utilisées pour créer des listes non ordonnées et ordonnées, respectivement.
+
+- `` : Crée une liste non ordonnée _(avec des puces)_.
+- `` : Crée une liste ordonnée _(avec des numéros)_.
+
+On utilise la balise `- ` pour définir chaque élément de la liste.
+
+
+
+### 7. Tableaux
+
+Les tableaux sont utilisés pour organiser des données sous forme de lignes et de colonnes.
+Il existe deux catégories de balises pour les tableaux :
+
+- **Structure essentielle**
+ - `
` : Définit le tableau.
+ - `` : Définit une ligne du tableau.
+ - `| ` : Définit une cellule de données dans une ligne.
+ - ` | ` : Définit une cellule d'en-tête dans une ligne.
+- **Structure optionnelle**
+ - `` : Définit l'en-tête du tableau.
+ - ` |
` : Définit le corps du tableau.
+ - `` : Définit le pied de page du tableau.
+
+
\ 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
index 028700e..468455f 100644
--- a/app/pages/docs/html/balises-de-base/tabs.tsx
+++ b/app/pages/docs/html/balises-de-base/tabs.tsx
@@ -19,6 +19,95 @@ const htmlBasicBodySnippets = [
},
];
+const htmlBasicAnchorSnippets = [
+ {
+ name: "Lien hypertexte vers une page",
+ codeLanguage: "html",
+ code: `Memento Dev`,
+ },
+ {
+ name: "Lien hypertexte vers une section de la même page",
+ codeLanguage: "html",
+ code: `4. Liens hypertextes`,
+ },
+];
+
+const htmlBasicListSnippets = [
+ {
+ name: "Liste non ordonnée",
+ codeLanguage: "html",
+ withLineNumbers: true,
+ code: `
+ - Élément A
+ - Élément B
+ - Élément C
+
`,
+ },
+ {
+ name: "Liste ordonnée",
+ codeLanguage: "html",
+ withLineNumbers: true,
+ code: `
+ - Élément 1
+ - Élément 2
+ - Élément 3
+
`,
+ },
+];
+
+const htmlBasicTableSnippets = [
+ {
+ name: "Tableau simple",
+ codeLanguage: "html",
+ withLineNumbers: true,
+ code: `
+
+ | Nom |
+ Âge |
+
+
+ | Christophe |
+ 30 |
+
+
+ | Élodie |
+ 25 |
+
+
`,
+ },
+ {
+ name: "Tableau avec structure",
+ codeLanguage: "html",
+ withLineNumbers: true,
+ code: `
+
+
+ | Nom |
+ Âge |
+
+
+
+
+ | Christophe |
+ 30 |
+
+
+ | Élodie |
+ 25 |
+
+
+
+
+ | Crédit : © Source |
+
+
+
`,
+ },
+];
+
export default {
htmlBasicBody: () => ,
+ htmlBasicAnchor: () => ,
+ htmlBasicList: () => ,
+ htmlBasicTable: () => ,
};