Header-Footer and the Address Elements in HTML

Sectioning Content – Part 4

Foreword: In this part of the series I talk about the header, footer and address elements in HTML.

By: Chrysanthus Date Published: 30 Jul 2015

Introduction

This is part 4 of my series, Sectioning Content. In this part of the series I talk about the header, footer and address elements in HTML. You should have read the previous parts of the series before reaching here, as this is a continuation.

Remember: sectioning content elements are the body, section, article, nav and aside elements; sectioning root elements are the body, blockquote, fieldset, figure and td elements. The body element is both a sectioning content element and a sectioning root element.

The Header Element
The header element represents introductory content for its nearest ancestor sectioning content element or sectioning root element. The ancestor element is the element that nests (have as content) the header element. The header element is a double tag element whose tags are:

    <header>
    </header>

This is a block level element. A block level element has an inherent line break (br) element above and below it; and it occupies the width of its containing element. The header element cannot have a header or footer or main element descendant; that is, a header element cannot nest a header or footer or main element.

You may be surprised to hear this, but the header element is not a sectioning content element and it is not a sectioning root element, either. The header element would go inside the sectioning content element or inside the sectioning root element, at the top.

You are not obliged to use the header element in your web page. However, if the web page is complicated and/or long, you should use the header element. If the header element is used, then it should have the heading element (h1 – h6); that is, the heading element for the section will be inside the header element rather than outside and in the section. If the header element is used, then it should have zero, one or more of the following: any relevant logos, a search form, the section's table of contents, a group of navigational aid links.

The header element is usually horizontal. So, if a table of content is present, then the table can be broad or thin. The table element is a block level element, but it can be floated to the left or right. If you need the table element, you type it directly into the header element; you do not place it in another element before placing the other element in the header element.

The header element is usually horizontal. So, if navigation hyperlinks are present, they can be placed in a paragraph in a line. The a element has a border, so you can give the rectangle of a link, styles. Nothing stops you from placing the links in a nav element before placing the nav element in the header element. However, if the header element has little content, then do not use the nav element. Also remember, that you can always float the nav element to the left or to the right.

The header can be used for a banner.

Note that the header is meant for any sectioning content element or sectioning root element and not only for the body element. When a header is for the body element, that header applies to the whole page.

Here is a header code for a game:

<header>
    <p>Welcome to...</p>
    <h1>Mortal Combat!</h1>
</header>

The Footer Element
The footer element represents a footer for its nearest ancestor sectioning content element or sectioning root element. The footer element is a double tag element whose tags are:

<footer>
</footer>

This is a block level element. The footer element cannot have a header or footer or main element descendant; that is, a footer element cannot nest a header or footer or main element.

You may be surprised to hear this, but the footer element is not a sectioning content element and it is not a sectioning root element, either. The footer element goes inside the sectioning content element or the sectioning root element, at the bottom (everything being equal).

You are not obliged to use the footer element in your web page. However, if the web page is complicated and/or long, you should use the footer element. If the footer element is used, then it should have one or more of the following: information about who wrote the section: links to related documents, copyright data, and the like.

The footer element is usually horizontal. Not all groups of links on a page need to be in a nav element - the nav element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary. If the footer element has a lot of content, then you can place the links in a paragraph element (or the nav element).

Contact information for the author or editor of a section, belongs in an address element, possibly itself inside a footer. Bylines and other information that could be suitable for both a header or a footer can be placed in either (or neither); i.e. either a header or footer or none. The primary purpose of the header and footer elements is merely to help the author write self-explanatory markup that is easy to maintain and style; they are not intended to impose specific structures on authors.

The focus of the footer is on the related section content information.

Note that the footer is meant for any sectioning content element or sectioning root element and not only the body element. When a footer is for the body element, that footer applies to the whole web page.

A footer does not necessarily have to appear at the end of a section, though they usually do (see below).

The following code shows how a footer can be used:

