What are Semantic Elements?

Semantic Elements are named in such a fashion that their name describes what they are for.

Main

Is the main attraction of the webpage. You put all content that is unique here.

Elements that don't belong inside a <main> element:

  • <header>
  • <nav>
  • <footer>

Article

As the name implies, you should be able to read the contents of an <article> element without any surrounding context. It should be able to stand alone.

Section

Bundle together content that belongs in the same group.

For instance, if you wrote an article about the etymology behind the name of the seven days, each time you talked about a new day, you would start a new <section> element.