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.

#CSS #HTML