82

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.

1
  • 2
    Note: Not every sidebar should be an aside element necessarily (many should be, though). Depends on the specific content.
    – unor
    Oct 2, 2012 at 11:04

8 Answers 8

81

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.

6
  • 1
    I like how that option looks. I suppose my concern with that option, which I should have laid out above, is that if each widget has nothing to do with the others, are they really sections of a single aside? I don't know.
    – mrwweb
    Dec 7, 2011 at 17:24
  • They are definitely sections inside a aside. I my answer is correct you can click on the '/(tick) mark to rate it as the correct answer. Dec 7, 2011 at 17:39
  • So what makes them sections of a single aside rather than multiple independent asides? I'm not sold. Like I said, I like how Option 1 looks, but when I think about it, it doesn't make as much sense.
    – mrwweb
    Dec 7, 2011 at 23:02
  • if u have 2 sidebars you will have 2 aside. but you have one sidebar with several sections/widgets in it . thst's why option 1. One aside for each sidebar Dec 8, 2011 at 5:14
  • 3
    I think the solution given above relies too much on equivalence between the aside element and the visual styling of #sidebar. A typical WordPress sidebar will contain a blogroll, archive links, maybe a login widget. They're all related to the page/site, but only in that capacity are they related to each other. They could logically be put in many different places, but they happen to be grouped together in one sidebar. So I think @Waiting for Dev... below is closer. If those widgets are grouped together visually, use a div. Feb 22, 2015 at 13:36
28

Update 2017/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

  1. https://www.w3.org/TR/html51/sections.html#the-aside-element
  2. https://www.w3.org/TR/html51/sections.html#elementdef-article
  3. http://html5doctor.com/aside-revisited/
6
  • 3
    Related link (html5doctor.com/aside-revisited) says otherwise. OP did mention that this is used outside <article>.
    – Shawn Chin
    Apr 17, 2012 at 17:21
  • @conexion, I've read both that article and the one posted by @shawn. I thought neither really resolved the issue which is why I posted this in the first place. I ended up going with @web-developers suggested <aside> with <section>s. It doesn't feel quite right but I still haven't come up with anything better.
    – mrwweb
    Apr 17, 2012 at 21:19
  • 2
    Sorry, but I have to disagree! :) The article you cite was revisited in October 2009 (which is after you posted your answer!) to note that "aside is now acceptable for secondary content when not nested within an article element." This is in line with the W3C HTML5 and WHATWG HTML specifications, both of which explicitly recommend using it for this purpose and include examples of how to do so. Aug 15, 2012 at 15:23
  • @Conexion Awesome—and now the top-voted answer is correct too! :D Aug 16, 2012 at 9:51
  • This doesn't explicitly answer the question.. What should we use ?
    – Tofandel
    Dec 14, 2014 at 18:39
13

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:

<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>
8

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.

3
  • 3
    It totally depends on the content of the widgets. In many cases this use of article would be incorrect.
    – unor
    Oct 2, 2012 at 11:03
  • Yeah, I think most of times article would not be correct. A good point is to think about syndication... usually you don't need to syndicate to widgets... Oct 6, 2012 at 9:34
  • Content in a sidebar would be article if it's a full article. if it's a preview or except it might be article or might be better as a div, ol, or maybe figure.
    – Slam
    Oct 23, 2017 at 23:27
3

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.

1

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.

1
  • Agree. Perhaps it is due to this being such an old question. Jul 11, 2022 at 20:40
0

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).

0

Example

If you are doing a sidebar with Nav:

<aside>
    <nav>
      <ul>
        ...
      </ul>
    </nav
</aside>

Semantics

aside - will semantically mean that the content within it is additional/auxiliary to the content in the main article on the page. Content should be short and sweet.

nav - will say that this is navigation. Content should be short and sweet.

section - are a means to break up a page, so sections need to have Headings, think a section in a book, will have a heading. Would be an overkill for an aside.

Closing

Otherwise, you can really do what you want with HTML. For Semantic HTML you just want to think about if you were to read your HTML without any visuals will it make sense?

For the best effect image, you are blind, could you explain the structure of your page by looking at its HTML tags, so that the sea of text has some structure?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.