What are Semantic Elements?
Semantic Elements are named in such a fashion that their name describes what they are for.
Header
<header>
is used of introductory content. Can included <h1> to <h6>
elements.
A page usually have a header at the beginning (top).
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.