📄 Structure du Document
<!DOCTYPE html>                           <!-- DĂ©claration doctype HTML5 -->
<html lang="fr">                         <!-- ÉlĂ©ment racine avec langue -->
<head>                                   <!-- Métadonnées du document -->
    <meta charset="UTF-8">               <!-- Encodage des caractĂšres -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la Page</title>       <!-- Titre de l'onglet du navigateur -->
</head>
<body>                                   <!-- Contenu visible de la page -->
    <!-- Le contenu va ici -->
</body>
</html>
🔧 ÉlĂ©ments Head
<meta name="description" content="Description de la page">     <!-- Description SEO -->
<meta name="keywords" content="html, css, javascript">         <!-- Mots-clés SEO -->
<meta name="author" content="Votre Nom">                       <!-- Informations auteur -->
<link rel="stylesheet" href="styles.css">                      <!-- CSS externe -->
<link rel="icon" href="favicon.ico">                           <!-- Favicon -->
<script src="script.js"></script>                              <!-- JavaScript externe -->
<style>/* CSS interne */</style>                               <!-- CSS interne -->
📝 Titres
<h1>Titre Principal</h1>                 <!-- Plus grand titre -->
<h2>Titre de Section</h2>                <!-- DeuxiĂšme niveau -->
<h3>Sous-section</h3>                    <!-- TroisiĂšme niveau -->
<h4>Sous-sous-section</h4>               <!-- QuatriĂšme niveau -->
<h5>Titre Mineur</h5>                    <!-- CinquiĂšme niveau -->
<h6>Plus Petit Titre</h6>                <!-- Plus petit titre -->
📄 ÉlĂ©ments de Texte
<p>Texte de paragraphe</p>               <!-- Paragraphe -->
<span>Texte en ligne</span>              <!-- Conteneur en ligne -->
<div>Conteneur bloc</div>                <!-- Conteneur bloc -->
<br>                                     <!-- Saut de ligne -->
<hr>                                     <!-- Ligne horizontale -->
<strong>Texte en gras</strong>           <!-- Importance forte -->
<em>Texte en italique</em>               <!-- Emphase -->
<b>Gras</b>                             <!-- Gras (sans signification sémantique) -->
<i>Italique</i>                         <!-- Italique (sans signification sémantique) -->
<u>Souligné</u>                         <!-- Texte souligné -->
<mark>Surligné</mark>                    <!-- Texte surligné -->
<small>Petit texte</small>               <!-- Texte plus petit -->
<del>Texte supprimé</del>                <!-- Texte supprimé -->
<ins>Texte inséré</ins>                  <!-- Texte inséré -->
<sub>Indice</sub>                        <!-- Indice -->
<sup>Exposant</sup>                      <!-- Exposant -->
🔗 Liens
<a href="https://example.com">Lien Externe</a>         <!-- Lien externe -->
<a href="page.html">Lien Interne</a>                   <!-- Lien interne -->
<a href="#section">Lien d'Ancrage</a>                 <!-- Lien d'ancrage -->
<a href="mailto:email@example.com">Email</a>           <!-- Lien email -->
<a href="tel:+1234567890">Téléphone</a>               <!-- Lien téléphone -->
<a href="#" download="fichier.pdf">Télécharger</a>    <!-- Lien de téléchargement -->

<!-- Attribut target avec valeurs acceptées -->
<a href="#" target="_blank">Nouvel onglet</a>          <!-- _blank: nouvel onglet -->
<a href="#" target="_self">MĂȘme fenĂȘtre</a>           <!-- _self: mĂȘme fenĂȘtre (dĂ©faut) -->
<a href="#" target="_parent">FenĂȘtre parent</a>       <!-- _parent: fenĂȘtre parent -->
<a href="#" target="_top">FenĂȘtre principale</a>      <!-- _top: fenĂȘtre principale -->
<a href="#" target="monCadre">Cadre nommé</a>         <!-- nom personnalisé -->
đŸ–Œïž Images
<img src="image.jpg" alt="Description">              <!-- Image de base -->
<img src="image.jpg" alt="Description" width="300" height="200">
<img src="image.jpg" alt="Description" style="width: 100%;">

<!-- Attributs d'image Ă©tendus -->
<img src="image.jpg" alt="Description" title="Info-bulle">
<img src="image.jpg" alt="Description" loading="lazy">        <!-- lazy | eager -->
<img src="image.jpg" alt="Description" decoding="async">      <!-- sync | async | auto -->
<img src="image.jpg" alt="Description" crossorigin="anonymous"> <!-- anonymous | use-credentials -->

<figure>                                             <!-- Image avec légende -->
    <img src="image.jpg" alt="Description">
    <figcaption>LĂ©gende de l'image</figcaption>
