CODEWITHSUNDEEP
htmlsemantics
Sho Kei
Sho Kei

Reputation: 175

Is it semantically correct to nest <article>s?

I've been reading up on the new HTML5 elements and their appropriate usage, and currently have some markup like this:

    <article>
        <h1>Crazy Awesome Programming Projects</h1>
        <article>
            <h2>Mathematics</h2>
            
            <section>
                <h3>Binary to Decimal converter</h3>
                <p> info here </p>
            </section>
            
            <section>
                <h3>Scientific Calculator</h3>
                <p> info here </p>
            </section>
            
        </article>
        
        <article>
            <h2>String Manipulation</h2>
            
            <section>
                <h3>RSS Feed Generator</h3>
                <p> info here </p>
            </section>

            <section>
                <h3>Palindrome Detector</h3>
                <p> info here </p>
            </section>
        </article>
    </article>

Is it semantically correct to nest <article> tags in such a manner?

Upvotes: 9

Views: 5284

Answers (2)

unor
unor

Reputation: 96707

There are cases where nesting article elements is correct; the most prominent case being comments to a blog post.

But I don't think it's the case for your example (it's hard to decide this without seeing the full content, though).

I'd do it exactly the other way around:

<section> <!-- probably not article -->
    <h1>Crazy Awesome Programming Projects</h1>

    <section> <!-- not article -->
        <h2>Mathematics</h2>

        <article> <!-- not section -->
            <h3>Binary to Decimal converter</h3>
            <p> info here </p>
        </article>

        <article> <!-- not section -->
            <h3>Scientific Calculator</h3>
            <p> info here </p>
        </article>

    </section>

    <section> <!-- not article -->
        <h2>String Manipulation</h2>

        <article> <!-- not section -->
            <h3>RSS Feed Generator</h3>
            <p> info here </p>
        </article>

        <article> <!-- not section -->
            <h3>Palindrome Detector</h3>
            <p> info here </p>
        </article>
    </section>
</section>

"Binary to Decimal converter", "Scientific Calculator", "RSS Feed Generator" and "Palindrome Detector" are the articles here. They are "a self-contained composition" and "in principle, independently distributable or reusable, e.g. in syndication".

"Mathematics" and "String Manipulation" are categories.

In structure it's similar to a web shop. "Palindrome Detector" would be a buyable product, while "String Manipulation" would be the product category. I guess you wouldn't consider a product category as "self-contained".

For the container ("Crazy Awesome Programming Projects") I'd use an article only if there would be more content giving context. Otherwise it's just a top-category, containing sub-categories, which contain the "real" content.

Good questions to ask whether article is appropriate:

  • could the content have an own publication date?
  • could the content have a different author than the page?
  • could the content be a separate entry in a feed?
  • would the content still make sense if it was printed out without any other content/context?

If (some of) these questions are answered with 'yes', article could be correct.

Upvotes: 13

Marc Baumbach
Marc Baumbach

Reputation: 10473

Yes, according to the HTML5 spec. This is what it says about nesting article elements:

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Upvotes: 12

Related Questions