Mastering CSS

The semantic HTML for building a menu

Let's jump right in and type the HTML we need. We'll start with this nice, big HTML comment. As you may have noticed, I like these big guys. This is because it's easier to locate parts of the code I need quickly:

<!-- ===============Nav===============-->

We'll wrap everything in the HTML5 nav element and apply the grouping class because we'll be floating everything in there. A clearfix will eventually be necessary so that the container doesn't collapse:

<!-- ===============Nav===============--><nav class="grouping"></nav>

Now let's add a figure element that will wrap our shark image:

<nav class="grouping">    <figure>        <img src="images/sharky.png" alt="sharky">    </figure></nav>

Next, we'll start an unordered ...