HTML semantic elements
As I have recently been revamping my knowledge of CSS, I have once again rediscovered the HTML semantic elements. Besides the common <header>, <footer>, <main>, and <nav>, I had basically forgotten about <section>, <article>, <aside>, and a few more.
Since for my (few) early Web design tasks I've mostly used frameworks like Bootstrap, I've become accustomed to using plenty of <div>s for styling. The nice thing about semantic elements is that they immediately make it clear what the function of a specific block of HTML is. A Web page that makes use of semantic elements can readily be styled with a basic CSS framework such as Simple.css, which I have successfully used for a couple more recent projects.
I've explored some combinations of sections and articles, and also <blockquote>s and <code>s. And I love how the omnipresent “accordion” is now an HMTL element as well: <details>.
Content cards without classes
A cool trick I have learned from the MVP.css mini-framework: how to create content cards using semantic elements only. The key is to use a number of <aside> elements within a <section>, for example like this:
<section>
<aside>
<h3>Card 1</h3>
<p>Content 1</p>
</aside>
<aside>
<h3>Card 2</h3>
<p>Content 2</p>
</aside>
<aside>
<h3>Card 3</h3>
<p>Content 3</p>
</aside>
</section>
It may not work with every CSS framework, but it certainly does with Simple.css.