pages.semanticHtml.pageStructure.title

components.exampleToggle.badExample

pages.semanticHtml.pageStructure.bad.siteTitle
pages.semanticHtml.pageStructure.bad.nav.home
pages.semanticHtml.pageStructure.bad.nav.about
pages.semanticHtml.pageStructure.bad.nav.contact
pages.semanticHtml.pageStructure.bad.content.title
pages.semanticHtml.pageStructure.bad.content.body
pages.semanticHtml.pageStructure.bad.footer
<!-- Mauvais : divs sans sémantique -->
<div class="page-header">
  <div class="site-title">Mon Site</div>
  <div class="navigation">
    <div>Accueil</div>
    <div>À propos</div>
  </div>
</div>
<div class="page-content">
  <div class="content-title">Bienvenue</div>
  <div>Contenu principal...</div>
</div>
<div class="page-footer">
  © 2025 Mon Site
</div>

components.exampleToggle.goodExample

pages.semanticHtml.pageStructure.good.siteTitle

pages.semanticHtml.pageStructure.good.content.title

pages.semanticHtml.pageStructure.good.content.body

pages.semanticHtml.pageStructure.good.footer

<!-- Bon : éléments HTML sémantiques -->
<header>
  <div class="site-title">Mon Site</div>
  <nav aria-label="Navigation principale">
    <ul>
      <li><a href="/">Accueil</a></li>
      <li><a href="/about">À propos</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Bienvenue</h1>
  <p>Contenu principal...</p>
</main>
<footer>
  <p>© 2025 Mon Site</p>
</footer>

components.exampleToggle.explanation pages.semanticHtml.pageStructure.explanation

pages.semanticHtml.headings.title

components.exampleToggle.badExample

pages.semanticHtml.headings.article.h1

pages.semanticHtml.headings.article.intro

pages.semanticHtml.headings.article.h2

pages.semanticHtml.headings.article.techniques

pages.semanticHtml.headings.article.h3semantic

pages.semanticHtml.headings.article.semantic

pages.semanticHtml.headings.article.h4

pages.semanticHtml.headings.article.elements

pages.semanticHtml.headings.article.h3css

pages.semanticHtml.headings.article.css

<!-- Mauvais : divs avec classes pour le style -->
<div class="title-large">Introduction</div>
<p>Contenu...</p>
<div class="title-medium">Section 1</div>
<p>Contenu...</p>
<div class="title-medium">Section 2</div>
<p>Contenu...</p>
<div class="title-small">Sous-section</div>
<p>Contenu...</p>

components.exampleToggle.goodExample

pages.semanticHtml.headings.article.h1

pages.semanticHtml.headings.article.intro

pages.semanticHtml.headings.article.h2

pages.semanticHtml.headings.article.techniques

pages.semanticHtml.headings.article.h3semantic

pages.semanticHtml.headings.article.semantic

pages.semanticHtml.headings.article.h4

pages.semanticHtml.headings.article.elements

pages.semanticHtml.headings.article.h3css

pages.semanticHtml.headings.article.css

<!-- Bon : hiérarchie de titres sémantiques -->
<h1>Introduction</h1>
<p>Contenu...</p>
<h2>Techniques de base</h2>
<p>Contenu...</p>
<h3>HTML sémantique</h3>
<p>Contenu...</p>
<h4>Éléments de structure</h4>
<p>Contenu...</p>
<h3>CSS et accessibilité</h3>
<p>Contenu...</p>

components.exampleToggle.explanation pages.semanticHtml.headings.explanation

pages.semanticHtml.buttonsVsLinks.title

components.exampleToggle.badExample

💾 pages.semanticHtml.buttonsVsLinks.actions.save
🗑️ pages.semanticHtml.buttonsVsLinks.actions.delete
👤 pages.semanticHtml.buttonsVsLinks.actions.profile
ℹ️ pages.semanticHtml.buttonsVsLinks.actions.info
<!-- Mauvais : divs et spans cliquables -->
<div @click="handleSave" style="cursor: pointer;">
  💾 Sauvegarder
</div>
<div @click="handleDelete" style="cursor: pointer;">
  🗑️ Supprimer
</div>
<span @click="navigateToProfile" style="cursor: pointer;">
  👤 Voir le profil
</span>

components.exampleToggle.goodExample

👤 pages.semanticHtml.buttonsVsLinks.actions.profile
<!-- Bon : boutons pour actions, liens pour navigation -->
<button type="button" @click="handleSave">
  💾 Sauvegarder
</button>
<button type="button" @click="handleDelete">
  🗑️ Supprimer
</button>
<a href="/profile">
  👤 Voir le profil
</a>
<button type="button" @click="toggleModal">
  ℹ️ Plus d'infos
</button>

components.exampleToggle.explanation pages.semanticHtml.buttonsVsLinks.explanation

pages.semanticHtml.lists.title

components.exampleToggle.badExample

pages.semanticHtml.lists.recipe.ingredients.title
pages.semanticHtml.lists.recipe.ingredients.eggs
pages.semanticHtml.lists.recipe.ingredients.milk
pages.semanticHtml.lists.recipe.ingredients.seasoning
pages.semanticHtml.lists.recipe.ingredients.butter
pages.semanticHtml.lists.recipe.steps.title
1. pages.semanticHtml.lists.recipe.steps.step1
2. pages.semanticHtml.lists.recipe.steps.step2
3. pages.semanticHtml.lists.recipe.steps.step3
4. pages.semanticHtml.lists.recipe.steps.step4
<!-- Mauvais : divs pour listes -->
<div class="list-title">Ingrédients :</div>
<div>3 œufs</div>
<div>2 cuillères à soupe de lait</div>
<div>Sel et poivre</div>

<div class="list-title">Étapes :</div>
<div>1. Battre les œufs</div>
<div>2. Faire chauffer le beurre</div>
<div>3. Verser et cuire</div>

components.exampleToggle.goodExample

pages.semanticHtml.lists.recipe.ingredients.title

  • pages.semanticHtml.lists.recipe.ingredients.eggs
  • pages.semanticHtml.lists.recipe.ingredients.milk
  • pages.semanticHtml.lists.recipe.ingredients.seasoning
  • pages.semanticHtml.lists.recipe.ingredients.butter

pages.semanticHtml.lists.recipe.steps.title

  1. pages.semanticHtml.lists.recipe.steps.step1
  2. pages.semanticHtml.lists.recipe.steps.step2
  3. pages.semanticHtml.lists.recipe.steps.step3
  4. pages.semanticHtml.lists.recipe.steps.step4
<!-- Bon : ul et ol sémantiques -->
<h3>Ingrédients :</h3>
<ul>
  <li>3 œufs</li>
  <li>2 cuillères à soupe de lait</li>
  <li>Sel et poivre</li>
</ul>

<h3>Étapes :</h3>
<ol>
  <li>Battre les œufs avec le lait</li>
  <li>Faire chauffer le beurre</li>
  <li>Verser et cuire</li>
  <li>Plier en deux et servir</li>
</ol>

components.exampleToggle.explanation pages.semanticHtml.lists.explanation

common.copyright