HTML => Éléments de coupe

Remarques

Les normes HTML5 ne répertorient pas l'élément principal en tant qu'élément de sectionnement.

Élément de l'article

L'élément <article> contient un contenu autonome tel que des articles, des articles de blog, des commentaires d'utilisateurs ou un widget interactif pouvant être distribué en dehors du contexte de la page, par exemple par RSS.

Lorsque des éléments d'article sont imbriqués, le contenu du nœud d'article interne doit être associé à l'élément d'article externe.

Un blog ( section ) contenant plusieurs articles ( article ) et des commentaires ( article ) pourrait ressembler à ceci.

<section>
    <!-- Each individual blog post is an <article> -->
    <article>
        <header>
            <h1>Blog Post</h1>
            <time datetime="2016-03-13">13th March 2016</time>
        </header>

        <p>The article element represents a self contained article or document.</p>
        <p>The section element represents a grouping of content.</p>

        <section>
            <h2>Comments <small>relating to "Blog Post"</small></h2>

            <!-- Related comment is also a self-contained article -->
            <article id="user-comment-1">
                <p>Excellent!</p>
                <footer><p>...</p><time>...</time></footer>
            </article>
        </section>
    </article>

    <!-- ./repeat: <article> -->

</section>

<!-- Content unrelated to the blog or posts should be outside the section. -->
<footer>
    <p>This content should be unrelated to the blog.</p>
</footer>

Évitez les utilisations inutiles

