etiquetas - Mejor marcado HTML5 para barra lateral
html5 tags list (6)
Estoy configurando mis barras laterales de WordPress para un tema HTML5 y realmente quiero usar before_widget y after_widget right.
Entonces mi pregunta es esta: ¿cuál de los dos patrones de marcado es más apropiado? El siguiente código está completamente fuera del elemento <article> .
Opción 1: Aparte de las secciones
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Opción 2: Div con Asides
<div id="sidebar">
<aside id="widget_1"></aside>
<aside id="widget_1"></aside >
<aside id="widget_1"></aside >
</div>
Supongo que la pregunta auxiliar es qué rumbo utilizar para cada título de widget. Si envuelvo cada widget en una <section> entonces <h1> parece más apropiado. Si uso <aside> , no estoy seguro.
Todas las opiniones son bienvenidas. Los defensores del diablo son alentados.
Basado en este diagrama de HTML5 Doctor , creo que este puede ser el mejor marcado:
<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 -->
Creo que está claro que <aside> es el elemento apropiado, siempre y cuando esté fuera del elemento <article> principal.
Ahora, estoy pensando que <article> también es apropiado para cada widget en el lado. En palabras del W3C :
El elemento de artículo representa una composición autónoma en un documento, página, aplicación o sitio y que, en principio, es distribuible independientemente o reutilizable, por ejemplo, en sindicación. Puede ser una publicación de foro, una revista o un artículo de periódico, una entrada de blog, un comentario enviado por el usuario, un artilugio o artilugio interactivo o cualquier otro elemento de contenido independiente.
El ASIDE se ha modificado desde entonces para incluir contenido secundario también.
HTML5 Doctor tiene una gran descripción aquí: http://html5doctor.com/aside-revisited/
Extracto:
Con la nueva definición de lado, es crucial estar al tanto de su contexto. > Cuando se usa dentro de un elemento de artículo, los contenidos deben estar específicamente relacionados con ese artículo (por ejemplo, un glosario). Cuando se usa fuera de un elemento de artículo, los contenidos deben estar relacionados con el sitio (por ejemplo, un blogroll, grupos de navegación adicional e incluso publicidad si ese contenido está relacionado con la página).
El libro Directrices de HTML5 para desarrolladores web: estructura y semántica para documentos sugeridos de esta manera (opción 1) :
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
También señala que puede usar secciones en el pie de página. Por lo tanto, la sección se puede usar fuera del contenido de la página real.
Mira el siguiente ejemplo, de la especificación HTML5 sobre aside .
Deja en claro que lo que actualmente se recomienda (octubre de 2012) es agrupar widgets dentro de elementos a aside . Entonces, cada widget es lo que mejor lo representa, un nav , una serie de blockquotes , etc.
El siguiente extracto muestra cómo se puede usar aparte para blogrolls y otro contenido secundario en 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>
En primer lugar, ASIDE se debe usar solo para denotar contenido relacionado al contenido principal, no para una barra lateral genérica. Segundo , un lado para cada barra lateral solamente
Tendrás solo un lado para cada barra lateral. Los elementos de una barra lateral son div o sección dentro de un lado.
Me gustaría ir con la Opción 1: Aparte de las secciones
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Aquí está la especificación https://www.w3.org/wiki/HTML/Elements/aside
De nuevo, use la sección solo si tienen un encabezado o un pie de página en el resto de ellos.
Ninguno de los dos es correcto Probablemente deberías estar usando DIV para ambos. <aside> no debe utilizarse para barras laterales, sino como una sección de contenido relacionado (como un glosario de términos o notas adicionales sobre el tema).
Ver también: http://html5doctor.com/understanding-aside/
Actualización: Como Jordan señaló a continuación, este artículo ha sido actualizado y debe ser referenciado en lugar del que publiqué originalmente. Y como siempre, cuando tenga dudas, consulte la especificación.
http://html5doctor.com/aside-revisited/
Actualización 17/07/27: Como esta es la respuesta más votada, debería actualizar esto para incluir información actual localmente (con enlaces a las referencias).
De la especificación [1] :
El elemento a un lado representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido del contenido de sección de crianza, y que podría considerarse separado de ese contenido. Dichas secciones a menudo se representan como barras laterales en la tipografía impresa.
¡Estupendo! Exactamente lo que estamos buscando. Además, es mejor verificar también en <section> .
El elemento de sección representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática de contenido. Cada sección debe identificarse, generalmente incluyendo un encabezado (elemento h1-h6) como elemento secundario del elemento de sección.
...
Una regla general es que el elemento de sección es apropiado solo si los contenidos del elemento se enumeran explícitamente en el esquema del documento.
Excelente. Justo lo que estamos buscando. A diferencia de <article> [2] que es para contenido "autónomo", <section> permite contenido relacionado que no es independiente, o lo suficientemente genérico para un elemento <div> .
Como tal, la especificación parece sugerir que usar la Opción 1, <aside> con <section> children es la mejor práctica.
Referencias