Should I switch to div if my section lacks a heading (W3C validator warning)?

HTML & CSS
1

Hello, I have a blog, and the page that lists all the blog posts uses the following markup. I hand-coded this markup myself, and I mention this because it’s not the default setup of the blog.

<section class="blog">
  <div class="blog-container">
  <h2>Blog Posts</h2>

    <!-- 1 -->

    <article>
      <header>
        <h3>First Post</h3>
      </header>

      <section class="post-summary">
        <p>lorem ipsum..</p>
      </section>
 
      <footer>
         <p><a href...>read more link</a></p>
      </footer>
    </article>

    <!-- 2 -->

    <article>
      <header>
        <h3>Second Post</h3>
      </header>

      <section class="post-summary">
        <p>lorem ipsum..</p>
      </section>
 
      <footer>
         <p><a href...>read more link</a></p>
      </footer>
    </article>

    <!-- and so on -->

  </div>
</section>

Since the post summary doesn’t have a heading, the W3C validator suggests that I should use a <div> instead. Is that correct? It’s not that I don’t trust the validator, and I know my question might sound a bit silly, but is it okay to use a <div> in this situation? Does it work well with the <header> and <footer> elements line in my markup?

2

Why not keep it simple like this?

<section class="blogs">
  <h2>Blog Posts</h2>

  <!-- 1 -->
  <article>
    <h3>First Post</h3>
    <p>lorem ipsum..</p>
    <a href...>read more link</a>
  </article>

  <!-- 2 -->
  <article>
    <h3>Second Post</h3>
    <p>lorem ipsum..</p>>
    <a href...>read more link</a>
  </article>

  <!-- and so on -->
</section>
3

I would like to add some spacing between these elements, and I’d prefer to target their containers rather than the elements themselves. Also, I believe using headings and footers can enhance the semantic meaning of the content as shown on the MDN page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

4

Might be the example, but that markup screamed a bit of the old “divitus”, but I digress…

But back to your original post, If you move the blog-container div opening element to after the h2, does it still give you the warning?

<section class="blog">
  <h2>Blog Posts</h2>
  <div class="blog-container">

Semantically, this makes more sense (to me at least), though I could argue the div isn’t needed at all (you can just as easily style to .blog article as you can .blog-container article).

So either move it below the h2 or remove it all together.

5

The problem is the summary, not the blog section:

<section class="post-summary">
    <p>lorem ipsum..</p>
</section>
6

You should use CSS to add spacing.

Why not target the elements themselves?

There is no point putting a <div> element directly inside the <section> element.

The <h3> elements are heading elements, so there is no point wrapping them in <header> elements.

There is no point wrapping the <a> elements inside <p> elements.

The <footer> elements may be justified, especially if they contained more than just one link.

7

Sorry. Should have caught that.

It’s the sections in the articles that is throwing it for a loop. Article is a specific type of document element, and section doesn’t typically fall under the article. A better element would be main in that case, but main is restricted to the body level.

So in this case, div instead of section would be appropriate - unless you’re always going to just have a paragraph in the summary, in which case, just use the p element.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.