Basic HTML5 header

So basic, it doesn’t even have links in the navigation! Uses HTML5 sectioning elements, which become landmarks that users of screen readers can use as a wayfaring device. .

by David Storey

HTML

<header> 
  <h1>A wonderful web site</h1> 

  <nav>
    <ul> 
      <li>Some page</li> 
      <li>Another page</li> 
    </ul> 
  </nav>
</header>

CSS

* {
  margin: 0;
  padding: 0;
}

html {
  font: 62.5% "segoe ui", helvetica, arial, sans-serif;
  background-color: #fff;
}

body {
  font-size: 1.6rem;
}

header {
  background-color: #0078d7;
  color: #fff;
  padding: 2rem;
}

nav {
  margin-top: 2rem;
}

nav li {
  display: inline-block;
  margin-right: 1rem;
}