Now let’s work on the inner components of the header.
Wrap the DTN name in a h1. And make a list-based NAV menu out of the Features-to-Contact string of text.
This should leave you with a menu that looks like this:
<header class="site-header">
<h1 class="site-title">dtn</h1>
<nav class="site-navigation">
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Style</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
In case you’re wondering why I am using a class of “site-header” on the header, I am adopting a css naming style made common in a lot of WordPress themes. Moreover, headers and footers can actually be nested in other elements. For example, an article footer could have date of publication, tags, user comments, etc.
By prefacing the header and footer here with the site prefix, I point to the use of these elements as site-level. If I used headers or footers elsewhere, I could preface their classes with something that suggests their use (for examples article-footer). This helps keep our styles straight in our own heads, and allows us more flexibility: we can style different headers differently.
Now let’s work on the section titles, articles, and images.