The Page Header

At the top of the web page you will often find information about the website such as the name, logo, and possibly the main navigation, date, and/or a site wide search function. 

Depending upon styling in coordination with the tags, there are different ways to build the site. However, you might expect to see something similar to the following:

<header class="page-header">
    <h1 class="site-title">This Special Website</h1>
    <form action="search.php" class="site-search">
		<input type="text">
	</form>
    <nav>
		... navigation links ...
    </nav>
</header>

Header

Notice how you have a header tag, which can be used as the page header. We will be looking at different tag elements, so if you don’t recognize all of these, not to worry. The same goes with classes, as we’ll work on explaining how these work in a little bit.

Notice we use a class on this tag. The class will define how the tag is rendered, and allow us to use a different tag if we wish to. Since header can be used multiple places, we add a class to the header tag, to allow us to properly style the different header tags we might have.

Now I also want to point out this this header tag is different than the heading tags we have already looked at, as well as different from the head tag that we’ve looked at.

This tag is designed to provide organization to your webpage, and let the browser, screen readers, search engines, and other automated bots understand the page better. The header will contain links, and information about the site normally, however, it does not contain the main information that should be indexed. That will come below this tag.

Heading Tag

<h1 class="site-title">This Special Website</h1>

Within the header tag, we’ve added a heading tag (<h1>) for the website, and specified that it is the site tag, by giving it a class. Heading tags start with an h, and have a number immediately following from 1 to 6. Typically, headers are used to show importance with a lower number showing more importance, and defining what a large section of a page is about. Hence we are using an h1 tag to describe the overall page/logo.

Some designers will use a different tag, like the paragraph tag, since this is for the website title, using the title class to define the look and feel so it’s as large as it needs to be, allowing the page title that you see on the screen to be the h1 heading tag.

Notice we use a class on this tag. The class will define how the tag is rendered, and allow us to use a different tag if we wish to.

Form

<form action="search.php" class="site-search">
	<input type="text">
</form>

Additionally, we’ve added a form to allow a user to search the website. This would require a server which can handle the server side scripting. We’ll go into forms in a later section.

This is generally only going to exist on larger websites, which have enough content to search. You need to have enough content that making a search engine makes sense. You also need enough content that it’s faster to search than logically look through a few pages.

Amazon and Google were two big factors in conditioning people to search through a website. Amazon used to have categories on their home page that you could look through to find items you were interested in. However, as they grew larger they made a decision to get rid of most of their navigation bar and use a search feature prominently on their header to help people find what it was they wanted to buy.

Nav

<nav>
	... navigation links ...
</nav>

The <nav> tag is used to group site navigational tags on a web page. This is an organizational block tag that is used to group the main navigation. It should not list all the links on the page, nor should it necessarily list every possible link to every possible page on the website.

As an organizational tag, the nav tag helps provide screen readers with logical information about the links that are contained within it. This lets the software help present the links to a visually impaired person so they can use it more effectively. It also makes it easier to logically group your navigation together.

There are no required or necessarily prohibited child tags to the <nav> tag set. However, generally you will only find links (<a> anchor tags), or possibly a collector tag like an unordered list.

We’ll be looking at how to build links and lists in an upcoming section and cover that process there.

The Page Header was originally found on Access 2 Learn