Meilleur balisage HTML5 pour la barre latérale
Je suis en train de configurer mes barres latérales WordPress) pour un thème HTML5 et que je souhaite vraiment utiliser before_widget et after_widget droite.
Ma question est donc la suivante: lequel des deux modèles de balisage est le plus approprié? Le code suivant est complètement en dehors du <article> élément.
Option 1: à part avec des sections
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Option 2: Div avec le retrait
<div id="sidebar">
<aside id="widget_1"></aside>
<aside id="widget_1"></aside >
<aside id="widget_1"></aside >
</div>
Je suppose que la question auxiliaire est alors quelle rubrique utiliser pour chaque titre de widget. Si j'emballe chaque widget dans un <section> puis <h1> semble le plus approprié. Si j'utilise <aside>, Je ne suis pas sûr.
Tous les avis sont les bienvenus. Les avocats du diable sont encouragés.
Tout d'abord de tout ASIDE doit être utilisé uniquement pour désigner le contenu associé au contenu principal, pas pour une barre latérale générique. Seconde , une de côté pour chaque barre latérale uniquement
Vous aurez un seul côté pour chaque barre latérale. Les éléments d'une barre latérale sont des div ou des sections à l'intérieur d'un aparté.
Je voudrais aller avec Option 1: Outre les sections
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Voici la spécification https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
Encore une fois, utilisez la section seulement s'ils ont en-tête ou pied de page, sinon utilisez un div simple.
Mise à jour du 17/07/27: Comme c'est la réponse la plus votée, je devrais la mettre à jour pour inclure les informations actuelles localement (avec des liens vers les références) .
De la spec [1]:
L'élément apart représente une section de page constituée d'un contenu en relation tangentielle avec le contenu du contenu de sectionnement parental, et qui peut être considérée comme distincte de ce contenu. Ces sections sont souvent représentées sous forme de barres latérales dans la typographie imprimée.
Génial! Exactement ce que nous recherchons. En outre, il est préférable de vérifier également <section>.
L'élément section représente une section générique d'un document ou d'une application. Une section, dans ce contexte, est un regroupement thématique de contenu. Chaque section doit être identifiée, généralement en incluant un en-tête (élément h1-h6) en tant qu’enfant de l’élément section.
...
Une règle générale veut que l’élément section ne soit approprié que si le contenu de cet élément est explicitement répertorié dans l’esquisse du document.
Excellent. Exactement ce que nous recherchons. Contrairement à <article> [2] <section> permet un contenu associé qui n'est pas autonome ou assez générique pour un élément <div>.
En tant que tel, la spécification semble suggérer que l'utilisation de l'option 1, <aside> Avec <section> Enfants, constitue la meilleure pratique.
Références
Regardez l'exemple suivant, tiré de spécification HTML5 concernant aside .
Il est clair que ce qui est actuellement recommandé (octobre 2012) consiste à regrouper les widgets à l'intérieur de aside éléments. Ensuite, chaque widget est celui qui le représente le mieux, un nav, une série de blockquotes, etc.
L'extrait suivant montre comment side peut être utilisé pour les blogs et autres contenus annexes sur un blog:
<body> <header> <h1>My wonderful blog</h1> <p>My tagline</p> </header> <aside> <!-- this aside contains two sections that are tangentially related to the page, namely, links to other blogs, and links to blog posts from this blog --> <nav> <h1>My blogroll</h1> <ul> <li><a href="http://blog.example.com/">Example Blog</a> </ul> </nav> <nav> <h1>Archives</h1> <ol reversed> <li><a href="/last-post">My last post</a> <li><a href="/first-post">My first post</a> </ol> </nav> </aside> <aside> <!-- this aside is tangentially related to the page also, it contains Twitter messages from the blog author --> <h1>Twitter Feed</h1> <blockquote cite="http://Twitter.example.net/t31351234"> I'm on vacation, writing my blog. </blockquote> <blockquote cite="http://Twitter.example.net/t31219752"> I'm going to go on vacation soon. </blockquote> </aside> <article> <!-- this is a blog post --> <h1>My last post</h1> <p>This is my last post.</p> <footer> <p><a href="/last-post" rel=bookmark>Permalink</a> </footer> </article> <article> <!-- this is also a blog post --> <h1>My first post</h1> <p>This is my first post.</p> <aside> <!-- this aside is about the blog post, since it's inside the <article> element; it would be wrong, for instance, to put the blogroll here, since the blogroll isn't really related to this post specifically, only to the page as a whole --> <h1>Posting</h1> <p>While I'm thinking about it, I wanted to say something about posting. Posting is fun!</p> </aside> <footer> <p><a href="/first-post" rel=bookmark>Permalink</a> </footer> </article> <footer> <nav> <a href="/archives">Archives</a> — <a href="/about">About me</a> — <a href="/copyright">Copyright</a> </nav> </footer> </body>
Sur la base de ce diagramme HTML5 Doctor , je pense que cela pourrait être le meilleur balisage:
<aside class="sidebar">
<article id="widget_1" class="widget">...</article>
<article id="widget_2" class="widget">...</article>
<article id="widget_3" class="widget">...</article>
</aside> <!-- end .sidebar -->
Je pense qu'il est clair que <aside> est l’élément approprié tant qu’il est à l’extérieur du principal <article> élément.
Maintenant, je pense que <article> est également approprié pour chaque widget de côté. En les mots du W3C :
L'élément article représente une composition autonome dans un document, une page, une application ou un site et, en principe, peut être distribué ou réutilisé indépendamment, par exemple. en syndication. Il peut s'agir d'un message de forum, d'un article de magazine ou de journal, d'une entrée de blog, d'un commentaire soumis par l'utilisateur, d'un widget ou gadget interactif ou de tout autre élément de contenu indépendant.
Le livre Directives HTML5 pour les développeurs Web: structure et sémantique des documents suggéré de cette façon (option 1) :
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Il indique également que vous pouvez utiliser des sections dans le pied de page. Donc, section peut être utilisée en dehors du contenu de la page.
ASIDE a depuis été modifié pour inclure également le contenu secondaire.
HTML5 Doctor a un excellent article à ce sujet: http://html5doctor.com/aside-revisited/
Extrait:
Avec la nouvelle définition de aparté, il est essentiel de rester conscient de son contexte. > Lorsqu'il est utilisé dans un élément d'article, le contenu doit être spécifiquement> lié à cet article (par exemple, un glossaire). > Utilisé en dehors d'un élément d'article, le contenu> doit être lié au site (par exemple, une blogroll, des groupes de navigation> supplémentaire et même de la publicité si ce contenu est lié à la page).