diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts
index 325861d..69807a9 100644
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@@ -1,172 +1,169 @@
 const navigationsTypes = {
-	GLOBAL: "👋 Général",
-	CERTIFICATIONS: "🎓 Certifications",
-	DOCUMENTATIONS: "📚 Documentations",
-	OTHER: "🔗 Autres",
+  GLOBAL: "👋 Général",
+  CERTIFICATIONS: "🎓 Certifications",
+  DOCUMENTATIONS: "📚 Documentations",
+  OTHER: "🔗 Autres",
 };
 
 export type NavigationSection = {
-	title: string;
-	type: (typeof navigationsTypes)[keyof typeof navigationsTypes];
-	position: "start" | "end" | "auto";
-	links: NavigationLink[];
+  title: string;
+  type: (typeof navigationsTypes)[keyof typeof navigationsTypes];
+  position: "start" | "end" | "auto";
+  links: NavigationLink[];
 };
 
 export type NavigationOG = Partial<{
-	image: string;
+  image: string;
 }>;
 
 export type NavigationLink = {
-	title: string;
-	href: string;
-	og?: NavigationOG;
-	subitems: NavigationSubItem[];
+  title: string;
+  href: string;
+  og?: NavigationOG;
+  subitems: NavigationSubItem[];
 };
 
 export type NavigationSubItem = {
-	title: string;
-	href: string;
+  title: string;
+  href: string;
 };
 
 export const navigation: NavigationSection[] = [
-	{
-		title: "Préambule",
-		type: navigationsTypes.GLOBAL,
-		position: "start",
-		links: [
-			{ title: "Memento Dev", href: "/", subitems: [] },
-			{ title: "Certifications", href: "/certifications", subitems: [] },
-			{ title: "Documentations", href: "/docs", subitems: [] },
-		],
-	},
-	{
-		title: "Communauté",
-		type: navigationsTypes.GLOBAL,
-		position: "start",
-		links: [
-			{
-				title: "Influenceurs",
-				href: "/communaute/influenceurs",
-				subitems: [],
-			},
-			{
-				title: "Partages et réutilisations",
-				href: "/communaute/partages",
-				subitems: [],
-			},
-		],
-	},
-	{
-		title: "Légal",
-		type: navigationsTypes.OTHER,
-		position: "end",
-		links: [
-			{ title: "Mentions légales", href: "/mentions-legales", subitems: [] },
-			{
-				title: "Politique de confidentialité",
-				href: "/politique-de-confidentialite",
-				subitems: [],
-			},
-		],
-	},
-	{
-		title: "Développeur Web et Web Mobile",
-		type: navigationsTypes.CERTIFICATIONS,
-		position: "auto",
-		links: [
-			{ title: "Résumé du titre", href: "/certifications/dwwm", subitems: [] },
-			{
-				title: "Activité Type 1",
-				href: "/certifications/dwwm/at1",
-				subitems: [
-					{ title: "Résumé de l'AT", href: "/certifications/dwwm/at1" },
-					{ title: "CP 1", href: "/certifications/dwwm/at1/cp1" },
-					{ title: "CP 2", href: "/certifications/dwwm/at1/cp2" },
-					{ title: "CP 3", href: "/certifications/dwwm/at1/cp3" },
-					{ title: "CP 4", href: "/certifications/dwwm/at1/cp4" },
-				],
-			},
-			{
-				title: "Activité Type 2",
-				href: "/certifications/dwwm/at2",
-				subitems: [
-					{ title: "Résumé de l'AT", href: "/certifications/dwwm/at2" },
-					{ title: "CP 5", href: "/certifications/dwwm/at2/cp5" },
-					{ title: "CP 6", href: "/certifications/dwwm/at2/cp6" },
-					{ title: "CP 7", href: "/certifications/dwwm/at2/cp7" },
-					{ title: "CP 8", href: "/certifications/dwwm/at2/cp8" },
-				],
-			},
-		],
-	},
-	{
-		title: "Front-end",
-		type: navigationsTypes.DOCUMENTATIONS,
-		position: "auto",
-		links: [
-			{
-				title: "React",
-				href: "/docs/react",
-				subitems: [
-					{ title: "Introduction", href: "/docs/react" },
-					{ title: "Initialisation", href: "/docs/react/initialisation" },
-					{ title: "Syntaxe JSX", href: "/docs/react/jsx" },
-					{ title: "Premier composant", href: "/docs/react/premier-composant" },
-					{
-						title: "State et cycle de vie",
-						href: "/docs/react/state-et-cycle-de-vie",
-					},
-					{ title: "Hooks", href: "/docs/react/hooks" },
-					{ title: "Le hook useContext", href: "/docs/react/use-context" },
-					{ title: "Le hook useReducer", href: "/docs/react/use-reducer" },
-				],
-			},
-		],
-	},
-	{
-		title: "Base de données",
-		type: navigationsTypes.DOCUMENTATIONS,
-		position: "auto",
-		links: [
-			{
-				title: "Merise",
-				href: "/docs/merise",
-				og: { image: "/merise/og.webp" },
-				subitems: [
-					{ title: "Introduction", href: "/docs/merise" },
-					{
-						title: "Dictionnaire de données",
-						href: "/docs/merise/dictionnaire-de-donnees",
-					},
-					{ title: "Modèle Conceptuel de Données", href: "/docs/merise/mcd" },
-					{ title: "Modèle Logique de Données", href: "/docs/merise/mld" },
-					{ title: "Modèle Physique de Données", href: "/docs/merise/mpd" },
-				],
-			},
-		],
-	},
+  {
+    title: "Préambule",
+    type: navigationsTypes.GLOBAL,
+    position: "start",
+    links: [
+      { title: "Memento Dev", href: "/", subitems: [] },
+      { title: "Certifications", href: "/certifications", subitems: [] },
+      { title: "Documentations", href: "/docs", subitems: [] },
+    ],
+  },
+  {
+    title: "Communauté",
+    type: navigationsTypes.GLOBAL,
+    position: "start",
+    links: [
+      {
+        title: "Influenceurs",
+        href: "/communaute/influenceurs",
+        subitems: [],
+      },
+      {
+        title: "Partages et réutilisations",
+        href: "/communaute/partages",
+        subitems: [],
+      },
+    ],
+  },
+  {
+    title: "Légal",
+    type: navigationsTypes.OTHER,
+    position: "end",
+    links: [
+      { title: "Mentions légales", href: "/mentions-legales", subitems: [] },
+      {
+        title: "Politique de confidentialité",
+        href: "/politique-de-confidentialite",
+        subitems: [],
+      },
+    ],
+  },
+  {
+    title: "Développeur Web et Web Mobile",
+    type: navigationsTypes.CERTIFICATIONS,
+    position: "auto",
+    links: [
+      { title: "Résumé du titre", href: "/certifications/dwwm", subitems: [] },
+      {
+        title: "Activité Type 1",
+        href: "/certifications/dwwm/at1",
+        subitems: [
+          { title: "Résumé de l'AT", href: "/certifications/dwwm/at1" },
+          { title: "CP 1", href: "/certifications/dwwm/at1/cp1" },
+          { title: "CP 2", href: "/certifications/dwwm/at1/cp2" },
+          { title: "CP 3", href: "/certifications/dwwm/at1/cp3" },
+          { title: "CP 4", href: "/certifications/dwwm/at1/cp4" },
+        ],
+      },
+      {
+        title: "Activité Type 2",
+        href: "/certifications/dwwm/at2",
+        subitems: [
+          { title: "Résumé de l'AT", href: "/certifications/dwwm/at2" },
+          { title: "CP 5", href: "/certifications/dwwm/at2/cp5" },
+          { title: "CP 6", href: "/certifications/dwwm/at2/cp6" },
+          { title: "CP 7", href: "/certifications/dwwm/at2/cp7" },
+          { title: "CP 8", href: "/certifications/dwwm/at2/cp8" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Front-end",
+    type: navigationsTypes.DOCUMENTATIONS,
+    position: "auto",
+    links: [
+      {
+        title: "React",
+        href: "/docs/react",
+        subitems: [
+          { title: "Introduction", href: "/docs/react" },
+          { title: "Initialisation", href: "/docs/react/initialisation" },
+          { title: "Syntaxe JSX", href: "/docs/react/jsx" },
+          { title: "Premier composant", href: "/docs/react/premier-composant" },
+          {
+            title: "State et cycle de vie",
+            href: "/docs/react/state-et-cycle-de-vie",
+          },
+          { title: "Hooks", href: "/docs/react/hooks" },
+          { title: "Le hook useContext", href: "/docs/react/use-context" },
+          { title: "Le hook useReducer", href: "/docs/react/use-reducer" },
+        ],
+      },
+      {
+        title: "HTML",
+        href: "/docs/html",
+        subitems: [{ title: "Introduction", href: "/docs/html" }],
+      },
+    ],
+  },
+  {
+    title: "Base de données",
+    type: navigationsTypes.DOCUMENTATIONS,
+    position: "auto",
+    links: [
+      {
+        title: "Merise",
+        href: "/docs/merise",
+        og: { image: "/merise/og.webp" },
+        subitems: [
+          { title: "Introduction", href: "/docs/merise" },
+          {
+            title: "Dictionnaire de données",
+            href: "/docs/merise/dictionnaire-de-donnees",
+          },
+          { title: "Modèle Conceptuel de Données", href: "/docs/merise/mcd" },
+          { title: "Modèle Logique de Données", href: "/docs/merise/mld" },
+          { title: "Modèle Physique de Données", href: "/docs/merise/mpd" },
+        ],
+      },
+    ],
+  },
 ];
 
-export function doesLinkSubitemExist(
-	link: NavigationLink,
-	subitemHref: string,
-): boolean {
-	return link.subitems.some((subitem) => subitem.href === subitemHref);
+export function doesLinkSubitemExist(link: NavigationLink, subitemHref: string): boolean {
+  return link.subitems.some((subitem) => subitem.href === subitemHref);
 }
 
-export function findNavigationLink(
-	namespace: string,
-	href?: string,
-): NavigationLink | undefined {
-	const currentUrl = `/${namespace}/${href}`
-		.replace(/\/+/g, "/")
-		.replace(/\/$/, "");
+export function findNavigationLink(namespace: string, href?: string): NavigationLink | undefined {
+  const currentUrl = `/${namespace}/${href}`.replace(/\/+/g, "/").replace(/\/$/, "");
 
-	const foundLink = navigation
-		.flatMap((section) => section.links)
-		.find((link) => {
-			return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl);
-		});
+  const foundLink = navigation
+    .flatMap((section) => section.links)
+    .find((link) => {
+      return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl);
+    });
 
-	return foundLink;
+  return foundLink;
 }
diff --git a/app/pages/docs/html/+Page.mdx b/app/pages/docs/html/+Page.mdx
new file mode 100644
index 0000000..4b60041
--- /dev/null
+++ b/app/pages/docs/html/+Page.mdx
@@ -0,0 +1,36 @@
+---
+title: Introduction au HTML
+description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web.
+tags: []
+---
+
+import Callout from "@/components/Callout";
+
+HTML est un langage de balisage utilisé pour structurer le contenu des pages web.  
+Bien qu'il ne s'agisse pas d'un langage de programmation à proprement parler, il reste fondamental pour créer des sites web.
+
+Mais avant de plonger dans le vif du sujet, faisons un petit tour d'horizon de ce qu'est le HTML et pourquoi il est si important.
+
+## 🤔 Qu'est-ce que le HTML ?
+
+HTML, ou **HyperText Markup Language**, est le langage standard utilisé pour créer des pages web. Il s'agit d'un langage de balisage qui utilise des **balises** pour structurer le contenu.  
+Il s'agit du squelette d'une page web, qui définit la structure et le contenu de celle-ci.
+
+<Callout type="question" title="Pourquoi HTML n'est pas un langage de programmation ?">
+  Avant de répondre à cette question, il est important de connaître la définition d'un langage de programmation.
+
+  <Callout type="note" title="Langage de programmation" collapsible>
+    Un langage de programmation est un ensemble de règles et de conventions qui permettent d'écrire des instructions que l'ordinateur peut comprendre et exécuter.  
+    Ces instructions peuvent inclure des calculs, des conditions, des boucles, etc.
+
+    Parmis les langages de programmation les plus connus, on peut citer :
+
+    - JavaScript
+    - Python
+    - Java
+    - C++
+    - C#
+
+    et bien d'autres !
+  </Callout>
+</Callout>
\ No newline at end of file