Best HTML5 markup for sidebar

Question

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  lt article gt  element   Option 1  Aside with sections   lt aside id  sidebar  gt       lt section id  widget 1  gt  lt  section gt       lt section id  widget 2  gt  lt  section gt       lt section id  widget 3  gt  lt  section gt   lt  aside gt    Option 2  Div with Asides   lt div id  sidebar  gt       lt aside id  widget 1  gt  lt  aside gt       lt aside id  widget 1  gt  lt  aside  gt       lt aside id  widget 1  gt  lt  aside  gt   lt  div gt    I suppose the auxiliary question is then what heading to use for each widget title  If I wrap each widget in a  lt section gt  then  lt h1 gt  seems most appropriate  If I use  lt aside gt   I m not sure   All opinions welcome  Devil s advocates encouraged

User · Accepted Answer

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   lt aside id  sidebar  gt       lt section id  widget 1  gt  lt  section gt       lt section id  widget 2  gt  lt  section gt       lt section id  widget 3  gt  lt  section gt   lt  aside gt    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

User · Answer

The book HTML5 Guidelines for Web Developers  Structure and Semantics for Documents suggested this way  option 1     lt aside id  sidebar  gt       lt section id  widget 1  gt  lt  section gt       lt section id  widget 2  gt  lt  section gt       lt section id  widget 3  gt  lt  section gt   lt  aside gt    It also points out that you can use sections in the footer   So section can be used outside of the actual page content

User · Answer

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

User · Answer

Based on this HTML5 Doctor diagram  I m thinking this may be the best markup    lt aside class  sidebar  gt       lt article id  widget 1  class  widget  gt     lt  article gt       lt article id  widget 2  class  widget  gt     lt  article gt       lt article id  widget 3  class  widget  gt     lt  article gt   lt  aside gt   lt  -- end  sidebar -- gt    I think it s clear that  lt aside gt  is the appropriate element as long as it s outside the main  lt article gt  element   Now  I m thinking that  lt article gt  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

User · Answer

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    lt body gt    lt header gt     lt h1 gt My wonderful blog lt  h1 gt     lt p gt My tagline lt  p gt    lt  header gt    lt aside gt     lt  -- 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 -- gt     lt nav gt      lt h1 gt My blogroll lt  h1 gt      lt ul gt       lt li gt  lt a href  http   blog example com   gt Example Blog lt  a gt      lt  ul gt     lt  nav gt     lt nav gt      lt h1 gt Archives lt  h1 gt      lt ol reversed gt       lt li gt  lt a href   last-post  gt My last post lt  a gt       lt li gt  lt a href   first-post  gt My first post lt  a gt      lt  ol gt     lt  nav gt    lt  aside gt    lt aside gt     lt  -- this aside is tangentially related to the page also  it   contains twitter messages from the blog author -- gt     lt h1 gt Twitter Feed lt  h1 gt     lt blockquote cite  http   twitter example net t31351234  gt     I m on vacation  writing my blog     lt  blockquote gt     lt blockquote cite  http   twitter example net t31219752  gt     I m going to go on vacation soon     lt  blockquote gt    lt  aside gt    lt article gt     lt  -- this is a blog post -- gt     lt h1 gt My last post lt  h1 gt     lt p gt This is my last post  lt  p gt     lt footer gt      lt p gt  lt a href   last-post  rel bookmark gt Permalink lt  a gt     lt  footer gt    lt  article gt    lt article gt     lt  -- this is also a blog post -- gt     lt h1 gt My first post lt  h1 gt     lt p gt This is my first post  lt  p gt     lt aside gt      lt  -- this aside is about the blog post  since it s inside the     lt article gt  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 -- gt      lt h1 gt Posting lt  h1 gt      lt p gt While I m thinking about it  I wanted to say something about    posting  Posting is fun  lt  p gt     lt  aside gt     lt footer gt      lt p gt  lt a href   first-post  rel bookmark gt Permalink lt  a gt     lt  footer gt    lt  article gt    lt footer gt     lt nav gt      lt a href   archives  gt Archives lt  a gt          lt a href   about  gt About me lt  a gt          lt a href   copyright  gt Copyright lt  a gt     lt  nav gt    lt  footer gt   lt  body gt

User · Answer

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  lt section gt  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  lt article gt   2  which is for  self-contained  content   lt section gt  allows for related content that isn t stand-alone  or generic enough for a  lt div gt  element   As such  the spec seems to suggest that using Option 1   lt aside gt  with  lt section gt  children is best practice   References   https   www w3 org TR html51 sections html the-aside-element https   www w3 org TR html51 sections html elementdef-article http   html5doctor com aside-revisited

[html] Best HTML5 markup for sidebar

Examples related to html

Examples related to semantic-markup