I know there are tons of questions about this topic but I can't find an authoritative source for the answer.
This is the official definition and the wiki page, and there there is more documentation, but there they don't explain the correct usage if not in a very simple examples or in different ways.
What I've "understood" so far:
<section> defines a part(section) of the page, like blogrolls, headlines news, blog entries list, comments list, and everything which can be with a common topic.
<article> defines a content which has sense estranged from the rest of the page (?) and which has a single topic (blog entry, comment, article, etc).
But, inside an <article>, we can split parts of it in sections using <section>, and in this case it has the function of container to mark chapters of a bigger text.
The doubt
If these sentences are correct (or partially correct) that means that <section> has two completly different usage cases.
We could have a page written in this way:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Fruits</title>
</head>
<body>
<h1>Fruits war blog</h1>
<section id="headlineNews"> <!-- USED AS CONTAINER -->
<h1>What's new about fruits?</h1>
<article><h1>Apples are the best</h1>Apples are better than bananas</article>
<article><h1>Apple's cakes</h1>With apples you can prepare a cake</article>
</section>
<section id="blogEntries"> <!-- USED AS CONTAINER -->
<h1>Articles about fruits</h1>
<article>
<h1>Apples vs Bananas</h1>
<section> <!-- USED AS CHAPTER -->
<h2>Introduction:</h2>
Bananas have always leaded the world but...
</section>
<section> <!-- USED AS CHAPTER -->
<h2>The question:</h2>
Who is the best? We don't know so much about apples...
</section>
</article>
</section>
</body>
</html>
And this is how looks the Outline:
1. Fruits war blog
1. What's new about fruits?
1. Apples are the best
2. Apple's cakes
2. Articles about fruits
1. Apples vs Bananas
1. Introduction:
2. The question:
So the <section> is thought with two completly different and not related semantic meanings?
Is it correct use:
<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
<article>
<section></section> <!-- USED AS CHAPTER -->
</article>
</section>
in this neasted way?
I've found that is possible to use in the inversed way:
<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
<section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
<article></article> <!-- COMMENT -->
</section>
</article>
But I can't find an answer to the way I've written below.
I guess read the discussion where the W3C group has wrote the basis of the <section> tag could be useful but I can't find it.
N.B. I'm looking for replies documented with authorative sources
http://www.w3.org/wiki/HTML/Elements/section is not the official definition of section. section is defined in the HTML5 specification, which currently is a Candidate Recommendation (which is a snapshot of the Editor’s Draft).
In the CR, section is defined as:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
section is a sectioning content element (together with article, aside and nav). Those sectioning elements and the headings (h1-h6) create an outline.
The following three examples are semantically equivalent (same meaning, same outline):
<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>
<!-- example 1: using section elements with corresponding heading levels -->
<section>
<h1>My first day</h1>
<p>…</p>
<section>
<h2>Waking up</h2>
<p>…</p>
</section>
<section>
<h2>The big moment!</h2>
<p>…</p>
</section>
<section>
<h2>Going to bed</h2>
<p>…</p>
</section>
</section>
<!-- example 1: using section elements with h1 everywhere -->
<section>
<h1>My first day</h1>
<p>…</p>
<section>
<h1>Waking up</h1>
<p>…</p>
</section>
<section>
<h1>The big moment!</h1>
<p>…</p>
</section>
<section>
<h1>Going to bed</h1>
<p>…</p>
</section>
</section>
So you can use section whenever (*) you use h1-h6. And you use section when you need a separate entry in the outline but can’t (or don’t want to) use a heading.
Also note that header and footer always belong to its nearest ancestor sectioning content (or sectioning root, like body, if there is no sectioning element) element. In other words: each section/article/aside/nav element can have its own header/footer.
article, aside and nav are, so to say, more specific variants of the section element.
two completly different usage cases
These two use-cases are not that different at all. In the "container" case, you could say that section represents a chapter of the document, while in the "chapter" case section represents a chapter of the article/content (which, ouf course, is part of the document).
In the same way, some headings are used to title web page parts (like "Navigation", "User menu", "Comments", etc.), and some headings are used to title content ("My first day", "My favorite books", etc.).
<article> and <section> are both sectioning content. You can nest one sectioning element inside another to slice up the outer element into sections.
HTML Living Standard, 4.4.11:
...
Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.
...
You can consider a <section> as a generic sectioning element. It's like a <div> that defines a section within its closest sectioning parent (or the nearest sectioning root, which may be the <body>).
An <article> is also a section, but it does have some semantics. Namely, it represents content that is self-contained (that is, it could possibly be its own page and it'd still make sense).
OK so here is what I've gathered from authorative sources.
MDN:
The HTML Section Element () represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.
Usage notes :
If it makes sense to separately syndicate the content of a element, use an element instead.
Do not use the element as a generic container; this is what is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.
Shay Howe's guide:
A section is more likely to get confused with a div than an article. As a block level element, section is defined to represent a generic document or application section.
The best way to determine when to use a section versus a div is to look at the actual content at hand. If the block of content could exist as a record within a database and isn’t explicitly needed as a CSS styling hook then the section element is most applicable. Sections should be used to break a page up, providing a natural hierarchy, and most commonly will have a proper heading.
dev.opera.com
Basically, the article element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it's transcript, a news story, or a single part of a serial story.
The section element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections.
Here's the official w3c take on section:
http://www.w3.org/wiki/HTML/Elements/section
Quote: "The [section] element represents a generic section of a document or application."
I guess, in theory if you have an article within an article then your nested selections example might work. But, why would you have an article within an article ? Makes little semantic sense.
Related
I was browsing the w3.org page about the article element and one of the exemples surprised me:
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: George Washington</p>
<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article>
<footer>
<p>Posted by: George Hammond</p>
<p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>
As you can see, the comments info (poster name and date) are in a footer element at the begining of each comment.
According to W3.org 4.3.8 The footer element it is a valid usage, but it seems quite strange to use it that way.
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
It is right, nothing says that it should sit under the actual article.
I would have used a header element for this usage but on 4.3.7 The header element it is precised that
A header typically contains a group of introductory or navigational aids.
But they also say about the footer element:
The primary purpose of these elements is merely to help the author
write self-explanatory markup that is easy to maintain and style; they
are not intended to impose specific structures on authors.
So why are they using the footer element in the example? Wouldn't a header element be more intuitive and semantic?
<section>
<h1>Comments</h1>
<article>
<header>
<p>Posted by: George Washington</p>
<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
</header>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article>
<header>
<p>Posted by: George Hammond</p>
<p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
</header>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
Is there a particular reason for that?
The semantic difference between footer and header is not always clear. In unclear cases, the important thing is that you use one of them at all, not which one to use.
Position of footer and header
The position doesn’t matter (as long as it’s inside of the relevant section). As a header is for introductory content, it will of course typically appear near the top of the section. For footer, the spec notes:
Footers don't necessarily have to appear at the end of a section, though they usually do.
It would even be possible to use them multiple times (not that it would necessarily be a good idea):
<article>
<footer>…</footer>
<header>…</header>
<p>Hello world</p>
<footer>…</footer>
<header>…</header>
<header>…</header>
</article>
Semantic differences between footer and header
What the elements represent, according to the spec’s definition:
footer: "a footer"
header: "introductory content"
What the elements "typically" contain, according to the spec:
footer: "information about its section such as who wrote it, links to related documents, copyright data"
header: "group of introductory or navigational aids"
What the elements may contain, according to the examples in the spec:
footer: "Back to …" link, publication date, navigation, copyright notice, link to ToS, references to the authors
header: introduction, title/heading, version number, date, links to related documents, copyright notice, navigation, status information, notices
WAI-ARIA roles (only in case its the footer/header of the body sectioning root):
footer has the contentinfo role ("information about the parent document")
header has the banner role ("mostly site-oriented content, rather than page-specific content")
Rule of thumb here is that footer should be used to mark meta information about enclosing section (in your example, that is author and pubtime for each individual comment). Also, as you noted, per spec it's not required that footer must be at "the foot" of the section.
In contrast, header is used for introductory content of enclosing section and should contain at least one heading element. In fact, I would assume that exclusion of heading element is main reason why original example uses footer element.
To avoid confusion, this doesn't mean that every heading should be wrapped in header since in that case it doesn't add any semantic value.
So general rule of thumb: if it has header AND some additional information (subtitle, pubdate, TOC, nav...) it can usually be enclosed in header. Any additional information/meta data about section that don't appear near heading in document flow (footnotes, related links, autor information, copyright...) can be enclosed in footer.
Reference:
- HTML5Doctor - Footer
- HTML5Doctor - Header
Plot: When building a coupons website I realize that their can be content that is not unique to the page but should be used inside the <main><article> ..here..</article></main>.
Problem: Just because w3schools state :
The content inside the element should be unique to the
document. It should not contain any content that is repeated across
documents.
But i have content which will be inside article. Like every time for example A coupon can be used by entering its code but a deal can only be activated by going to landing page.
This will be repeated in every 'coupon' post I will publish.
So now what I tried to use was.
<main><article><main>Unique content</main>
<aside>A coupon can be used by entering its code but a deal can only be activated by going to landing page</aside></article></main>
But again :
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendent of an <article>, <aside>,
<footer>, <header>, or <nav> element.
So what is the best way to format the UN-UNIQUE content inside <main> and/or <article>.
The main tag should be used to group those article and aside elements.
<main>
<article>
The unique document content.
</article>
<aside>
Related content for that document.
</aside>
</main>
tl;dr - use your common sense :)
This article on the actual w3 site has a good overview of what should go where. The overall structure is:
<body>
<header>
<!-- header content goes in here -->
</header>
<nav>
<!-- navigation menu goes in here -->
</nav>
<section id="sidebar1">
<!-- sidebar content goes in here -->
</section>
<main>
<!-- main page content goes in here -->
</main>
<aside>
<!-- aside content goes in here -->
</aside>
<footer>
<!-- footer content goes in here -->
</footer>
</body>
Option 1 - <section>s
They go on to say that <section>s, fairly obviously, can contain multiple <articles>, but that it is also possible to put <section>s inside an <article>, for example to define the introduction or summary:
<article>
<section id="introduction">
</section>
<section id="content">
</section>
<section id="summary">
</section>
</article>
So one option is to put a <section id="content"> and <section id="terms"> inside your article.
Option 2 - <footer>s
It does appear valid to use a <footer> for this sort of content. You said it is just for author, date, category, but w3 states in its spec for <footer>:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Your text is terms and conditions of a coupon, which could be considered as semantically similar to copyright data. It's a judgement call I think.
Option 3 - <div>s et al...
As a get-out, in the first link they do also say about <div>s:
You should use [a div] when there is no other more suitable element available for grouping an area of content...
So if it really isn't clear what to use, another possibility could be:
<article>
Blah blah
<div class="terms"></div>
</article>
Summary
To be honest, after all this, it seems there is no definitive answer and sites are unlikely to become super-strict in how they semantically parse documents for a while yet, because they know there are legions of people out there who will do it completely wrong. If you just stick a <p> with the same terms in at the end of each article, it probably won't make any real difference because the main text is unique.
I personally think as long as you use your common sense and choose something which doesn't completely go against the recommendations, you can't go too wrong.
According to the WHATWG (the informal group behind the HTML Living Document Standard), there is no problem in using a main element inside an article. The HTML Living Document says:
There is no restriction as to the number of main elements in a document. Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.
Consequently, you can write
<body>
<header>My Page Header</header>
<main>
<article><h1>My First Article</h1>
<main>My first article's content...</main>
<aside>A sidebar</aside>
</article>
<article><h1>My Second Article</h1>
<main>My second article's content...</main>
<aside>Another sidebar</aside>
</article>
</main>
</body>
However, the W3C HTML 5.3 Draft disallows this and states that "There must not be more than one visible main element in a document."
This is an interesting case of a disagreement about a central element of HTML. Amazing! It seems that there is again a schism between W3C authors and the web/browser developer professionals behind the WHATWG. In such a case, I would go with the WHATWG.
I would go with something like this :
<main>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
</main>
Anyway I think having multiple <main> tags is worse than having non-unique content in an <article> tag.
You can also take into consideration Schema.org for proper mapping your content with additional attributes ( itemprop ... )
I am very new to HTML5 and I need to implement an article container (for example, I need to create the classic structure for the WordPress articles where the user see a series of articles one below another), but I have some doubts about the semantic use of the new HTML5 components.
To do this I thought something like this:
<section>
<h1>My Posts:</h1>
<article>
<header>
<time datetime="2010-11-10" pubdate>10/11/2010</time>
<h2>FIRST POST TITLE</h2>
</header>
<p>
POSTS CONTENT
</p>
<footer>
<address>MY NAME</address>
</footer>
</article>
<article>
<header>
<time datetime="2010-11-01" pubdate>01/11/2010</time>
<h1>SECOND POST TITLE</h1>
</header>
<p>
POSTS CONTENT
</p>
<footer>
<address>MY NAME</address>
</footer>
</article>
</section>
So I have reasoned in the following way:
All the shown posts are contained in an external <section> element (because following the HTML5 specification a <section> represents a generic section of a document, in this case an area where posts are shown), the <sections> have its <h1> title.
Every post is represented by a specific <article> element (should be semantically correct).
Every article element represents a specific post and contains a <header> element that contains the date of publication and the post title. I used a <header> element to contain these information because this element is used to represent "a group of introductory or navigational aids".
Then I have a classic <p> to contain the article textual content (but I can also wrap it into a div or is it better use a new <section> if the text is long and detailed?)
Finally I have put the e-mail contact into a <footer> element because it is an information about the container (the <article> element).
Is this a valid structure for my problem? Is it semantically correct in HTML5?
This looks largely great to me. headers and footers were changed a while ago to allow them to be used in sections and articles.
However, the p element should be used for a single paragraph. In all likelihood, your articles will have more than a single paragraph, and WordPress will generally generate these for you based on line breaks. If you need to wrap all of your article contents into an element, a div will be sufficient. If your article is long and has several sections, you could use these instead.
The address element threw me off a bit first, as not many people use it, but its purpose is to describe the contact address of the author of the document (or part of the document), so your usage is absolutely correct.
For bonus points you can consider implementing the hCard standard for formatting the email: http://microformats.org/wiki/hcard
Basically, aside from the use of the paragraph element to wrap the entire article, this is absolutely fine! You've shown a lot of thoughts behind your decisions, which is quite rare these days.
Your markup is fine.
(Note that for the first article you used h2 and for the second one h1. While both ways are possible, why not stick to one variant?)
is it better use a new section if the text is long and detailed?
Don’t include the whole text in a section! But when you use sub-headings in the article, you are "encouraged" to use explicit section elements to group the heading and its content.
Should <main> be considered something important to put inside <section>? Like having many articles with <main> 'article' in <section>? If not then how to use them together?
From the HTML5 specs :
Authors must not include more than one main element in a document.
Authors must not include the main element as a descendant of an
article, aside, footer, header or nav element.
The main element represents the main content of the body of a document
or application.
So you should use main as a delimiter of your main content of your website and use article or sections inside main as a delimiter of context, here is a sample of how to handle main :
<main>
<h1>Skateboards</h1>
<p>The skateboard is the way cool kids get around</p>
<article>
<h2>Longboards</h2>
<p>Longboards are a type of skateboard with a longer
wheelbase and larger, softer wheels.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Electric Skateboards</h2>
<p>These no longer require the propelling of the skateboard
by means of the feet; rather an electric motor propels the board,
fed by an electric battery.</p>
<p>... </p>
<p>... </p>
</article>
</main>
NB : Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
Quoting the HTML5 Spec again:
Authors are advised to use ARIA role="main" attribute on the main
element until user agents implement the required role mapping.
HTML5 doctor, though somewhat outdated, does provide a useful working example of the main element:
<main id="content" class="group">
<!-- [...] -->
</main>
In short, the main element should be used whenever possible (but only once per page). Alternatively, you can use role="main" on a sectioning element with the exact same results in terms of WAI-ARIA. Read more about WAI-ARIA roles in my post. For example:
<div class="main-content-column">
<article role="main" id="content">
[...]
</article>
</div>
I don't see how assigning the role="main" to a section element could be semantic at all, but there may be use cases. Generally, you'll want to use the article tag to identify main content. The above snippet provides the exact same semantic information as <main> (note that declaring role="main" on a <main> element is not required by modern screen readers and user agents).
The main tag should be for the main content on the page.
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.
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.
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
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/
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>Example Blog
</ul>
</nav>
<nav>
<h1>Archives</h1>
<ol reversed>
<li>My last post
<li>My first post
</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>
Archives —
About me —
Copyright
</nav>
</footer>
</body>
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.
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.
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.
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).