Home > Articles > Web Development > HTML/CSS

This chapter is from the book

This chapter is from the book

Beginner Recipe: Using the header Element to Create a Site Header

Let's start at the top of a "typical" web page.

The header element is often the first thing on a web page, and it usually contains things like a logo, the website name, or the main site navigation. It can be used more than once on a page, and as will be discussed, it can be used for navigation of a particular section, not just the overall page. Things like a search form or a table of contents can be included in a header element. Here is a basic example:

<header>
  <img alt="HTML5 Cookbook logo" src="logo.png" />
  <h1><a href="#">HTML5 Cookbook</a></h1>
</header>

As the HTML5 specification says, the header element can include navigation aids, so the element in Figure 1.2 could be marked up with a header that includes the logo, the main navigation links, and the search form. But depending on the design of the site, it might mean you have to mark up the nav outside of the header, which is fine.

Figure 1.2

Figure 1.2 A typical header element with a site title, logo, search, and navigation area

The following are the possible contents of the header element, several of which are shown in Figure 1.2:

  • Logo
  • Site name/title
  • Site subtitle
  • Search form
  • Main navigation

You are not restricted to just one header element per page, and it does not have to be at the top of a page. As we will explain in further detail later, if you have several headings on a page, you might consider putting these in a header element. You can also use more than one h1 tag per page so you may have something like Listing 1.2 (you will learn about the article element later in this chapter).

Listing 1.2. Using Multiple Headers on One Page

<article>
  <header>
    <h1><a href="#">Chapter 1</a></h1>
    <p>11.11.2011</p>
  </header>
  <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames
  ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante...</p>
</article>
<article>
  <header>
    <h1><a href="#">Chapter 2</a></h1>
    <p>11.12.2011</p>
  </header>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
  ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</article>
<article>
  <header>
    <h1><a href="#">Chapter 3</a></h1>
    <p>11.13.2011</p>
  </header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
 turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
 tempor sit amet, ante.</p>
</article>

The code in Listing 1.2 will result in the display shown in Figure 1.3.

Figure 1.3

Figure 1.3 Multiple header elements on one page (no styling applied)

You could put an author and date within the header element as well. However, the HTML5 specification suggests that author information is more suited to the footer element.

If you have only a single heading (h1-6) in a header element, then there is no need to use header; the h1-6 on its own will suffice.

  • + Share This
  • 🔖 Save To Your Account