nav element
Intro
The <nav>
element is used to wrap around navigation links.
A common use for the <nav>
element is the navigation menu at the top of a web page. Another use case could be a table of contents for a long blog post.
A web page can have more than one <nav>
element.
Steps
Create nav element
To create the <nav>
element, type <nav>
and then press Tab. Then press Enter, which should create a blank line in between the tags.
<nav>
</nav>
Create unordered list
Inside the nav element, type ul
and press Tab to create the <ul>
element. Then press Enter to create a blank line in between the tags.
<nav> <ul>
</ul></nav>
Create list item elements
Inside the <ul>
element, type li
and press Tab to create a list item element. Then press Enter after the element to create a new line. Then repeat these steps again until you have 3 <li>
elements, just like below.
<nav> <ul> <li></li> <li></li> <li></li> </ul></nav>
Create anchor elements
Inside each <li>
element, type a
and press Tab to generate an anchor element inside each one. This should create both tags with an href attribute in the opening tags.
<nav> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul></nav>
Add link information
We want to link the Home, About, and Contact pages, so write these names inside each anchor element, just like the snippet below.
<nav> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul></nav>
If you check the preview, you should see an unordered list with three links. However, the links don’t work yet.
To link to the home page, type a / inside the quotes. To link to the About and Contact pages, type the file names inside the quotes (about.html
and contact.html
).
<nav> <ul> <li><a href="/">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul></nav>
Click on the links in the live preview to see if they are working correctly. Also, note that the <nav>
element won’t change the way the list or links look.
Final code
Check the last code snippet for the code that should be in between the body tags.