Semantic markup for card blocks

Question

I'm using Bootstrap. I'm doing my best to work with more semantic markup and getting away from divitis.

Several of these "card" blocks appear on a page, like this.

Original:

<div class="col-lg-4 mb-4">
      <div class="card h-100">
        <h4 class="card-header">Card Title</h4>
        <div class="card-body">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Learn More</a>
        </div>
      </div>
</div>

Rewritten:

<section class="col-lg-4 mb-4">
      <div class="card h-100">
        <header>
          <h4 class="card-header">Card Title</h4>
        </header>
        <section class="card-body">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
        </section>
        <footer class="card-footer">
          <a href="#" class="btn btn-primary">Learn More</a>
        </footer>
      </div>
</section>

Could I improve the HTML?

Answer 1

200_success' comment is right, that the context and the content of the component is important for semantics. I assume, from the linked page, that you want to display a list of short articles that lead to more detailed information.

---

That being said. Let's look at your rewrite:

Outer section-element.

While a section might be fine, to me this looks more like a list of short articles. So I would use an article-element here.

The article element represents a 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.

^{From w3.org 4.4.4 The article element}

Also interesting on Stackoverflow: Semantic HTML of an articles list

header-element

If you only have a heading-element and no other content for the the header of a sectioning-element, you should drop the extra header-element, as:

These elements [h1 … h6] represent headings for their sections.

^{From w3.org 4.3.6 The h1, h2, h3, h4, h5, and h6 elements}

Nested section-element

The paragraph is the actual content of this item. Its context is not a standalone section, as implied, when wrapping it in another section-element:

The HTML element represents a standalone section

^{From MDN <section>: The Generic Section element}

So drop that section as well.

footer-element

Using a footer-element here is debatable (as all other points as well). From the docs point of view it's absolutely fine:

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

^{From w3.org 4.4.9 The footer element}

However, personally I would drop it for simplicity.

---

Finally we remove everything that is not needed for styling – in regard of your linked layout – and end up with this:

 <article>
    <h1>Card heading</h1>
    <p>Some teaser …</p>
    <a href="">Learn more …</a>
</article>

Answer 2

The one observation I have, is that the two outer elements should be swapped:

The outer section has no semantic use, it just contains layout classes. On the other hand the actual card, that does have semantic meaning, but it is just a div. I'd swap them:

<div class="col-lg-4 mb-4">
  <section class="card h-100">
    <!-- ... -->
  </section>
</div>