semantic html

To convey meaning of the content rather than just displaying the contents

• So search engine and other navigation tool can better understand your code
• easier for debug

header

• title
• logo
• navigation links

nav

<!-- Non-semantic navigation -->
<div class="navigation">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

<!-- Semantic navigation -->
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

main

• mark up the main content of the page

article

• should be self contain
• for new article, blog posts...

section

• mark sections on the page that are semantically grouped together

footer

• contact, copyrights...

Other semantic htmls