Référence Complète HTML5

<header>
    <h1>Mon Blog Personnel</h1>
    <p>Partage de connaissances en développement web</p>
</header>

<nav>
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<main>
    <h1>Guide HTML5 Complet</h1>
    <p>Contenu principal de la page...</p>
</main>

<article>
    <h2>Les Nouveautés HTML5</h2>
    <p>Publié le <time datetime="2025-10-23">23 octobre 2025</time></p>
    <p>HTML5 apporte de nombreuses améliorations...</p>
</article>

<section>
    <h2>À Propos de Nous</h2>
    <p>Notre mission est de...</p>
</section>

<section>
    <h2>Nos Services</h2>
    <p>Nous proposons...</p>
</section>

<aside>
    <h3>Articles Populaires</h3>
    <ul>
        <li><a href="/article1">Introduction à CSS</a></li>
        <li><a href="/article2">JavaScript ES6</a></li>
    </ul>
</aside>

<footer>
    <p>© 2025 Mon Site. Tous droits réservés.</p>
    <nav>
        <a href="/mentions-legales">Mentions Légales</a>
        <a href="/confidentialite">Politique de Confidentialité</a>
    </nav>
</footer>

<p>Ceci est un paragraphe de texte. Il peut contenir plusieurs phrases.</p>

<h1>Titre Principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

<ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
</ul>

<ol>
    <li>Étape 1</li>
    <li>Étape 2</li>
</ol>

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

<blockquote cite="https://example.com">
    <p>Le web est pour tout le monde.</p>
    <footer>— Tim Berners-Lee</footer>
</blockquote>

<pre>
function hello() {
    console.log("Bonjour!");
}
</pre>

<p>Première section</p>
<hr>
<p>Deuxième section</p>

<a href="https://www.example.com">Visitez notre site</a>
<a href="#section">Aller à la section</a>
<a href="mailto:contact@example.com">Nous contacter</a>

<p>Ceci est <strong>très important</strong>.</p>

<p>Je <em>dois</em> finir ce projet aujourd'hui.</p>

<p>Recherche : <mark>HTML5</mark> trouvé dans le document.</p>

<p>Utilisez la fonction <code>console.log()</code> pour déboguer.</p>

<p>Publié le <time datetime="2025-10-23">23 octobre 2025</time></p>

<p><abbr title="World Wide Web">WWW</abbr> a été inventé en 1989.</p>

<p>Formule chimique : H<sub>2</sub>O</p>
<p>Équation : E=mc<sup>2</sup></p>

<p>Le prix est <span class="prix">99€</span></p>

<img src="photo.jpg" alt="Description de l'image" width="500" height="300">

<video controls width="600">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Votre navigateur ne supporte pas la vidéo.
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Votre navigateur ne supporte pas l'audio.
</audio>

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Image responsive">
</picture>

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

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 150, 80);
</script>

<input type="text" required>

<input type="text" pattern="[A-Za-z]{3,}" title="Au moins 3 lettres">

<input type="email" placeholder="votre@email.com">

<input type="number" min="1" max="10">
<input type="date" min="2025-01-01" max="2025-12-31">

<input type="text" autofocus>

<iframe src="https://www.youtube.com/embed/VIDEO_ID" 
        width="560" height="315" 
        frameborder="0" 
        allowfullscreen>
</iframe>

<embed src="document.pdf" type="application/pdf" width="600" height="400">

<details>
    <summary>Cliquez pour plus d'informations</summary>
    <p>Voici le contenu caché qui s'affiche au clic.</p>
</details>

<dialog id="myDialog">
    <h2>Titre de la boîte de dialogue</h2>
    <p>Contenu...</p>
    <button onclick="document.getElementById('myDialog').close()">Fermer</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Ouvrir</button>

<!-- Bon -->
<img src="logo.png" alt="Logo de l'entreprise XYZ">

<!-- Mauvais -->
<img src="logo.png" alt="">

<label for="email">Adresse e-mail :</label>
<input type="email" id="email" name="email">

<div role="navigation">
    <!-- Menu de navigation -->
</div>

<button aria-label="Fermer" onclick="closeModal()">
    ×
</button>

<!-- Bon -->
<h1>Titre Principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

<!-- Mauvais : sauter des niveaux -->
<h1>Titre Principal</h1>
<h3>Sous-titre</h3>