What are Semantic Elements?

HTML semantic elements are elements that make some sense in the code to be clearer.

For example, <footer>, <form>, <table> and <article>. You can get an idea what this part of the code is.

Non-semantic elements, they are elements with div and span, this is very generic and can be used for many cases, avoid using this.

Semantic Elements in HTML

Many sites contain HTML code like: <div id="nav">, <div class="header"> and <div id="footer"> to indicate navigation, header and footer. Instead, we can use semantic HTML to be more precise and clear.

In HTML there are some semantic elements that can be used to define different parts of a web page:

• article
• aside
• details
• figcaption
• figure
• footer
• header
• main
• mark
• nav
• section
• summary
• time

NOTE

I highly recommend that you go into the documentation for each of the tags listed above and read each one of them to write semantic HTML, this will already be a great base.

To learn more about this, see list of all available HTML tags, visit HTML Tag Reference