Meilleur balisage HTML5 pour la barre latérale

Je suis dans mon WordPress encadrés pour un thème HTML5 et vraiment vouloir utiliser before_widget et after_widget droit.

Donc ma question est: lequel des deux balisage des modèles est le plus approprié? Le code suivant est tout à fait en dehors de la <article> élément.

Option 1: Côté avec les sections

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

Option 2: Div avec des Apartés

<div id="sidebar">
    <aside id="widget_1"></aside>
    <aside id="widget_1"></aside >
    <aside id="widget_1"></aside >
</div>

Je suppose que l'auxiliaire question est alors ce titre à utiliser pour chaque widget titre. Si j'envelopper chaque widget dans une <section> puis <h1> semble la plus appropriée. Si j'utilise <aside>, je ne suis pas sûr.

Toutes les opinions de bienvenue. L'avocat du diable encouragé.

Remarque: chaque barre latérale doit être un aside élément nécessairement (nombre, tout de même). Dépend du contenu spécifique.

InformationsquelleAutor mrwweb | 2011-12-06

html5 semantic-markup

54

Première de tous les CÔTÉ doit être utilisé uniquement pour désigner le contenu lié au contenu principal, et non pas pour un générique de la barre latérale. Deuxième, un côté pour chaque barre latérale seulement

Vous avez un seul côté de chaque barre latérale. Les éléments de la barre latérale sont les divisions ou sections à l'intérieur d'un côté.

Je voudrais aller avec Option 1: Côté avec les sections
```
<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>
```
Voici les spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

De nouveau utiliser l'article que si elles ont un en-tête ou pied de page en eux, sinon utilisez un simple div.
- J'aime la façon dont cette option semble. Je suppose que mon souci avec cette option, ce que je vous ai présenté ci-dessus, c'est que si chaque widget n'a rien à voir avec les autres, sont-ils vraiment des sections d'un seul côté? Je ne sais pas.
- Ils sont certainement les sections à l'intérieur d'un côté. J'ai ma réponse est correcte, vous pouvez cliquer sur " /(cochez la case) aux taux d'elle comme la réponse correcte.
- Donc, ce qui fait d'eux des sections d'un seul côté plutôt que de multiples indépendants des apartés? Je ne suis pas vendu. Comme je l'ai dit, j'aime la façon dont l'Option 1 regarde, mais quand j'y pense, ça n'a pas de sens autant.
- si u ont 2 barres latérales vous aurez 2 de côté. mais vous avez une barre latérale avec plusieurs sections/widgets en elle . c'est pourquoi l'option 1. Un côté pour chaque barre latérale
- Je pense que la solution donnée ci-dessus repose trop sur l'équivalence entre le côté de l'élément et le style visuel de #sidebar. Un typique WordPress barre latérale contient un blogroll, archives des liens, peut-être une connexion widget. Ils sont tous liés à la page/site, mais uniquement en cette qualité sont-ils liés les uns aux autres. Ils pourraient logiquement être mis dans de nombreux endroits différents, mais ils se trouvent être regroupés dans une barre latérale. Donc, je pense que @Attente pour Dev... ci-dessous est la plus proche. Si ces widgets sont regroupés visuellement, utiliser un div.
- pour la navigation sur le site que se trouve être s'affiche visuellement que d'un côté nav (plutôt que du haut de nav), est l'élément correct encore nav?
InformationsquelleAutor aWebDeveloper
24

Mise à jour 17/07/27: Que c'est le plus voté réponse, je devrais mise à jour afin d'inclure des informations actuelles localement (avec des liens pour les références).

De la spec ^[1]:

L'élément aside représente une section d'une page qui se compose de
contenu tangentiellement liés au contenu de la parentalité
le sectionnement du contenu, et qui pourrait être considéré comme distinct de celui
contenu. Ces articles sont souvent représentés par des barres latérales en imprimé
la typographie.

Grand! Exactement ce que nous recherchons. En outre, il est préférable de vérifier sur <section> ainsi.

La section de l'élément correspond à une section générique d'un document ou d'
application. Une section, dans ce contexte, est un groupe thématique de
contenu. Chaque section doit être identifié, généralement en incluant un
titre (h1-h6 élément) en tant qu'enfant de l'élément de section.

...

Une règle générale est que l'élément de section est pertinente que si l'élément de contenu devrait être explicitement mentionné dans le document du plan.

