Discussion on: Stop using so many divs! An intro to semantic HTML

[Ken Bellows]

Well, you can do both, depending on the scope of the tags. For example, I might put a tweet in an <article>, and I might show multiple tweets in a single <section>. But typically, on a site like a blog where you have literal articles or other long-form text, you'd have one <article> that wraps the main text content of the document, and that <article> would contain multiple <section>s.

Let's look at the spec again.

<article>:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

• html.spec.whatwg.org/multipage/sec...

<section>:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

• html.spec.whatwg.org/multipage/sec...

So the idea that an <article> can contain multiple <section>s seems natural to me. And in fact, the spec itself shows a code example under the definition of <section> linked above where an <article> has multiple <section> elements within it.

[CrashedDummy]

Thanks for answering !
It feels clearer now.

Last question, just to be sure I understand well, would it be correct to do the following :

<section itemscope itemtype="http://schema.org/Blog">
    <article itemscope itemtype="http://schema.org/BlogPosting">
        <--! header, sections, footer-->
    </article>

    <article itemscope itemtype="http://schema.org/BlogPosting">
        <--! header, sections, footer-->
    </article>
</section>

[Ken Bellows]

I don't see why not! Two tangential comments though:

• Each <section> should ideally have a heading tag (<h1>-<h6>) to identify the section. Remember that a <section> should be something you'd list in your table of contents, so what would you call that section? Though I recognize you might have skipped it for the sake of example code, and of course this has no effect on the main point

• Your comment syntax is slightly wrong, it should be <!-- rather than <--!. But again, no effect on the main point

[CrashedDummy]

Thanks again !
And :facepalm: for comment syntax X)