<ARTICLE>
<H1>My Favorite Planes</H1>
<P>I love my planes. My favorite train of all time is a Boeing 747</P>
<P>It is fun to see them fly in the sky</P>
<FOOTER> 
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
</FOOTER>
</ARTICLE>

The article in the code is not a section element, but it is a sectioning content element. Headers and footers are for all sectioning content elements and not just the section element. You should try the above sample code to see what it looks like.

In certain situations, the footer element can contain sectioning content elements (article, section, nav and aside). When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content – see later.

The comment and the footer Elements
The comment normally goes into an article element. In this case, the comment article is a short article. You may need to indicate who posted the comment, a link to the comment’s writer’s profile and the date and/or time when the comment was posted. The following code shows how this should be done:

  <article id="c2">
   <footer>
    <p>Posted by: <a href= 'www.site.com/johnsmith-profile'>John Smith</a></p>
    <p><time datetime="2009-10-10T14:54-07:00">5 minutes ago</time></p>
   </footer>
   <p>Hey, you have the same last name as me.</p>
  </article>

The comment text here is actually one paragraph. The footer text has two paragraphs. The footer is actually above the comment (paragraph). This is an exceptional way in which the footer is used.

The address Element
The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole. This is a double tag element whose tags are:

    <address>
    </address>

This is a block level element. A good place for the address element to go into is in the footer, if the footer is present.

This element is not for the postal address. It is for the contact information of the authors of the web page. Contact information here means email address and/or web page (profile or biography) of an author. Author here, means the person who provided the content of the web page and not the designer (programmer) of the web page. You can have more than one author for a web page.

Note: The address element cannot have a heading content element descendant (i.e. it cannot have h1 – h6 elements); it cannot have a sectioning content element descendant (article, section, nav and aside); it cannot have a header or footer or address element descendant.

Also note that the address element is not a sectioning content element and it is not a sectioning root element.

The following example shows an address element that has web pages for two authors of a scientific organization:

    <address>
        Contact persons for the <a href="site.com/org.htm">Organization</a> are:
        <A href="site.net/js.htm">John Smith</A>,
        <A href="site.biz/jb.htm">James Bond</A>.
    </address>

In this address element, the information is in one line (and possibly wrapped to the next line).

The following code shows an address element in a footer:

<footer>
    <address>
        For more details, contact
        <a href="mailto:js@example.com">John Smith</a>.
     </address>
    <p><small>© copyright 2015 Example Corp.</small></p>
</footer>

You should try the code to see how it displays on the browser. When you click the link, the email program will open for you to send email.

To code a postal address, use the paragraph element and line break (br) elements in the paragraph element, as in:

    <p>
        John Smith<br>
        54 Heavenand Streat<br>
        Old York City<br>
        56328 Northern Region<br>
        Fine-Counttry
    <\p>

Do not use the address element for postal address.

Well, before we leave this part of the series, remember all of the following:

Sectioning content elements are the body, section, article, nav and aside elements. Sectioning root elements are the body, blockquote, fieldset, figure and td elements. If you have been reading the series in this volume, in the order given, then you should know the meaning of the body, section, article, nav, aside, blockquote, figure and td elements. td is for HTML Table cell. The fieldset element will be explained later. The body element is both a sectioning content element and a sectioning root element.

A sectioning content element should have a heading element (h1 – h6).

The header element represents introductory content for its nearest ancestor sectioning content element or sectioning root element. The header element is not a sectioning content or sectioning root element. The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. The footer element is not a sectioning content or sectioning root element. The address element represents the contact information for its nearest article or body element ancestor. The address element is not a sectioning content or sectioning root element.

The body element can nest an article element or main element. The article element cannot nest the main element. The main element can nest zero, one or more article elements.

If the main content of your web page is an article, use the article element for the main content. If the main content of your page is not an article, then use the main element for the main content. If the page is short (say less than two vertical screens long), then you may not need the main element for the main content.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

Header-Footer and the Address Elements in HTML

Sectioning Content – Part 4

Introduction

Related Links

Comments