HTML and CSS Reference
In-Depth Information
Using the <
header
> and <
footer
> elements
Most webpage documents contain common content at the top and bottom of all pages.
Although using the
<header>
and
<footer>
elements doesn't automatically provide this func-
tionality, the elements do provide the ability to define the content in the header and footer of
the website.
Typically, a webpage header contains content such as a company logo or banner. In some
cases, it might also contain a navigation menu. (See the upcoming “Using the
<nav>
element”
section for this.) Start the example page by adding the
<header>
element to your page:
<body>
<header>
<h1>Some fictional company Website</h1>
…
</header>
</body>
This HTML code produces the output shown in Figure 1-1:
FIGURE 1-1
A
<header>
element, which causes the browser to format the text within the element as a
heading.
The
<header>
element isn't limited to only the start of your page—it provides a semantic
way of declaring the header to any area of the webpage. You can use the
<header>
element
as a header to a
<section>
element or to an
<article>
element. The
<header>
element is
intended to hold an H1-H6 element as needed; however, you can populate a header with any
markup that suits your needs to create the best header for that particular area of the site.
This HTML code produces the output shown in Figure 1-2:
<body>
…
<header>
<h1>Some fictional company Website</h1>
</header>
<article>
<header>
<h1>Our first new Article</h1>
</header>
…
</body>
FIGURE 1-2
The
<header>
element with a nested
<h1>
element
Search WWH ::
Custom Search