app/pages/docs/html/attributs/+Page.mdx

@@ -5,4 +5,66 @@ tags: []
 ---
 
 import Callout from "@/components/Callout";
+import tabs from "./tabs";
 
+Pour cet article, explorons le concept des **attributs** HTML !
+
+## 🔧 Comprendre les attributs HTML
+
+Un attribut HTML est une information supplémentaire que l'on peut ajouter à une balise HTML pour lui donner des propriétés ou des comportements spécifiques.
+
+Par exemple, l'attribut `src` de la balise `<img>` spécifie l'URL de l'image à afficher.  
+Les attributs sont généralement ajoutés à l'intérieur de la balise d'ouverture et sont constitués d'un nom et d'une valeur, séparés par un signe égal `=`.
+
+Voici un exemple simple :
+
+<tabs.htmlBasicAttributes />
+
+Dans l'exemple ci-dessus, on a utilisé plusieurs attributs :
+- **Balise `<img>`**
+  - `src` : Spécifie l'URL de l'image à afficher.
+  - `alt` : Fournit une description de l'image pour l'accessibilité.
+  - `width` : Définit la largeur de l'image en pixels.
+  - `height` : Définit la hauteur de l'image en pixels.
+  - `loading` : Indique si l'image doit être chargée de manière paresseuse _(lazy loading)_ ou non.
+- **Balise `<a>`**
+  - `href` : Spécifie l'URL de la page vers laquelle le lien doit pointer.
+  - `target` : Indique où ouvrir le lien _(dans un nouvel onglet, par exemple)_.
+  - `rel` : Fournit des informations supplémentaires sur la relation entre la page actuelle et la page liée.
+  - `title` : Fournit une info-bulle qui s'affiche lorsque l'utilisateur survole le lien.
+  - `download` : Indique que le lien doit être traité comme un téléchargement.
+
+<Callout type="note" title="Attributs booléens (vrai ou faux)">
+  Certains attributs HTML sont appelés **attributs booléens**. C'est notamment le cas de l'attribut `download` de l'exemple précédent pour la balise `<a>`.
+
+  Ces attributs n'ont pas besoin d'une valeur explicite. La simple présence de l'attribut dans la balise est suffisante pour indiquer qu'il est activé.
+
+  Il est donc possible d'écrire `<a download>` au lieu de `<a download="true">`.
+</Callout>
+
+## 🌐 Rôles et utilisation des attributs HTML
+
+Les attributs HTML jouent un rôle essentiel dans plusieurs aspects du développement web.
+
+### 1. Accessibilité
+
+Les attributs tels que `alt` _(pour les images)_, `aria-label` ou encore `title` améliorent l'accessibilité en fournissant des informations alternatives ou contextuelles aux utilisateurs qui ne peuvent pas visualiser le contenu, comme les personnes malvoyantes utilisant des lecteurs d'écran.
+
+### 2. SEO (Search Engine Optimization)
+
+Les attributs `alt` et `title` sont également importants pour le référencement des pages, car ils fournissent des informations clés aux moteurs de recherche sur le contenu de la page.
+
+### 3. Interactivité
+
+Les attributs peuvent aussi être utilisés pour rendre les éléments interactifs, comme l'ajout de fonctionnalités de formulaire ou de liens cliquables avec des attributs tels que `href`, `action` et `method`.
+
+## 🤔 Tous les attributs HTML
+
+Vouloir présenter tous les attributs HTML serait long et fastidieux... surtout que les technologies évoluent rapidement, donc il est difficile de suivre les changements.
+
+Cependant, le site [MDN Web Docs](https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Attributes) est une excellente ressource pour explorer les attributs HTML et leurs utilisations !
+
+## 📚 Conclusion
+
+Les attributs HTML sont des éléments essentiels qui ajoutent de la fonctionnalité et de la valeur à tes pages web.  
+En comprenant leur rôle et leur utilisation, tu pourras améliorer l'accessibilité, le référencement et l'interactivité de tes sites.

app/pages/docs/html/attributs/tabs.tsx

@@ -0,0 +1,34 @@
+import { Snippet } from "@/components/Snippet";
+
+const htmlBasicAttributesSnippets = [
+	{
+		name: "Exemple d'attributs sur une image",
+		codeLanguage: "html",
+		withLineNumbers: true,
+		code: `<img
+  src="image.jpg"
+  alt="Une image d'exemple"
+  width="300"
+  height="200"
+  loading="lazy"
+>`,
+	},
+	{
+		name: "Exemple d'attributs sur un lien",
+		codeLanguage: "html",
+		withLineNumbers: true,
+		code: `<a
+  href="https://example.com"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Visitez notre site"
+  download
+>
+  Visitez notre site
+</a>`,
+	},
+];
+
+export default {
+	htmlBasicAttributes: () => <Snippet snippets={htmlBasicAttributesSnippets} />,
+};