Bonus (avancé)

12.1<svg> : Dessins vectoriels

Parfait pour les icônes, logos et schémas. C’est léger, net sur tous les écrans, et personnalisable en CSS.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

12.2<template> : Contenu caché réutilisable

Sert à stocker du HTML qui n’est pas affiché directement, mais que tu peux injecter via JavaScript. Comme une “pièce secrète” que tu révéleras plus tard.

<template id="carte-modele">
  <article class="carte">
    <h3>Titre à remplacer</h3>
    <p>Texte à remplacer</p>
  </article>
</template>

12.3Microdonnées / Schema.org

Ce sont des balises et attributs spéciaux pour donner plus de sens à ton contenu (adresse, avis, recettes…). Les moteurs de recherche adorent ça : ça leur permet d’afficher ton contenu en “rich snippets” (étoiles, horaires, etc.).

<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Jean Dupont</span>
  <span itemprop="jobTitle">Architecte</span>
</div>

12.4Frameworks (React, Vue...)

Les frameworks utilisent du HTML enrichi (souvent appelé JSX ou templates). Tu y retrouveras tes bases, mais avec des “super-pouvoirs” pour créer des applis interactives. Pas besoin d’y plonger tout de suite : maîtrise le HTML classique avant d’empiler les étages