DEV Community

loading...

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

Collapse
kenbellows profile image
Ken Bellows Author

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.

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

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.

Collapse
crasheddummy profile image
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>
Thread Thread
kenbellows profile image
Ken Bellows Author

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

Thread Thread
crasheddummy profile image
CrashedDummy

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