Bonus (avancé)
SVG, template, microdonnées, frameworks...
Imagine : tu as fini ton bâtiment. Tout tient debout, tout est pratique. Mais tu veux ajouter quelques extras : une œuvre d’art, un plan secret dans les murs, ou même préparer un agrandissement futur. Ces balises avancées sont là pour ça : pas indispensables pour débuter, mais elles te donnent plus de possibilités.
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