HTML 5 came out in 2014 with a slew of new semantic tags. The browser support for them has caught up quite well in the last couple of years, so there isn't a reason to skip using them now.

This week we will be doing a deep dive into the Semantic elements of HTML5 and how to use them with real world examples. As prep, I suggest glancing through this HTML5 Semantic Element List. If you have questions about browser support, you can always cross reference with Can I Use. Also MDN has a Full HTML Element List in case you want to look into all the available HTML tags.

Character Sheet Answer

Last week we ended with a project of building out a basic html and css one page character sheet. Here is an example of this being done:


h2 {
  color: blue;

li {
  color: grey;

em {
  color: yellow;

strong {
  color: green;

em strong {
  color: blue;


<!DOCTYPE html>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <img src="" alt="Benny">
      <h2>Things Benny loves:</h2>
        <li>Building Spaceships</li>
        <li>Spaceship <em>Spaceship <strong>Spaceship</strong></em></li>