Excellent. Juste ce que nous recherchons. Contrairement à <article> ^[2] qui est pour "autonome" de contenu, <section> permet liées à du contenu qui n'est pas autonome, ou suffisamment générique pour un <div> élément.

En tant que tel, le spec semble suggérer que l'utilisation de l'Option 1, <aside> avec <section> enfants est la meilleure pratique.

Références
- Lien (html5doctor.com/aside-revisited) dit le contraire. L'OP a mentionné qu'il est utilisé à l'extérieur <article>.
- J'ai lu tous les deux que l'article et celui posté par @shawn. J'ai pensé ni vraiment résolu le problème et c'est pourquoi j'ai posté ceci dans la première place. J'ai fini par aller avec @web-développeurs suggéré <aside> avec <section>s. Il ne se sent pas tout à fait raison, mais je n'ai toujours pas trouver quelque chose de mieux.
- Désolé, mais je suis en désaccord! 🙂 L'article que vous citez a été revisité en octobre 2009 (ce qui est après que vous avez posté votre réponse!) à noter que "aside est maintenant acceptable pour contenu secondaire lorsqu'il n'est pas imbriquée à l'intérieur d'un article de l'élément." Ceci est en ligne avec le W3C HTML5 et WHATWG HTML spécifications, à la fois explicitement recommandons de l'utiliser à cette fin et d'inclure des exemples de la façon de le faire.
- Mise à jour de ma réponse 🙂
- Génial—et maintenant, le haut-voté réponse est correct aussi! 😀
- Ce n'est pas explicitement de répondre à la question.. Que devrions-nous utiliser ?
- Mis à jour explicitement afin de répondre à la question et être en ligne avec les plus récentes spec (juillet 2017).
InformationsquelleAutor David Bradbury

Regardez l'exemple suivant, à partir de la Spécification HTML5 sur côté.

Il est clair que ce qui est actuellement recommandé (octobre 2012), il est de groupe de widgets à l'intérieur aside éléments. Ensuite, chaque widget est ce que représente le mieux, un nav, une série de blockquotes, etc

L'extrait suivant montre comment à part peut être utilisé pour les blogrolls et
l'autre côté du contenu 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>

InformationsquelleAutor Waiting for Dev...

6

Sur cette base HTML5 Médecin diagramme, je pense que c'est peut ê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> 
```
Je pense qu'il est clair que <aside> est l'élément tant que c'est à l'extérieur le principal <article> élément.

Maintenant, je pense que <article> est également approprié pour chaque widget dans la de côté. Dans les paroles du W3C:

L'article élément correspond à une composition autonome dans un
le document, la page, l'application ou le site et qui est, en principe,
indépendamment distribuables ou réutilisables, par exemple en syndication. Cette
peut être un post sur le forum, un magazine ou un article de journal, une entrée de blog,
un soumis par l'utilisateur commentaire, interactif widget ou gadget, ou tout
autre élément de contenu.
- Il dépend entièrement du contenu des widgets. Dans de nombreux cas, cette utilisation de article serait incorrect.
- Ouais, je pense que la plupart du temps article ne serait pas correct. Un bon point, c'est de penser à la syndication... en général, vous n'avez pas besoin de syndicat pour les widgets...
- l'article peut ne pas être correcte dans 99% des cas
- Contenu dans une barre latérale serait article si c'est un article complet. si c'est un aperçu ou de l'exception, il peut être article ou peut-être mieux comme un div, ol, ou peut-être figure.
InformationsquelleAutor mrwweb
2

Le livre HTML5 lignes Directrices pour les Développeurs Web: Structure et de la Sémantique pour les Documents suggéré 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 souligne également que vous pouvez utiliser les sections dans le pied de page. Donc, l'article peut être utilisé en dehors de la page de contenu.

InformationsquelleAutor alds
0

Le CÔTÉ a depuis été modifiée pour inclure le contenu secondaire ainsi.

HTML5 Médecin a un excellent article sur le sujet ici:
http://html5doctor.com/aside-revisited/

Extrait:

Avec la nouvelle définition de côté, il est essentiel de demeurer conscient de son contexte. >Quand il est utilisé dans un article de l'élément, le contenu doit être spécifiquement liées >à cet article (par exemple, un glossaire). Lorsque utilisé en dehors d'un article de l'élément, le >contenu doivent être liées au site (par exemple, un blogroll, des groupes de supplémentaires >navigation, et même la publicité si le contenu est lié à la page).

InformationsquelleAutor Kray

Vous devez vous connecter pour publier un commentaire.