Meilleur balisage HTML5 pour la barre latérale

Question

Meilleur balisage HTML5 pour la barre latérale

Demandé el 6 de Décembre, 2011: Quand la question a-t-elle été
40223 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

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 l' <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> alors <h1> semble la plus appropriée. Si j'utilise <aside>, je ne suis pas sûr.

Tous les avis de bienvenue. L'avocat du diable encouragé.

Demandé el 6 de Décembre, 2011 par mrwweb

Answer 1

4 Réponses

Answer 2

81voto

aWebDeveloper Points 5546

D'abord de tous les CÔTÉ doit être utilisé uniquement pour désigner le contenu lié au contenu principal pas pour un générique de la barre latérale. La seconde, Une de côté pour chaque barre latérale seulement

Vous avez Un seul côté de chaque barre latérale. Éléments d'une barre latérale div ou de la section à l'intérieur d'un côté.

Je voudrais aller avec l'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 http://dev.w3.org/html5/spec/the-aside-element.html#the-aside-element

Répondu el 7 de Décembre, 2011 par aWebDeveloper (5546 Points )

Answer 3

28voto

Conexion Points 639

Aucune n'est correcte. Vous devriez probablement à l'aide de DIV pour les deux. <aside> n'est pas utilisé pour des barres de navigation, mais une section de contenu (tels qu'un glossaire de termes ou d'autres notes sur le sujet).

~~Voir aussi: http://html5doctor.com/understanding-aside/~~

Mise à jour: la Jordanie a souligné ci-dessous, cet article a été mis à jour et doit être référencé à la place de celui que j'ai publié d'origine. Et comme toujours, en cas de doute, reportez-vous à la spécification!

http://html5doctor.com/aside-revisited/

Répondu el 17 de Avril, 2012 par Conexion (639 Points )

Answer 4

13voto

Waiting for Dev... Points 3065

Regardez l'exemple suivant, à partir de la spécification HTML5 sur aside.

Il est clair que ce qui est actuellement recommandé (octobre 2012), il est de groupe de widgets à l'intérieur d' aside - éléments. Ensuite, chaque widget est ce que représente le mieux, un nav, une série d' 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="http://stackoverflow.com/last-post">My last post</a>
    <li><a href="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="http://stackoverflow.com/archives">Archives</a> -
   <a href="http://stackoverflow.com/about">About me</a> -
   <a href="http://stackoverflow.com/copyright">Copyright</a>
  </nav>
 </footer>
</body>

Répondu el 6 de Octobre, 2012 par Waiting for Dev... (3065 Points )

Answer 5

8voto

mrwweb Points 348

Sur cette base HTML5 Médecin schéma, je pense que c'est peut-être le meilleur de 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 qu' <aside> est le bon élément, tant que c'est en dehors de la principale <article> élément.

Maintenant, je pense que l' <article> est également approprié pour chaque widget dans la de côté. Dans les mots 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.

Répondu el 19 de Avril, 2012 par mrwweb (348 Points )

Meilleur balisage HTML5 pour la barre latérale

Option 1: Côté avec les sections

Option 2: Div avec des Apartés

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Meilleur balisage HTML5 pour la barre latérale

Option 1: Côté avec les sections

Option 2: Div avec des Apartés

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: