HTML and CSS Reference
In-Depth Information
Storyboarding a protected structure is particularly important to ensure that no unau-
thorized access to the protected area is allowed in the site design.
Creating a Navigation List
Every Web site should include a
navigation list
, which is a list containing links to the main
topic areas of the site. Ideally, this same list should appear prominently on every page,
usually near the top of the page as part of the header or as a sidebar to the main content.
HTML5 introduced the
nav
structural element to make it easier to mark up navigation
lists. The syntax of the element is
<nav>
list of navigation links
</nav>
where
list of navigation links
is a list of elements that are linked to other pages
on the Web site. Prior to HTML5, such lists would often be inserted within the generic
div
element as
<div id=”
id
”>
list of navigation links
</div>
where
id
is whatever id the page author would supply to identify the navigation list.
Gerry suggests you add the topics for his three sample pages as an unordered list
within the
nav
element as follows:
<nav>
<ul>
<li>Home</li>
<li>Tips</li>
<li>Glossary</li>
</ul>
</nav>
Gerry has already designed styles for these new elements and placed them within the
camstyles.css style sheet. The style sheet will format the elements so that the list appears
as a horizontally aligned set of boxes. As Gerry adds more sample pages, he can easily
extend this list to include the new topics, but for now he needs only these three.
Add this navigation list to each of the three sample pages that Gerry has given you.
To create the navigation list:
◗
1.
Return to the
home.htm
file in your text editor.
◗
2.
At the top of the file directly below the header element, insert the following code
as shown in Figure 2-8:
<nav>
<ul>
<li>Home</li>
<li>Tips</li>
<li>Glossary</li>
</ul>
</nav>