[html5] section vrs article
Lachlan Hunt
lachlan.hunt at lachy.id.au
Thu Dec 4 10:12:20 PST 2008
Stephen Stewart wrote:
> Hi,
>
> Sorry if this is obvious but which of the following is the more correct?
>
> Example A.
>
> <section>
> <header>
> <h1>Apples</h1>
> <p>Tasty, delicious fruit!</p>
> </header>
>
> <article>
> The apple is the pomaceous fruit of the apple tree,
> species Malus domestica in the rose family Rosaceae.
> </article>
> </section>
This one could be correct if you replaced <article> with <p>.
> Example B.
>
> <article>
> <header>
> <h1>Apples</h1>
> <p>Tasty, delicious fruit!</p>
> </header>
>
> <section>
> The apple is the pomaceous fruit of the apple tree,
> species Malus domestica in the rose family Rosaceae.
> </section>
> </article>
Likewise, this one could be correct if you replaced <section> with <p>.
But note that while you can nest <section> within <article>, it's not
really suitable to do so for this particular example.
You could expand it to use a nested section like this:
<article>
<header>
<h1>Apples</h1>
<p>Tasty, delicious fruit!</p>
</header>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples and make a great filling for
apple pies.</p>
</section>
</article>
An article represents an independent, self-contained section of a
document. In a sense, it's like a specialised type of <section>.
Nested <article> elements are suitable for related, but independent
sections. The example of this in the spec are comments submitted to an
article or blog entry.
> <article>
> <header>
> <h1>Apples</h1>
> <p>Tasty, delicious fruit!</p>
> </header>
>
> <article>
> The apple is the pomaceous fruit of the apple tree,
> species Malus domestica in the rose family Rosaceae.
> </article>
> </article>
This one is wrong because the nested article is not an independent section.
--
Lachlan Hunt - Opera Software
http://lachy.id.au/
http://www.opera.com/
More information about the Help
mailing list