Structuring a Page Footer

Our page, like just about every page on the web, includes some extra information in the footer. Different sites use the footer in different ways. For example, Indiana University uses the footer for navigation, copyright, privacy, and branding information:

The White House uses the footer for navigation, social/contact, copyright, accessibility, and translation information:

Gov.uk uses the footer primarily for navigation, but also for copyright, licensing, and policy information:

These examples give us several different implementations to consider. The footer of a site has evolved to be more than just contact information and the freshness date of the content.

NOTE: These images are provided as examples only. The current state of the previously-mentioned sites might be different than that of the screen shots.

Today, we will be creating a footer that gives contact information, navigation, and upcoming events navigation. When we're done, our footer will look something like this:

We will be introducing two new elements to help us with this process: <address> and <time> elements.

Using the Time & Address Elements

The <time> and <address> elements are semantic elements that allow us to properly identify date/time and address data.

By using both <time> and <address> elements, we are identifying certain parts of our code so other applications (calendars, phones, etc.) can more readily identify phone numbers, times, and addresses. This makes it so that when a user clicks an address, for example, the application that handles address and/or direction information on the device can find the location (if it's programmed to do so).

The <time> element is used to identify human-readable date/time content:

<time>February 20, 2015 at 5pm</time>

Exiting code block.

Let's add some date/time information to our footer.

Step1. Activate index.html in the code editor.

Step2. To add <time> elements to the footer, type the code shown in bold below:

<section>
    <h1>Upcoming Tours</h1>
    <ul>
        <li><a href="">Adirondack Loop</a><p class="dates">Dates: 
        <time>Aug. 18 - Aug. 26, 2016</time></p></li>
        <li><a href="">Jacksonville, FL to Key West, FL</a><p class="dates">Dates: 
        <time>Sept. 10 - Sept. 30, 2016</time></p></li>
        <li><a href="">Green Mountain Loop (USA &amp; Canada)</a><p class="dates">Dates: 
        <time>Oct. 9 - Oct. 17, 2016</time></p></li>
        <li><a href="">Route 66 (Tulsa, OK to Albuquerque, NM)</a><p class="dates">Dates: 
        <time>Nov. 3 - Nov. 21, 2016</time></p></li>
        <li><a href="">California Coast</a><p class="dates">Dates: 
        <time>April 3 - April 30, 2017</time></p></li>
        <li><a href="">Underground Railroad</a><p class="dates">Dates: Independence Day, 2017</p></li>
    </ul>
</section>

Exiting code block.

You can also encode machine-readable date/time information using the datetime attribute. This allows an application programmed to look for dates (like a calendar) to be able to find the exact day/time information for a day that humans can recognize by name. For example:

<time datetime="2/14/2015 21:00">Valentine's Day</time>

Exiting code block.

This allows a user with a calendar application to more easily locate and add events on a page to a calendar. Let's add this to our last tour date now.

Step3. To add the last bit of date/time data, type the code shown in bold below:

<section>
    <h1>Upcoming Tours</h1>
    <ul>
        <li><a href="">Adirondack Loop</a><p class="dates">Dates: 
        <time>Aug. 18 - Aug. 26, 2015</time></p></li>
        <li><a href="">Jacksonville, FL to Key West, FL</a><p class="dates">Dates: 
        <time>Sept. 10 - Sept. 30, 2015</time></p></li>
        <li><a href="">Green Mountain Loop (USA &amp; Canada)</a><p class="dates">Dates: 
        <time>Oct. 9 - Oct. 17, 2015</time></p></li>
        <li><a href="">Route 66 (Tulsa, OK to Albuquerque, NM)</a><p class="dates">Dates: 
        <time>Nov. 3 - Nov. 21, 2015</time></p></li>
        <li><a href="">California Coast</a><p class="dates">Dates: 
        <time>April 3 - April 30, 2016</time></p></li>
        <li><a href="">Underground Railroad</a><p class="dates">Dates: 
        <time datetime="07/04/2017">Independence Day, 2017</time></p></li>
    </ul>
</section>

Exiting code block.

The <address> element is used to identify owner information for a page or article in an HTML document. Let's add the address element to our footer now.

Step4. To add the <address> element to our page, type the code shown in bold below:

<section>
    <h1>Contact Us</h1>
    <address>
        <p> 
        Get Out &amp; Ride<br />
        19876 S West Street<br />
        Indianapolis, IN 46202
        </p>
        <p>tel: 812-555-4627</p>
        <p>eml: <a href="mailto:getoutandride@example.com">getoutandride@example.com</a></p>
    </address>
</section>

Exiting code block.

Let's look at our footer in the browser.

Step5. Save and refresh index.html.

You see that there's not a visual change to the content. These elements are simply for adding some meaning to the structure of a page.

NOTE: Using a mailto link seen in the previous step may allow the email address to be gathered by spammers. For information on some methods to possibly deter that, visit this IU Knowledge Base page about protecting your web pages from email address harvesting.