3. CSS Navigation Bars

         

          Most of the online websites are composed of many web pages with different contents but with a uniform layout and theme. Links are used to allow the user to go from one page to another on the website. When creating links for web pages, grouping together different links for different web pages will make your layout more organized and give the user a sense of “direction” in navigating your website.

         Navigation bars, as the name implies, gives the user a way to go around your website. It is defined as a list of links and is formatted in a way that provides the user with an idea of where he or she is on your website.

          The code below is a demonstration of how you create a list of links. It is the basic code used for creating navigation bars. All the rest can be achieved with a few tweaks on colors and link states.

          Notice the new tag introduced. The <nav> tag is used to contain navigation links in a single block. This is very much alike to how <div> and <span> are used to group other HTML tags.

          Notice also how the <ul> tag is formatted to remove the bullet and the extra spacing. We would not want that for a navigation bar. 


<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav> 
  </body>
</html>