Best IT Recipes

Best HTML5 Sidebar Layout

I am customizing WordPress sidebars for an HTML5 theme and really want to use before_widget and after_widget .

So my question is: which of the two markup templates is more appropriate? The following code is completely outside the <article> element.

Option 1: In addition to 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 helper question is what should be used for each widget title. If I pack each widget into <section> , then <h1> seems to be the most suitable. If I use <aside> , I am not sure.

All opinions are welcome. Devil's lawyers are encouraged.

+61
html5 semantic-markup
Dec 06 '11 at 10:27
source share
6 answers

The first of all ASIDEs should only be used to indicate related content with the main content, and not for a common sidebar. Second , one for each sidebar

You will only have one side for each sidebar. Sidebar elements are div elements or sections within.

I would go with Option 1: Apart from the sections

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

Here is the specification https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

Use the section again only if they have a header or footer, otherwise use a regular div.

+54
Dec 07 '11 at 8:13
source share

Update 17/07/27: Since this is the most requested answer, I have to update it to include current information locally (with links to links).

From the specification [1] :

The aside element represents a section of a page that consists of content that is essentially related to parenting content, sectioning the content, and which can be considered separate from that content. Such sections are often presented as side panels in printed typography.

Big! Exactly what we are looking for. In addition, it is better to check <section> .

The section element represents a general section of a document or application. In this context, the section is a thematic group of contents. Each section should be identified, usually by including a heading (element h1-h6) as a child of the section element.

...

The general rule is that the section element is only relevant if the contents of the elements are explicitly specified in the document schema.

Fine. Just what we are looking for. Unlike <article> [2] , which is intended for "stand-alone" content, <section> allows related content that is not stand-alone or universal enough for the <div> element.

Therefore, the specification suggests that using option 1, <aside> with children <section> is best practice.

Recommendations

  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/
+24
Apr 17 '12 at 17:17
source share

Take a look at the following example: HTML5 specification about aside .

It clearly states that it is currently recommended (October 2012) to group widgets within aside elements. Then each widget is what best represents it, nav , a series of blockquotes , etc.

The following snippet shows how you can use other side blog content for blogrolls aside:

 <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 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>
+11
Oct 06
source share

Based on this HTML5 Doctor diagram, I think this might 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 is clear that <aside> is a suitable element if it is outside the main <article> element.

Now I think that <article> also suitable for every widget aside. In the words of the W3C :

An article element is an autonomous composition in a document, page, application, or site, and these are, in principle, independently distributed or reusable, for example. in syndication. This can be a forum post, magazine or newspaper article, blog post, user comment, interactive widget or gadget, or any other independent content item.

+6
Apr 19 '12 at 19:19
source share

In the book "HTML5 Guides for Website Developers: Structure and Semantics for Documents" this option is proposed (option 1):

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

It also indicates that you can use sections in the footer. Thus, the section can be used outside the actual content of the page.

+2
Feb 04 '16 at 4:33
source share

Since then, ASIDE has been modified to include secondary content as well.

HTML5 The doctor has a great entry on it here: http://html5doctor.com/aside-revisited/

Excerpts:

With the new definition aside, its important to stay up to date with your context. > When used within an element of an article, the content should be specifically related to this article (for example, a glossary). When used outside the element of an article, the content> should be associated with the site (for example, a blog role, additional> navigation groups, and even advertising if this content is associated with the page).

0
Nov 19 '15 at 0:14
source share


More articles:


All Articles