Semantic markup for card blocks 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:

&lt;div class="col-lg-4 mb-4"&gt;
      &lt;div class="card h-100"&gt;
        &lt;h4 class="card-header"&gt;Card Title&lt;/h4&gt;
        &lt;div class="card-body"&gt;
          &lt;p class="card-text"&gt;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.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
          &lt;a href="#" class="btn btn-primary"&gt;Learn More&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
&lt;/div&gt;


Rewritten:

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


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 &lt;section&gt;: 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:

 &lt;article&gt;
    &lt;h1&gt;Card heading&lt;/h1&gt;
    &lt;p&gt;Some teaser …&lt;/p&gt;
    &lt;a href=""&gt;Learn more …&lt;/a&gt;
&lt;/article&gt;