Here's an excellent HTML5 Doctor article and the example he uses is very close to his:
"A <article>
with <section>
s"
You can use the <section>
element to divide <article>
into logical content groups with "
An <article>
with <section>
s
You can use the <section>
element to split the article into logical groups of content with headings:
<article>
<h1>Apple varieties</h1>
<p>The apple is the pomaceous fruit of the apple tree...</p>
<section>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many supermarkets...</p>
</section>
<section>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for apple pies...</p>
</section>
</article>
SOURCE: Here is the full article, other examples, and even an explanation of the difference between <article>
and <section>
in which it explains that article
has more semantic value than the section
TL; DR
There is a lot of confusion about the difference between elements <article>
and <section>
. The <article>
element is a specialized type of <section>
; has a more specific semantic meaning than <section>
even because it is an independent and autonomous content block. We could use <section>
, but using <article>
gives more semantic meaning to content.
On the other hand, <section>
is just a block of related content and <div>
is just a content block.
To decide which of these three elements is appropriate, choose the first appropriate option:
- Would content make sense alone in a feed reader? If yes, use% com (independent content)
- Is the content related? If yes, use% w / (section within the article)
- Finally, if there is no semantic relationship, use
<article>
(div within article)
(the above excerpt was taken from the article quoted)
Now the words of Dr. Bruce Lawson:
About the article
The spec says "When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article."
Simplified translation: When elements <section>
s are nested the <div>
s within article
s represent articles that in principle are related to the content of% .
About the section
Section, on the other hand, is not "a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable". It is either a way of sectioning a page into different subject areas, or sectioning an article into ... well, sections.
Simplified translation: The article
, on the other hand, is not "an unattended composition in a document, page, application or site and that is intended to be distributed or reusable independently" . article
is a way to split a page into different subject areas or to split a article
into well ... sections.
Source: link