Creating Navigation

We built some simple navigation in HTML5 & CSS: The Basics, but today, we are going to take our navigation a bit further. Semantically, it makes sense that navigation be represented as a list of anchor elements.

Using Lists

In HTML5 & CSS: The Basics, we created our navigation simply by creating two <a> elements inside a <nav> element:

<nav>
    <a href="final.html">Welcome</a>
    <a href="aboutFinal.html">About</a>
</nav>

Exiting code block.

While this works, this isn't the most meaningful. Since navigation is a list of hyperlinks, it makes more sense for us to represent the same content like this instead (new code in bold):

<nav>
    <ul>
        <li><a href="final.html">Welcome</a></li>
        <li><a href="aboutFinal.html">About</a></li>
    </ul>
</nav>

Exiting code block.

Today, we have two sets of navigation. Our main navigation already has the desired list structure:

<nav class="main-nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="schedule.html">Schedule</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="faq.html">Help</a></li>
    </ul>
</nav>

Exiting code block.

We won't have to modify this today. We also have our internal navigation:

<section class="question-list">
    <h1>Frequently Asked Questions</h1>
    What is a bicycle tour?
    What gear do I need to have and what gear does GOAR provide?
    Do you offer trips for beginning tourists?
    How far do tourists ride each day?
    What evening accommodations should I expect?
    How should I prepare for a tour?
</section>

Exiting code block.

Let's make this content into an unordered list of hyperlinks. We will leave the <a> elements' href attributes empty so that we can add the values in the next section.

Step1. To create the list markup, add:

<section class="question-list">
    <h1>Frequently Asked Questions</h1>
    <ul>
        <li><a href="">What is a bicycle tour?</a></li>
        <li><a href="">What gear do I need to have and what gear does GOAR provide?</a></li>
        <li><a href="">Do you offer trips for beginning tourists?</a></li>
        <li><a href="">How far do tourists ride each day?</a></li>
        <li><a href="">What evening accommodations should I expect?</a></li>
        <li><a href="">How should I prepare for a tour?</a></li>
    </ul>
</section>

Exiting code block.

Let's begin building the foundation needed to create our href values now.

Building Internal Navigation

The <a> element in HTML gives the ability to link to web pages both internally, within a site, as well as externally, to Web pages maintained by others. That's a very valuable function on the Web, but it really just begins to show the power of hyperlinking. Hyperlinks can also be used to jump users to particular sections of a single page. This is done by identifying a section with an id attribute and then linking to that id in the href attribute of an <a> element.

For example, consider the following code:

<a href="">Jump to Paragraph 2</a>

<p>This is the first paragraph</p>

<p>This is the second paragraph</p>

Exiting code block.

We want to create a hyperlink that will jump us from anywhere in the page to the second paragraph. Let's review id attributes now.

Applying the id Attribute

Since an id is a unique identifier within a page, a particular id can only be used once per document. This allows ids to be used for internal hyperlinking.

For example, to assign an id to the second paragraph in the previous example, we would add the id attribute shown below:

<p id="jump">This is the second paragraph</p>

Exiting code block.

Now that an id has been given to the second paragraph, we can link to it from the hyperlink at the beginning of our example. Think, for a moment, about CSS syntax. To create a CSS rule for an id, we would use the following syntax:

#name { property: value; }

Exiting code block.

The # is how we indicate that name is an id. We use a similar syntax when we create a hyperlink that points to a particular id in a page:

<a href="#jump">Jump to Paragraph 2</a>

Exiting code block.

Now, when a user clicks on the "Jump to Paragraph 2" link, the second paragraph will be shown at the top of the browser's viewport.

We will be adding id attributes to each <section> of our FAQ content. Let's add the first one now.

Step1. To add an id to the first section, add:

<section id="tour" class="question-answer">
    <h2>What is a bicycle tour?</h2>
    <p>From Wikipedia:</p>
    <p>Bicycle touring means self-contained cycling trips for pleasure, adventure and autonomy rather than sport, commuting or exercise. Touring can range from single to multi-day trips, even years. Tours may be planned by the participant or organised by a holiday business, a club, or a charity as a fund-raising venture.</p>
    <p><a href="http://en.wikipedia.org/wiki/Bicycle_touring">Visit the Wikipedia article to read more.</a></p>
    <p><b>Get Out &amp; Ride</b> offers bicycle tours that focus on the mid-west region of the United States. </p>
</section>

Exiting code block.

Let's add the rest of our ids using the same method.

Step2. To add the rest of our id attributes, use the table below:

Step3. Save and refresh index.html.

Now that our sections are identified, let's add the id syntax to our FAQ navigation.

Step4. To add the ids to our internal navigation, add:

<section class="question-list">
    <h1>Frequently Asked Questions</h1>
    <ul>
        <li><a href="#tour">What is a bicycle tour?</a></li>
        <li><a href="#gear">What gear do I need to have and what gear does GOAR provide?</a></li>
        <li><a href="#beginners">Do you offer trips for beginning tourists?</a></li>
        <li><a href="#distance">How far do tourists ride each day?</a></li>
        <li><a href="#housing">What evening accommodations should I expect?</a></li>
        <li><a href="#training">How should I prepare for a tour?</a></li>
    </ul>
</section>

Exiting code block.

Let's test the hyperlinks to make sure we typed everything correctly.

Step5. Save and refresh index.html.

Step6. To test the internal navigation,

Click each FAQ navigation link

Each link should take you to each individual <section>.

NOTE: If something is amiss, make sure that the name in the id attribute in the <section> matches the id syntax used in the <a> element's href attribute.