trjhtr

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?

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>

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>