web-dev-qa-db-fra.com

Dois-je avoir un élément de côté à l'extérieur ou à l'intérieur de l'élément principal?

Supposons que l'élément aside inclut du contenu "Oh, au fait…" comme la lecture de suggestions, de publicités ou de ventes croisées.

  1. Est-il sémantiquement acceptable d'avoir aside en dehors de main?
  2. Si oui, cela a-t-il un avantage sur l'accessibilité si je garde aside en dehors de main, comme la commande "skip to main content"?
  3. Dernier point mais non le moindre, je voudrais savoir s'il y a un impact SEO si j'inclus la balise aside à l'extérieur ou à l'intérieur de main.
htmlseoaccessibilitysemantic-markup
16
Pratik Mehta

En HTML5 il est uniquement défini que aside est "lié au contenu autour de l'élément aside".

En HTML 5.1 (CR) la définition est devenue plus spécifique , car elle dit maintenant que aside est "lié au contenu de la parentalité sectionner le contenu ".

Après la nouvelle définition, l'élément aside doit se trouver à l'intérieur de l'élément section auquel il est lié. L'élément main n'est pas un élément de sectionnement (éléments comme article, section, body, figure etc. sont). Vous pouvez bien sûr toujours placer aside dans main, mais il sera lié au parent d'élément de sectionnement le plus proche de main.

Cela signifie qu'il n'y a pas de différence sémantique (pour aside) dans ces deux exemples:

<body>
  <main></main>
  <aside><!-- related to the body --></aside>
</body>

<body>
  <main><aside><!-- related to the body --></aside></main>
</body>

Exemple qui montre quelques cas différents:

<body>

  <main>

    <article>

      <aside><!-- related to the article --></aside>

      <section>

        <aside><!-- related to the section --></aside>

        <blockquote>
          <aside><!-- related to the blockquote (not to the section!) --></aside>
        </blockquote>

        <div>
          <aside><!-- related to the section (not to the div!) --></aside>
        </div>

      </section>

    </article>

    <aside><!-- related to the body (not to the main!) --></aside>

  </main>

  <aside>
    <!-- related to the body -->
    <aside><!-- related to the (parent) aside --></aside>
  </aside>

  <nav>
    <aside><!-- related to the nav --></aside>
  </nav>

  <footer>
    <aside><!-- related to the body (not to the footer!) --></aside>
  </footer>

</body>
21
unor

Si ton <aside> est directement lié au contenu en vous <main> alors je le laisserais dans le <main>. Maintenant, cela étant dit ...

  1. Oui, il est sémantiquement acceptable d'avoir <aside> en dehors d'un <main> (comme dans, il est valide, mais votre contenu peut en justifier le contraire).
  2. Je ne comprends pas comment vous pensez que le lien de saut entre en jeu ici, mais sinon <aside> en dehors d'un <main> n'a aucun mal ni avantage pour l'accessibilité. Tant que vous suivez une bonne structure et un balisage valide, ça devrait aller.
  3. Je n'en connais aucun. J'ai <aside>s à l'extérieur <main> sur mon site et avait <aside> à l'intérieur <main> aussi, et je n'ai vu aucune différence dans mon classement. Étant donné que les moteurs de recherche sont généralement opaques sur des bits spécifiques comme celui-ci, je considérerais certains tests A/B si vous êtes concerné.

Documents connexes de HTML5 Doctor, écrits par l'un des éditeurs de spécifications HTML5:

11
aardrian