Semantic elements are elements with a meaning. They are used for certain purposes, but the elements don’t have a sense. For example, if we take elements such as <div> and <span>, they don't mean anything.

On the other hand, elements like <form> and <table> has an obvious meaning even when they don't display anything. Therefore, we call them semantic elements.

These semantic elements are essential to convey your message clearly to browsers and fellow developers. Also, search engines and screen readers use semantic elements to understand the context of the web page. Therefore, the usage of semantic elements is essential for search engine rankings.

So you have to be familiar with these elements and use them properly even when they don’t contribute to your web page output.

Here are some of semantic elements:<article>, <aside>, <details>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>.

We will talk about some essential semantic elements below.

Page layout of a web page

When building websites, there is a standard accepted layout for a web page. Here is an image of a web page template.

Usually, the <header> contains the logo and site name. The main menu goes inside the <nav> tag. The <section> tag displays part of a document. The <article> tag contains self-contained, independent content. The <aside> tag contains content indirectly related to the main content - for example, a list of related blog posts. <footer> is at the bottom of the web page. It contains the copyright notice, sitemap, privacy policy, etc.

Usually, there are other elements inside a navigation menu. Let's create a navigation menu as an example.