Search code examples
htmlsemantic-markup

Best HTML5 markup for sidebar

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.

Solution

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