Best HTML5 markup for sidebar
HtmlSemantic MarkupHtml Problem Overview
I'm setting up my WordPress sidebars for an HTML5 theme and really wanting to use before_widget and after_widget right.
So my question is this: which of the two markup patterns is more appropriate? The following code is all completely outside the <article> element.
##Option 1: Aside with sections##
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
##Option 2: Div with Asides##
<div id="sidebar">
<aside id="widget_1"></aside>
<aside id="widget_1"></aside >
<aside id="widget_1"></aside >
</div>
I suppose the auxiliary question is then what heading to use for each widget title. If I wrap each widget in a <section> then <h1> seems most appropriate. If I use <aside>, I'm not sure.
All opinions welcome. Devil's advocates encouraged.
Html Solutions
Solution 1 - Html
First of all ASIDE is to be used only to denote related content to main content, not for a generic sidebar. Second, one aside for each sidebar only
You will have only one aside for each sidebar. Elements of a sidebar are divs or sections inside a aside.
I would go with Option 1: Aside with sections
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Here is the spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
Again use section only if they have a header or footer in them, otherwise use a plain div.
Solution 2 - Html
Update 17/07/27: As this is the most-voted answer, I should update this to include current information locally (with links to the references).
From the spec [1]:
> The aside element represents a section of a page that consists of > content that is tangentially related to the content of the parenting > sectioning content, and which could be considered separate from that > content. Such sections are often represented as sidebars in printed > typography.
Great! Exactly what we're looking for. In addition, it is best to check on <section> as well.
> The section element represents a generic section of a document or > application. A section, in this context, is a thematic grouping of > content. Each section should be identified, typically by including a > heading (h1-h6 element) as a child of the section element. > > ... > > A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
Excellent. Just what we're looking for. As opposed to <article> [2] which is for "self-contained" content, <section> allows for related content that isn't stand-alone, or generic enough for a <div> element.
As such, the spec seems to suggest that using Option 1, <aside> with <section> children is best practice.
References
Solution 3 - Html
Look at the following example, from the HTML5 specification about aside.
It makes clear that what currently is recommended (October 2012) it is to group widgets inside aside elements. Then, each widget is whatever best represents it, a nav, a serie of blockquotes, etc
> The following extract shows how aside can be used for blogrolls and > other side content on a blog: > > >
My wonderful blog
>My tagline
>My last post
>This is my last post.
> >My first post
>This is my first post.
> > >Solution 4 - Html
Based on this HTML5 Doctor diagram, I'm thinking this may be the best markup:
<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 -->
I think it's clear that <aside> is the appropriate element as long as it's outside the main <article> element.
Now, I'm thinking that <article> is also appropriate for each widget in the aside. In the words of the W3C:
> The article element represents a self-contained composition in a > document, page, application, or site and that is, in principle, > independently distributable or reusable, e.g. in syndication. This > could be a forum post, a magazine or newspaper article, a blog entry, > a user-submitted comment, an interactive widget or gadget, or any > other independent item of content.
Solution 5 - Html
The book HTML5 Guidelines for Web Developers: Structure and Semantics for Documents suggested this way (option 1):
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
It also points out that you can use sections in the footer. So section can be used outside of the actual page content.
Solution 6 - Html
The ASIDE has since been modified to include secondary content as well.
HTML5 Doctor has a great writeup on it here: http://html5doctor.com/aside-revisited/
Excerpt: >With the new definition of aside, it’s crucial to remain aware of its context. >When used within an article element, the contents should be specifically related >to that article (e.g., a glossary). When used outside of an article element, the >contents should be related to the site (e.g., a blogroll, groups of additional >navigation, and even advertising if that content is related to the page).
Solution 7 - Html
I'm surprised that none of the responses above consider responsive design.
I may have valid aside elements such as a tag cloud, links for further reading and so on together, one after the other, in my sidebar when my page is viewed on a desktop device. However, when my page is reduced on a mobile device to a single column then I will be separating those elements. My navigation element will go between my header and main content elements, and links for further reading will go below the main content element, above the footer.
As the semantic content of these elements is not changing with the width of the display window, then they need to be individually marked up as aside elements. It follows then, that the sidebar itself should not be marked up as an aside element, even when it only contains content of one type. In turn, this means that Option 1 in the original question must be undesirable (wrong?) and that the better answer should be Option 2.