HTML and CSS Reference
In-Depth Information
Being a forward-thinking
CEO, I feel better knowing we're
making the page as semantically sound
as we can. But don't we need some
navigation? How do I get from the home
page to the blog? And back?
We agree! Having multiple pages isn't going
to do us much good if readers can't navigate
between them.
And to create navigation for these pages, we're going to use
some of the tools we already know about; namely, a list and
some anchor tags. Let's see how that works.
First, create a set of links for our navigation:
<a href="index.html">
HOME
</a>
<a href="blog.html">
BLOG
</a>
<a href="">
INVENTIONS
</a>
<a href="">
RECIPES
</a>
<a href="">
LOCATIONS
</a>
W
e're leaving these thr
ee links blank because
we won't be adding
t
hese pages, but you sh
ould feel free to crea
te these pages!
Now, wrap up those anchors in an unordered list so we can
treat them as a group of items. We haven't done this before,
but watch how this works, and see how lists are perfect for
navigation items:
Notice that each link
is now an item in an
unordered list. This m
ay not look much like
navigation, but it will
when we apply some st
yle.
<ul>
<li><a href="index.html">
HOME
</a></li>
<li class="selected"><a href="blog.html">
BLOG
</a></li>
<li><a href="">
INVENTIONS
</a></li>
<li><a href="">
RECIPES
</a></li>
<li><a href="">
LOCATIONS
</a></li>
</ul>
Notice
also that we are iden
tifying one item as
the sel
ected one, by using a c
lass.
