Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I'm really struggeling to get the HTML5 outline right and also keeping SEO in mind. I only want 1x H1 on the page, and this has to be the content article title. But HTML5 Outline forces me to give the header and nav section a title. Else it will say "Untitled Body" or "Untitled Nav section". But it doesn't feel right to have 2x H1's on my page.
This is the structure now:
<body>
<header>
<h1>Company name</h1>
Logo img
</header>
<nav>
<h2>Main nav</h2>
<ul></ul>
</nav>
<main role="main" id="main">
<section>
<header>
<h1>Article</h1>
</header>
<p>Content</p>
<h2>Article subtitle</h2>
</section>
</main>
<footer>
<nav>
<h2>Footer nav</h2>
<ul></ul>
</nav>
</footer>
</body>
The outline looks like this:
1. Company name
1. Main nav
2. Article
1. Article subtitle
3. Footer nav
The outline looks alright, but the HTML code with multiple H1 headings doesn't feel right. Any thoughts about this?
If you don’t want headings in the first header and in nav, then just drop them. You don’t need to care about any developer tools that show the “HTML5 outline”, because browser don’t do anything with the HTML outline algorithm and neither do screen readers or any other tools for end users.
Structuring your markup correctly with headings is important to screen-reader users. But the best-practice way to do that in the right way for screen-reader users means using explicit h1-h6 headings and not using them out of order — and not using nested h1. In particular, if you’re using section, structuring your markup correctly with headings means doing things like this:
<body>
<h1>My document</h1>
…
<section>
<h2>Foo</h2>
…
<section>
<h3>Bar</h3>
…and structuring your markup correctly with headings means not doing things like this:
<body>
<h1>My document</h1>
…
<section>
<h1>Foo</h1>
…
<section>
<h1>Bar</h1>
That is, if you care about screen-reader users, then do not use the h1 in nested sections like that.
The reason you should not do that is: The “HTML5 outline” in the HTML spec says, for assistive-technology (AT) purposes (screen readers), browsers must follow an outline algorithm for assigning heading levels such that those nested h1 headings are instead exposed as h2-level and h3-level headings — but browsers don’t actually follow that outline algorithm in the HTML spec.
Instead, browsers expose the heading levels of any nested h1 headings to AT just as h1-level headings — no matter how far down you have them in nested section elements.
That means, when screen-readers user try to navigate the example above, they will just see it as a document with only h1-level headings — they won’t see any more structure for the headings than that, because browsers do not actually follow the HTML5 outline algorithm.
That is, browsers do not assign different heading levels to those nested h1 headings — despite the HTML spec saying that they must. Browsers just ignore that requirement.
I only want 1x H1 on the page, and this has to be the content article title.
I don't know where you heard that you should have only one H1 on the page for SEO reasons. This has not been true at least since we entered the new millennium. You give the search engines far too little credit. They can index your page just fine whether it has zero, one or fifty H1's.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm new to web layout so forgive me if my question seems amateurish. I am trying to layout a landing page consisting of text boxes which will contain links to other pages on the site. The rough design is here:
http://silvercoastlife.com/wptest/landing-page-tester/
So far I have been using div to define the elements on the page but now I have come across article and wonder if I should be using this instead, especially as for SEO purposes I would like each box to have individual h1 headlines.
Thank you in advance for any advice you can offer.
Article would generally be wrapped in a <div> in HTML4, and the subsections would only be suggested by <h1>-<h6> elements. In HTML5 the article should be wrapped in <article>, and the subsections of the <article> should be explicitly indicated by wrapping them in <section> elements, perhaps in ordered list items if you’d like section numbering.
<article>
<h1>Title</h1>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
</article>
For more you can use this reference.
HTML5 is made for exactly the thing you want my friend, the new HTML5 elements certainly serve a SEO purpose in that they can define a lot of portions of your website.
Here is a list of HTML5 tags
HTML5 tags can be used in a very flexible way as long as they serve the correct purpose.
For instance the <header> tag.
It could be used as a header for your website but could also be used as a header for an article. It's multi-purpose but still defines what it is.
I'm pretty sure that if you have a <header> tag within an <article> tag a smart search engine will know the difference between the information in the one within the <article> and a website <header> for instance.
Also - there's tags for every basic definition in a website (as seen in the list above)
Some of the more useful ones I'll list here
<header>
<footer>
<aside>
<nav>
<section>
<main>
These are just some examples and they all serve a semantically different purpose like the <main> tag which is supposed to represent the main content of website or as MDN puts it:
The HTML <main> element represents the main content of the <body> of
a document or application. The main content area consists of content
that is directly related to, or expands upon the central topic of a
document or the central functionality of an application. This content
should be unique to the document, excluding any content that is
repeated across a set of documents such as sidebars, navigation links,
copyright information, site logos, and search forms (unless the
document's main function is as a search form).
Each link above in the list goes to the MDN page for the specified HTML element, you can read up on the semantics per element if you want to know exactly how they should be used.
Furthermore the <div> tag is just a convenient tag to use when things start to get vague or you just need a container that only serves positioning purposes etcetera, it's not wrong or bad to use a <div> tag anywhere either - It's just better to use tags that fit the actual content of your site for SEO purposes.
A small side-note would also be that using these new HTML5 tags could cause incompatibility with older browsers but so far everyone's caught up pretty well. so In general that shouldn't be a problem unless you need to support older browsers.
Maybe the relevant element you are looking for is actually the <section> element as you are defining different sections related to the same page instead of separate articles on different topics.
The below is taken from the following article: http://oli.jp/2009/html5-structure1/
<div> — the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning.
<section> — a generic document or application section. A <section> normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface.
<article> — an independent part of a document or site. This means it should be able to ‘stand alone’, and still make sense if you encountered it somewhere else (e.g. in an RSS feed). Examples include a weblog article (duh), a forum post or a comment. Like <section> these generally have a header, and maybe a footer.
You should just take into consideration that article will not be recognized in IE8. As to SEO, HTML5 tags are easier to understand by a machine. Not just the word but the intent and if used properly, like in the Suvro's example and reference, it can actually help.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 months ago.
Improve this question
I'm having trouble understanding the proper usage of HTML headings. I'm using books and online resources to self-learn but there are slight discrepancies on how to use them.
Note that the h1 tag is only used once, as the main heading of the page. h2 to h6, however, can be used as often as desired, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.
the logical heading level reflects its importance in relation to the main content.
So the question is:
Do I use them in order where h4 must be a sub-heading of h3 which should be a sub-heading of h2 and so on or use the heading levels according to its importance in relation to the main content?
Although, I have seen both methods being used. However, the second method kind of messes with the document outline. Just want to get some other opinions on this.
For HTML5:
Decide which outline your document should have.
Use heading elements (h1-h6) and sectioning content elements (section, article, aside, nav) to achieve this outline.
Both statements you quoted are not correct or complete:
Regarding [1]: The h1 doesn’t have to be used only once per document (and it doesn’t have to be used for the "main heading").
Regarding [2]: The spec defines the heading rank, which doesn’t necessarily have to be importance.
When you always wrap sections in a sectioning content element (the spec encourages to do this), so every section has one heading at maximum, then it doesn’t matter which heading rank you choose, but:
[…] authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level
When you don’t always use sectioning content elements where appropriate, so a section has more than one heading, skipping heading levels (or using them for specifying "importance") can lead to an incorrect outline.
Your webpage is not going to break if you don't follow the order or have more than 1 h1 tags but it will definitely look ugly.
Following point 1 and point 2 that you mentioned is not mandatory but advisable mainly for search engine optimization(seo). It's one of the white hat seo techniques which will somewhat help in your web page ranking by a search engine crawler. Secondly, your webpage would be more semantically correct and with a better looking outline.
It really does not matter what order you use them in. The reason that they say to use them in order is probably because if you had text in the body of the document that was larger than the title, it would look strange.
It is basically the same as changing the font-size and font-weight because that is what it does in addition to some padding.
Rule of thumb: If it looks fine without any CSS, it's fine. Of course, rich content will never work without styling, but strive to make it look as good as possible without CSS.
The main difference between levels in font size. You should be fine, whatever you do with them, as long as you don't do
<h6>Page heading</h6>
<h5>Section heading</h5>
<h4>Subsection heading</h4>
Or weird stuff like that. h1 is supposed to be the biggest and most important, and while h6 (or something else, e.g. <bigheading></bigheading> (yes, CSS will work on any tag)) might work if you style them right, they are not recommended or semantically correct.
Regarding the Lighthouse accessibility audits, heading levels should be sequentially-descending order and use CSS to visually style the headings as desired. Instead of skipping heading levels to achieve a desired visual style.
For example:
<h1>Page title</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
You can get in-depth information about structured headings in the official documentation.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Headings are important, search engines use the headings to index the structure and content of your web pages.
Users often skim a page by its headings. It is important to use headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
Use only one heading tag like h1 or h2 rather than using many heading tags.Using multiple heading tags makes webpage looks messy.
Use paragraph with font-size in css,it makes it flexible regards any change in size.
Unless you're doing some SEO, you don't need to worry about in which order you use the HTML H1.....H6 headings. But It is recommended to use the H1 heading in the first place, but in general it is acceptable in any order.
This below order is just show them in a particular order nothing else.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
Here is a great reference from SnoopCode http://www.snoopcode.com/html/html-headings and how to use them.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I'm building a website that contains news. I've got a page with a list of the news articles. And a second page which shows the details of the articles.
And I've got some questions about the structure of the page which shows a single article.
Here is how the page looks like:
<body>
<header data-role="header">
<h1>Article detail</h1>
</header>
<div data-role="content">
<article>
<header>
<h2>Article title</h2>
<p class="lead">Lead</p>
<p><time datetime="2012-10-15" pubdate="pubdate">October 15, 2012</time></p>
</header>
<p>Article content</p>
</article>
</div>
</body>
In a SEO point of view, is ok if the <h1> is always the same and only the <h2> change depending of the article?
I was thinking to put the article title in the <h1> too. But it means we will have the same <h1> and <h2>. I don't really know if it's a good practice.
What's your advice?
I think having "Article detail" as heading doesn't make sense here. It would be similar if the top heading of this very question on Stack Overflow would be "Question". Or if a blog post would have the heading "Blog post".
Your example (let's assume the article title is "John Doe wins!") would produce this outline:
- Article detail
-- John Doe wins!
The page does not contain an "Article detail", it is the article itself, right?
As your pages are part of a website, the heading for the whole page should probably be the site heading (the same for all pages that belong to this site).
The article title would be the main content of that page, but it's still a "child" of the site, so it gets hierarchy level 2.
If you'd have a site navigation ("All news", "Contact", …), this would get level 2 also.
So (let's assume the site is called "ACME News") this would be a suitable outline for the page:
- ACME News
-- John Doe wins!
-- (Navigation)
As long as you use sectioning elements (section, article, nav, aside), you may use h1 everywhere. Or, as you did it in your example, use the headings h2-h6 according to the ("calculated") outline. Semantically there would be no difference.
If and how search engines handle this … well, some probably understand HTML5, some don't. Some talk about it, some not. The (good) search engines will be able to interpret the structure of HTML5 documents (resp. don't "de-rank" pages just because they use HTML5 according to the spec). It's the way how pages will be marked up, some even now and many more in the future.
For your site, I bet most search engines wouldn't even bother which way you choose. It's a relatively minor detail for this extent (only 2-3 headings per page).
Normally in SEO h1 tag is used to signify Article heading.
In blog h1 is used to highlight starting point of an article which is naturally heading of the page.
Now if you wish to keep your heading constant it wont make much difference.
What will happen if you do this is
You will be having a lot of articles under the same Heading which in turn might provide you a single backlink as it might rank your page as per the most visited article.
So with respect to aesthetic view and also for better indexing we should use different H1 tags for different articles.
I think putting article title in h2 tag will improve your SEO score. H1 tag is more important but you have to also define other SEO tags like h1 to h6, bold, italic, em tag, acronym tag, dfn tag, abbr tag and strong tag in article content for better SEO result.
Now, you can also define article tag in your content to represent your article content. It separates your article content independently from the other content on your site.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
W3C doesn't explicitly say how exactly are we supposed to use headings or I can't find such information.
Resources:
http://www.w3.org/TR/html401/struct/global.html#h-7.5.5
http://www.w3.org/TR/WCAG-TECHS/H42.html
http://www.w3.org/TR/WCAG-TECHS/G141
This is very brief and raises many questions such as:
"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
When designing a sidebar - what headings should be used? H2?
When designing a footer - what headings should be used? H2?
Headings are meant to be used for lists (like a list of posts in a footer) anyway?
Should H1 be used only once on a page?
When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
If anyone could shed some light on that, it would be great :) Thanks.
1.Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
Like Richard said, it is up to the programmer. In general, headings build structure into your page, like an outline you would make for a paper in school. There is a site, that creates an outline for you based on headings. Further WebAIM found that people using technology like knowing what level they are on, so jumping around, may confuse some.
2.When designing a sidebar - what headings should be used? H2?
I normally put a <h2> in so people can navigate to it easier/faster. To be honest, I haven't actively designed a page in a year or so, so if I was to do something, I would probably use ARIA instead if the sidebars really didn't need headings, and assign the "complementary" role. Using HTML5 I could simply use the <aside> tag, which natively has the complementary role.
3.When designing a footer - what headings should be used? H2?
I normally don't use headings in the footers. You can either assign the contentinfo role to the footer div, or use the HTML5 <footer> tag which again, has it native. This blog post on ARIA is helpful.
4.Headings are meant to be used for lists (like a list of posts in a footer) anyway?
Sure, you can do:
<h3>My favorite Movies</h3>
<ol>......</ol>
5.Should H1 be used only once on a page?
Long and unending debate. I am in the camp that H1's should be only used for the title of the content, such as only the question title here on SO. There was a discussion in the HTML5 group that new tags, such as <section> resets the heirarchy/outline that I mentioned above, and h1 can be used. I am not a fan or in favor of this.
6.When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
I'd use h2's
7.Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
The proper way is <h_><a>Words</a></h_>.
You should read the section "Headings and sections" of the HTML5 spec. Getting the headings right is an important aspect of accessibility.
With headings (and sections) you are telling various user-agents how your page is structured, which content belongs together and which is separate from each other.
Think of a typical website with 3 columns. In the first column you have the site navigation, in the second column you have the main content and in the third column you have secondary content. Now, humans able to see might grasp immediately that there are three "areas" on the page, thanks to a different background color, margins, borders, whatever. But visually impaired or blind humans can't get clues from the graphical design of the page. Machines (like search engines) neither. Therefor we use heading/sectioning elements, so they can get the information (how the page is structured) from the markup.
Each HTML5 document has an outline, which gets created by the use of the headings h1-h6 (and hgroup) and/or the sectioning elements (section, article, nav, aside). You can think of it as some kind of TOC.
While a human able to see gets a first idea about the page structure by looking at the graphical design, humans using screenreaders and machines get this idea by reading the page outline, e.g.:
(1.) John Doe's Example Blog
(1.1) Navigation
(1.2) My first year at ACME
(1.3) Recent blog posts
This could be the outline of the following example documents:
Using headings only:
<body>
<h1>John Doe's Example Blog</h1>
<h2>Navigation</h2>
<h2>My first year at ACME</h2>
<h2>Recent blog posts</h2>
</body>
Using sectioning elements and headings with the level according to the calculated outline:
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h2>Navigation</h2>
</nav>
<article>
<h2>My first year at ACME</h2>
</article>
<aside>
<h2>Recent blog posts</h2>
</aside>
</body>
Using sectioning elements with h1 everywhere:
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h1>Navigation</h1>
</nav>
<article>
<h1>My first year at ACME</h1>
</article>
<aside>
<h1>Recent blog posts</h1>
</aside>
</body>
(The latter two are semantically equivalent!)
When using sectioning elements, you could even omit the headings altogether, the outline would still be the same, although "unnamed" (which is not very helpful!):
<body>
<nav></nav>
<article></article>
<aside></aside>
</body>
This would be the corresponding outline:
(1) (Untitled Section)
(1.1) (Untitled Section)
(1.2) (Untitled Section)
(1.3) (Untitled Section)
You can play with this online outliner to see which documents create which outlines.
so, should we skip them or not?
Why would you want to skip levels in the first place? It's probably never good, so no, you should not skip levels. But if it would happen, I wouldn't consider it a serious error.
Note however, depending on how exactly you skip, especially if you don't skip all headings of that level, a wrong outline could be created. See for example this simple document:
<body>
<h1>Interesting stories</h1> <!-- this is the site heading -->
<h2>My first snow</h2> <!-- this is a story -->
<h3>What I thought snow would be like</h3> <!-- this is a subsection of that story -->
<h3>How I experienced it actually</h3> <!-- also subsection -->
<h3>Why I'm disappointed by snow</h3> <!-- also subsection -->
<h2>More stories about snow</h2> <!-- this is not part of the story, but a kind of "See also" for the site/page -->
</body>
Now, if you'd change the last h2 to h3, suddenly this "More stories" section would become a subsection of the story. If you'd change it to h4, it would become a subsubsection.
When designing a sidebar - what headings should be used? H2?
When designing a footer - what headings should be used? H2?
These questions can't be answered in general. It depends on your site and your page and your content. But yes, in many cases for a "typical page" h2 would be the right candidate. The page heading (not to confuse with main content heading!) is h1, the main content is h2, the secondary content (sidebar etc.) is h2. If your footer would need a heading (not each one does), it would be h2 also in this case.
Headings are meant to be used for lists (like a list of posts in a footer) anyway?
It really depends on the content and the context.
The important question you have to ask (in general, for all heading decisions):
Does this content "belong" to the previous heading?
If yes:
Is it some kind of sub-section? → use a heading one level higher, resp. use a section element (and optionally a heading inside of it)
Is there no natural "sub-heading" for this content? → don't use a heading here
If no: use a heading one level lower, resp. use a sectioning element that is not a child of the sectioning element in question
(you'd have to repeat this step until your heading/section is a child of a heading that it belongs to)
Should H1 be used only once on a page?
Nope. As I explained, you could use h1 for all your headings on a page (if you use sectioning elements!).
When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
You should probably use an article element for each entry. So you'd get an heading automatically (= an entry in the outline), so to speak, as article is a sectioning element. Now, you could use h1 for it (no matter where the article is placed!), or you could use the calculated heading level (if the article is a direct child of body, you'd use h2. If it is one level deeper, h3. And so on.).
Use sectioning elements and headings so that a useful outline is created.
If you mark-up a webpage, look for a minute at the created outline only: Does it make sense? Do you understand by that how the page is structured, what sections it got? Is the hierarchy correct? Is a separate area/section of the page missing in this outline? Is a section a child of a section it doesn't belong to? (for example, often you see that the site navigation is a child of the page's main content, which is not correct, of course: typically they should be on the same level, both being childs of the site heading).
The <h_> tags are sort of redundant from the perspective of their original usage. With the ubiquity of CSS, a tag like <h4> is pretty much descriptive for all intents and purposes.
If you have a page with multiple sections then it makes sense to denote this somehow, and until the HTML5 <section id=""> tag is fully adopted a heading can be useful for some-thing reading the source code. Considerations might include:
Search Engine Optimisation: if you make some piece of text a heading, you are telling search engines, "hey, this is important!". To what extent this matters is for another discussion.
Code readability: if multiple people are working on the project, a heading is a good way to understand where breaks in the page copy occur. You can do this with <!-- Sidebar Here --> to a similar effect, but to some this is overkill.
"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
This is at the discretion of the programmer. You might decide to use <h1> for page headings, <h2> for section headings, but this is not written in stone. You can restyle the headings with CSS anyway, so you can favour hierarchy over appearance. If you think your sidebar is of equal importance to your tag cloud, give them the same heading classification.
Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
This is absolutely correct.
The gist of what I'm saying is that W3C standards are there for reference. The development teams that make web browsers, RSS readers, etc. care about them because it means they don't have to discuss a new tag with each other. Imagine Google, Microsoft and Apple holding cross-party talks about when a <h4> or <span> tag should be used... nightmare fuel!
If a topic like those found in questions 2-6 above aren't written in stone, common sense is the fail-safe. That, and talking to your colleagues and agreeing a way forward. Sorry to repeat myself, but standards are for reference.
Hope that helps!
Which of the new HTML5 elements should be used instead of div.container and div.content ?
<header>
site header
</header>
<div class="container">
<div class="content">
<article>
content
</article>
<article>
content
</article>
<article>
content
</article>
</div>
<aside>
sidebar
<aside>
</div>
<footer>
site footer
</footer>
div.content can probably be a <section>. div.container should probably remain a div.
None of them are made for that. I'd recommend using ARIA roles however.
<div class="container" role="document">
<div class="content" role="main">
These can then also be used in CSS with selectors like div[role='main']
You can't answer this example in general, it depends on the content of the page.
What matters here is the outline of your page. Therefor, you can ignore all div elements as they don't influence the outline. Only use them if you need them as hooks for CSS or JavaScript.
The first question would be: Is the aside related to the whole page or is it related to the "content area"? If it is related to the whole page, it must not be included in another sectioning element. If it is related to the content area, it has to be included in that sectioning element. Here I assume that it is related to the whole web page.
The second question: Is there a common heading for the three article elements? Examples would be: "My favorite books", "Latest blog posts", or "Products". If so, you should use a sectioning element which groups these three article elements. If there would be no possible heading, you probably don't want a sectioning element here, so could use div or not element at all.
The third question (if the second question was answered positively): Should this sectioning element be an section or an article element? If your choice of using the article element for these three "things" is correct, you probably (but not inevitably!) need a section here. Whether it was correct at all to use article, again, depends on the real content. So it could be possible that you rather want
<article>
<section></section>
<section></section>
<section></section>
</article>
instead of
<section>
<article></article>
<article></article>
<article></article>
</section>
Here I assume that your choice of using article for the three "things" is correct.
So the final version might look like:
<header>
<!-- if this header applies to the whole page -->
</header>
<section>
<!-- a h1 like "Latest blog posts" -->
<article>
content
</article>
<article>
content
</article>
<article>
content
</article>
</section>
<aside>
<!-- if this aside applies to the whole page -->
<aside>
<footer>
<!-- if this footer applies to the whole page -->
</footer>
I highly recommend reading about the differences between article and section over at HTML 5 DOCTOR.
You will then be able to make an informed judgment about which sectioning elements should be used and when, and also when not to use div.
What I have surmised from their blog is that:
article: Used for content which will make sense on its own!
section: for content which is a logical section of either another section or an article (fine to nest these).
div: still used for containers or as hooks for styling, which is something html5 elements should not be used for.
Finally the decision of using html5 sectioning elements can often be decided by the fact that it contains a heading (although this is not a hard and fast rule). There are a couple of useful tools to aid these decisions.
HTML5 Outliner - online
HTML5 Outliner - chrome extension
To consider this question as a constructive question, it needs to be interpreted as asking what the HTML5 drafts say about the matter. Then the answer is section 4.13.1 The main part of the content in the W3C HTML5 draft. To put it briefly, it says that normally you don’t need any specific markup: just put the content there. Obviously, you can wrap it in a div element if you need to treat it as a unit in CSS or in scripting.
And according to that section, it could be marked up as section or article if it constitutes “a section of a larger work, for instance a chapter” or “an independent unit of content that one could imagine syndicating independently”, respectively.
This is a matter of coding style. No general-purpose software (like browser or search engine) cares about your choice here.