Lorsque le contenu principal de la page (à l'exclusion des en-têtes, pieds de page, barres de navigation, etc.) est simplement un groupe d'éléments. Vous pouvez omettre le <article> en faveur de l'élément <main> .

<article>
    <p>This doesn't make sense, this article has no real `context`.</p>
</article>

Au lieu de cela, remplacez l'article par un élément <main> pour indiquer qu'il s'agit du contenu main de cette page.

<main>
    <p>I'm the main content, I don't need to belong to an article.</p>
</main>

Si vous utilisez un autre élément, assurez-vous de spécifier le rôle <main> ARIA pour une interprétation et un rendu corrects sur plusieurs périphériques et navigateurs non HTML5.

<section role="main">
    <p>This section is the main content of this page.</p>
</section>

Remarques:
<main> descendants de l' élément <main> ne sont pas autorisés dans un <article>

Cliquez ici pour lire la spécification HTML5 officielle de l'élément <article>

Élément principal

L'élément <main> contient le contenu principal de votre page Web. Ce contenu est unique à la page individuelle et ne devrait pas apparaître ailleurs sur le site. Le contenu répétitif comme les en-têtes, les pieds de page, la navigation, les logos, etc., est placé en dehors de l'élément.

Le <main> élément ne doit jamais être utilisé au plus une fois sur une seule page.
L'élément <main> ne doit pas être inclus en tant que descendant d'un article , d'un élément de aside , d'un footer , d'un en- header ou d'un élément de nav .

Dans l'exemple suivant, nous affichons un seul article de blog (et des informations connexes telles que des références et des commentaires).

<body>
    <header>
        <nav>...</nav>
    </header>

    <main>
        <h1>Individual Blog Post</h1>
        <p>An introduction for the post.</p>

        <article>
            <h2>References</h2>
            <p>...</p>
        </article>

        <article>
            <h2>Comments</h2> ...
        </article>
    </main>

    <footer>...</footer>
</body>

Le billet de blog est contenu dans l'élément <main> pour indiquer qu'il s'agit du contenu principal de cette page (et donc unique sur le site Web).
Les balises <header> et <footer> sont des frères pour l’élément <main> .

Remarques:
La spécification HTML5 reconnaît l'élément <main> tant qu'élément de regroupement et non en tant qu'élément de sectionnement .
Attributs du rôle ARIA : main (par défaut) , presentation
L'ajout d'un attribut de rôle ARIA role="main" à d' autres éléments destinés à être utilisés comme contenu principal est conseillé pour aider les agents utilisateurs qui ne prennent pas en charge HTML5 et pour fournir davantage de contexte à ceux qui le font.
L'élément <main> par défaut a le rôle principal et n'a donc pas besoin d'être fourni.

Cliquez ici pour lire la spécification HTML5 officielle de l'élément <main>

L'élément <nav> est principalement destiné à être utilisé pour des sections contenant des blocs de navigation principaux pour le site Web. Cela peut inclure des liens vers d'autres parties de la page Web (par exemple des ancres pour une table des matières) ou d'autres pages.

Éléments en ligne

Ce qui suit affichera un ensemble de liens hypertexte en ligne.

<nav>
    <a href="https://google.com">Google</a>
    <a href="https://www.yahoo.com">Yahoo!</a>
    <a href="https://www.bing.com">Bing</a>
</nav>

Utilisez les éléments de la liste si nécessaire

Si le contenu représente une liste d'éléments, utilisez un élément de liste pour l'afficher et améliorer l'expérience utilisateur.

Notez le role="navigation" , plus à ce sujet ci-dessous.

<nav role="navigation">
    <ul>
        <li><a href="https://google.com">Google</a></li>
        <li><a href="https://www.yahoo.com">Yahoo!</a></li>
        <li><a href="https://www.bing.com">Bing</a></li>
    </ul>
</nav>

Évitez les utilisations inutiles

<footer> éléments <footer> peuvent avoir une liste de liens vers d'autres parties du site (FAQ, T & C, etc.). L'élément pied de page seul est suffisant dans ce cas, vous n'avez pas besoin d'envelopper vos liens avec un élément <nav> dans le <footer> .

<!-- the <nav> is not required in the <footer> -->
<footer>
    <nav>
        <a href="#">...</a>
    </nav>
</footer>

<!-- The footer alone is sufficient -->
<footer>
    <a href="#">...</a>
</footer>

Remarques:
<main> descendants de l' élément <main> ne sont pas autorisés dans un <nav>
Ajouter un role="navigation" ARIA role="navigation" à l'élément <nav> est conseillé pour aider les agents utilisateurs qui ne prennent pas en charge HTML5 et pour fournir plus de contexte à ceux qui le font.
<nav role="navigation"></nav>

Screen Readers: (logiciel permettant aux utilisateurs aveugles ou malvoyants de naviguer sur le site)
Les agents utilisateurs tels que les lecteurs d'écran interpréteront l'élément <nav> différemment en fonction de leurs besoins.
Cela peut donner à l'élément <nav> une priorité plus élevée lors du rendu de la page
Cela pourrait retarder le rendu de l'élément
Il pourrait adapter la page de manière spécifique pour répondre aux besoins de l'utilisateur
Exemple: agrandissez les liens de texte dans les éléments <nav> pour une personne ayant une déficience visuelle.

Cliquez ici pour lire la spécification HTML5 officielle de l'élément <nav>

Élément de section

L'élément <section> représente une section générique pour regrouper par thème le contenu. Chaque section, en général, devrait pouvoir être identifiée avec un élément d'en-tête en tant qu'enfant de la section .

Vous pouvez utiliser l'élément <section> dans un <article> et vice-versa.
Chaque section doit avoir un thème (un élément de titre identifiant cette région)
N'utilisez pas l'élément <section> tant que "conteneur" de style général.
Si vous avez besoin d'un conteneur pour appliquer un style, utilisez plutôt un <div> .

Dans l'exemple suivant, nous affichons un seul article de blog avec plusieurs chapitres. Chaque chapitre est une section (un ensemble de contenu regroupé par thème, qui peut être identifié par les éléments de titre de chaque section) .

<article>
    <header>
        <h2>Blog Post</h2>
    </header>
    <p>An introduction for the post.</p>
    <section>
        <h3>Chapter 1</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Chapter 2</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Comments</h3> ...
    </section>
</article>

Remarques:
Les développeurs doivent utiliser l'élément article lorsqu'il est judicieux de syndiquer le contenu de l'élément.

Cliquez ici pour lire la spécification HTML5 officielle de l'élément <main>

Élément d'en-tête

L'élément <header> représente le contenu d'introduction pour le contenu de section ancêtre ou l'élément racine de sectionnement le plus proche. Un <header> contient généralement un groupe d’aides d’introduction ou de navigation.

Remarque: L'élément d'en-tête ne divise pas le contenu. il n'introduit pas une nouvelle section.

Exemples:

<header>
  <p>Welcome to...</p>
  <h1>Voidwars!</h1>
</header>

Dans cet exemple, <article> a un <header> .

<article>
  <header>
    <h1>Flexbox: The definitive guide</h1>
  </header>
  <p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>

Recommandation proposée par le W3C

Élément de pied de page

L'élément <footer> contient la partie pied de page de la page.

Voici un exemple d'élément <footer> contenant une balise de paragraphe p .

<footer>
    <p>All rights reserved</p>
</footer>

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

HTML
Éléments de coupe

Recherche…

Remarques

Élément de l'article

Évitez les utilisations inutiles

Élément principal

Elément de navigation

Éléments en ligne

Utilisez les éléments de la liste si nécessaire

Évitez les utilisations inutiles

Élément de section

Élément d'en-tête

Exemples:

Élément de pied de page