</figure>
📋 Listes
<ul>                                     <!-- Liste non ordonnée -->
    <li>ÉlĂ©ment de liste 1</li>
    <li>ÉlĂ©ment de liste 2</li>
    <li>ÉlĂ©ment de liste 3</li>
</ul>

<ol>                                     <!-- Liste ordonnée -->
    <li>Premier élément</li>
    <li>DeuxiÚme élément</li>
    <li>TroisiÚme élément</li>
</ol>

<dl>                                     <!-- Liste de définitions -->
    <dt>Terme 1</dt>
    <dd>DĂ©finition 1</dd>
    <dt>Terme 2</dt>
    <dd>DĂ©finition 2</dd>
</dl>
📊 Tableaux
<table>
    <caption>Titre du tableau</caption>              <!-- Titre du tableau -->
    <thead>                                         <!-- En-tĂȘte du tableau -->
        <tr>
            <th scope="col">En-tĂȘte 1</th>           <!-- scope: col | row | colgroup | rowgroup -->
            <th scope="col">En-tĂȘte 2</th>
            <th scope="col">En-tĂȘte 3</th>
        </tr>
    </thead>
    <tbody>                                         <!-- Corps du tableau -->
        <tr>
            <th scope="row">Ligne 1</th>             <!-- En-tĂȘte de ligne -->
            <td>Données 1</td>
            <td>Données 2</td>
        </tr>
        <tr>
            <th scope="row">Ligne 2</th>
            <td colspan="2">Données fusionnées</td>  <!-- Fusion de colonnes -->
        </tr>
        <tr>
            <td rowspan="2">Données hautes</td>      <!-- Fusion de lignes -->
            <td>Données 3</td>
            <td>Données 4</td>
        </tr>
    </tbody>
    <tfoot>                                         <!-- Pied de tableau -->
        <tr>
            <th scope="row">Total</th>
            <td>100</td>
            <td>200</td>
        </tr>
    </tfoot>
</table>

<!-- Groupement de colonnes -->
<table>
    <colgroup>
        <col style="background-color: yellow;">      <!-- Style pour colonne 1 -->
        <col span="2" style="background-color: cyan;"> <!-- Style pour colonnes 2-3 -->
    </colgroup>
    <!-- ... contenu du tableau ... -->
</table>
📝 Formulaires
<form action="/submit" method="post" enctype="multipart/form-data">
    <!-- Types d'input -->
    <input type="text" name="nom" placeholder="Votre nom">
    <input type="email" name="email" required>
    <input type="password" name="motdepasse" minlength="8">
    <input type="number" name="age" min="18" max="99" step="1">
    <input type="range" name="volume" min="0" max="100" value="50">
    <input type="date" name="naissance">
    <input type="time" name="heure">
    <input type="datetime-local" name="rendezvous">
    <input type="month" name="mois">
    <input type="week" name="semaine">
    <input type="color" name="couleur" value="#ff0000">
    <input type="file" name="fichier" accept=".pdf,.doc,.docx">
    <input type="file" name="images" accept="image/*" multiple>
    <input type="url" name="site">
    <input type="tel" name="telephone">
    <input type="search" name="recherche">
    <input type="hidden" name="token" value="abc123">
    
    <!-- Boutons input -->
    <input type="submit" value="Envoyer">
    <input type="reset" value="RĂ©initialiser">
    <input type="button" value="Bouton" onclick="alert('Cliqué')">
    <input type="image" src="submit.png" alt="Envoyer">
    
    <!-- Cases Ă  cocher et boutons radio -->
    <input type="checkbox" id="newsletter" name="newsletter" checked>
    <label for="newsletter">S'abonner Ă  la newsletter</label>
    
    <input type="radio" id="homme" name="genre" value="homme">
    <label for="homme">Homme</label>
    <input type="radio" id="femme" name="genre" value="femme" checked>
    <label for="femme">Femme</label>
    
    <!-- Zone de texte avec attributs -->
    <textarea name="message" rows="4" cols="50" 
              placeholder="Votre message..." 
              maxlength="500" 
              required></textarea>
    
    <!-- Liste déroulante -->
    <select name="pays" required>
        <option value="">Choisissez un pays</option>
        <optgroup label="Europe">
            <option value="fr" selected>France</option>
            <option value="de">Allemagne</option>
        </optgroup>
        <optgroup label="Amérique">
            <option value="us">États-Unis</option>
            <option value="ca">Canada</option>
        </optgroup>
    </select>
    
    <!-- Liste déroulante multiple -->
    <select name="langues" multiple size="3">
        <option value="fr">Français</option>
        <option value="en">Anglais</option>
        <option value="es">Espagnol</option>
    </select>
    
    <!-- Liste de données -->
    <input list="navigateurs" name="navigateur">
    <datalist id="navigateurs">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
        <option value="Edge">
    </datalist>
    
    <!-- Groupement de champs -->
    <fieldset>
        <legend>Informations personnelles</legend>
        <input type="text" name="prenom" placeholder="Prénom">
        <input type="text" name="nom" placeholder="Nom">
    </fieldset>
    
    <!-- Boutons -->
    <button type="submit">Envoyer</button>               <!-- submit | reset | button -->
    <button type="reset">RĂ©initialiser</button>
    <button type="button" onclick="alert('Test')">Test</button>
