- Beginner Recipe: Building an HTML5 Starter Document
- Where Do All the New Elements Come From?
- Beginner Recipe: Using the header Element to Create a Site Header
- Beginner Recipe: Using the hgroup Element to Group Headings
- Beginner Recipe: Creating Navigation with the nav Element
- Intermediate Recipe: Using the New article Element
- Intermediate Recipe: Grouping Content with the section Element
- Beginner Recipe: Creating a Sidebar with the aside Element
- Beginner Recipe: Using the footer Element
- Intermediate Recipe: Using the HTML5 Outliner to Ensure the Correct Structure
- Advanced Recipe: Using All the New Elements to Build a News Page
- Advanced Recipe: Using All the New Elements to Build a Search Results Page
- Summary
This chapter is from the book
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.
){kind=link}
)
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.
){kind=link}
)
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.