HTML and CSS Reference
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
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
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.
<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>
Notice also that we are iden tifying one item as
the sel ected one, by using a c lass.