</form>

<!-- Attributs de formulaire -->
<form method="post" action="/submit" 
      enctype="application/x-www-form-urlencoded"    <!-- application/x-www-form-urlencoded | multipart/form-data | text/plain -->
      autocomplete="on"                              <!-- on | off -->
      novalidate                                     <!-- DĂ©sactive la validation HTML5 -->
      target="_blank">                               <!-- _blank | _self | _parent | _top -->
</form>
đŸ—ïž ÉlĂ©ments SĂ©mantiques
<header>En-tĂȘte de page</header>         <!-- Section d'en-tĂȘte -->
<nav>Menu de navigation</nav>            <!-- Navigation -->
<main>Contenu principal</main>           <!-- Contenu principal -->
<section>Section de contenu</section>    <!-- Section de contenu -->
<article>Contenu d'article</article>     <!-- Article -->
<aside>Contenu latéral</aside>           <!-- Barre latérale -->
<footer>Pied de page</footer>            <!-- Section de pied de page -->
đŸŽ” MultimĂ©dia
<!-- Vidéo avec attributs étendus -->
<video controls width="640" height="480" 
       autoplay muted loop 
       poster="preview.jpg"
       preload="metadata">                           <!-- none | metadata | auto -->
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_fr.vtt" srclang="fr" label="Français">
    <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
    Votre navigateur ne supporte pas la vidéo.
</video>

<!-- Audio avec attributs -->
<audio controls autoplay loop muted 
       preload="auto">                               <!-- none | metadata | auto -->
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Votre navigateur ne supporte pas l'audio.
</audio>

<!-- Iframe avec attributs de sécurité -->
<iframe src="https://example.com" 
        width="300" height="200"
        frameborder="0"                              <!-- 0 | 1 -->
        scrolling="auto"                             <!-- auto | yes | no -->
        sandbox="allow-scripts allow-same-origin"    <!-- Restrictions de sécurité -->
        loading="lazy"                               <!-- lazy | eager -->
        referrerpolicy="no-referrer">                <!-- Politique de referrer -->
</iframe>
⚙ Attributs Courants
<div id="id-unique">ÉlĂ©ment avec ID</div>             <!-- Identifiant unique -->
<div class="ma-classe autre-classe">Classes</div>     <!-- Classes CSS -->
<div style="color: red; font-size: 16px;">CSS en ligne</div>
<div title="Texte d'info-bulle">Survolez pour l'info-bulle</div>
<div lang="fr">Contenu en français</div>             <!-- Langue du contenu -->
<div dir="ltr">Texte de gauche Ă  droite</div>        <!-- ltr | rtl | auto -->

<!-- Attributs de données personnalisées -->
<div data-user-id="123">Données utilisateur</div>
<div data-config='{"theme": "dark"}'>Configuration JSON</div>

<!-- Attributs d'Ă©tat -->
<div hidden>ÉlĂ©ment masquĂ©</div>
<div contenteditable="true">Texte modifiable</div>   <!-- true | false -->
<div draggable="true">ÉlĂ©ment dĂ©plaçable</div>       <!-- true | false | auto -->
<div spellcheck="false">Pas de vérification orthographique</div> <!-- true | false -->
<div translate="no">Ne pas traduire ce texte</div>    <!-- yes | no -->

<!-- Attributs d'accessibilité ARIA -->
<div role="button" aria-label="Fermer">×</div>
<div aria-hidden="true">Masqué aux lecteurs d'écran</div>
<div aria-expanded="false">Menu fermé</div>
<div aria-describedby="help-text">Champ avec aide</div>

<!-- Attributs globaux d'événements -->
<div onclick="alert('Cliqué')">Cliquez-moi</div>
<div onmouseover="this.style.color='red'">Survolez-moi</div>
<input onchange="console.log(this.value)">
<form onsubmit="return validateForm()"></form>

<!-- Attributs de sécurité -->
<form autocomplete="off">                           <!-- on | off -->
<input autocomplete="new-password">                 <!-- Valeurs spécifiques d'autocomplete -->
<script nonce="random123"></script>                 <!-- Nonce pour CSP -->