[html5] section vrs article

Stephen Stewart carisenda at gmail.com
Fri Dec 5 03:28:14 PST 2008


On 4 Dec 2008, at 18:12, Lachlan Hunt wrote:

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

D'oh! I forgot the <p>'s around the text, I was so focused on my  
<article> / <section> combinations.

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

Thanks, that answer is what I was looking for.

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


Excellent, thanks.

--
Stephen Stewart
www.carisenda.com








More information about the Help mailing list