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:

style.css

h2 {
  color: blue;
}

li {
  color: grey;
}

em {
  color: yellow;
}

strong {
  color: green;
}

em strong {
  color: blue;
}

character.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Benny</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <h1>Benny!</h1>
    <img src="http://vignette4.wikia.nocookie.net/lego/images/e/e3/Cute_Little_Benny.png/revision/latest" alt="Benny">
    <div>
      <h2>Things Benny loves:</h2>
      <ul>
        <li><strong>Spaceships<strong></li>
        <li>Building Spaceships</li>
        <li>Spaceship <em>Spaceship <strong>Spaceship</strong></em></li>
      </ul>
    </div>
  </body>
</html>