Member Avatar for ComNaD

In most of the books I've read on HTML5, they use <section> as a main container, and that then may have <article>'s inside it. I have also seen other tutorials that will show <article> as a main container for an article, or even a book, and then have <section> used as sections of the book (or sub sections). Anyone care to discuss the way they use them?

Example of the way I have used:

<body>
    <section>
        <article>
            <p></p>
        </article>
        <article>
            <p></p>
        </article>
    </section>
</body>
  • 5 Contributors
  • 5 Replies
  • 340 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by aliceknight

Dani AI

Generated

Both patterns you describe are used in the wild and both can be correct. A simple rule of thumb: use <article> for a self-contained item that could be reused or syndicated (a blog post, forum post, product card), and use <section> for a thematic grouping inside a larger page that normally has its own heading. This is the same pragmatic split pointed to and matches common guidance. (developer.mozilla.org)

A practical pattern for a forum thread (matching what described) is: use a single page-level landmark for content, wrap the thread in a section, and mark each post as an article. Put metadata in an article header and signature/meta in its footer. Example:

<main id="main-content">
  <section class="thread">
    <header><h1>Thread title</h1></header>

    <article class="post">
      <header>
        <h2>Post by Alice</h2>
        <time datetime="2014-03-23">Mar 23, 2014</time>
      </header>
      <p>Post body...</p>
      <footer>Signature / meta</footer>
    </article>

    <article class="post">...next post...</article>
  </section>
</main>

Use <main> as the page landmark and nest articles for related content (comments can be nested articles). (developer.mozilla.org)

Accessibility and headings: do not rely on the old HTML5 "outline algorithm" to fix heading levels — it is not implemented by user agents, so keep h1-h6 hierarchy logical and explicit. Give each section/article a clear heading; that is what screen readers and automated tools actually use. (devdoc.net)

Quick checklist: do not use <section> as a generic div (use <div> when there is no semantic section); avoid wrapping each paragraph in <article>; include header/footer inside articles for metadata; validate and test with a screen reader or accessibility tools if structure matters. (devdoc.net)

Recommended Answers

All 5 Replies

Member Avatar for pritaeas

Article is defined as 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.

So I consider article to be used for a blog entry, or a news item here on DaniWeb.

The text for section says: 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. [...]

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

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

Edited by pritaeas
commented: :) +10
Member Avatar for Dani

We used to just use the <article> element to represent our editorial content such as a news story or tutorial. However, I've been seeing it defined to include any content that could be syndicated, such as individual forum posts, and so we recently started doing that as well.

Member Avatar for veera100

In html5 <section> element contain occupying some place of the website.
<article> element is nothing but the <p> element.

Mostly the paragraphs are contain inside the <section> element.

So should use the <article> element inside the <section> element. This is the best practice to use html5.

Member Avatar for Dani

ComNaD, we do it the way you have outlined, but I have no idea if that's even correct. We use the <section> element to encapsulate all of the posts on the page (outside of the header/footer/sidebar/etc). And then we use <article> to denote each individual forum post. We take this a step further and use <header> within the article to denote the user information stuff and <footer> for the forum signatures.

Member Avatar for aliceknight

Thank you guys to share this knowledge. I will check it out.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.