Semantic HTML

In addition to <em> and <strong> tags we can give our html additional meaning by nesting basic elements in semantic elements. The following are just a couple examples:

• Nav - The <nav> element defines a set of navigation links. When creating multipage sites, the nav region defines all the important links for moving around the site. The nav element is also important for accessibility

  <nav>
    <ul>
      <li><a href="about.html">About</a></li> 
      <li><a href="tutorials.html">Tutorials</a></li>
      <li><a href="reference.html">Reference</a></li>
    </ul>
  </nav>
  

• Footer - The <footer> usually goes at the bottom of a page, and contains author information, and seconday navigation link items on a site.

  <footer>
    <p>Author: Claire K-V</p>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="faq.html">Frequently Asked Questions</a></li>
  </footer>
  

• Example site with Semantic HTML
• More Semantic HTML if you are interested!

Next: IDs and Classes

Previous: New Elements