HTML Semantic Elements

For example: when you're reading a book, headings, paragraphs, and lists help you understand the structure and flow of the content. In the same way, HTML uses elements like headings (< h1 >, < h2 >, etc.), paragraphs (< p >), and lists (< ul >, < ol >, < li >) to structure a web page.

Using semantic HTML elements not only helps browsers and screen readers understand how to display the content, but it also helps search engines figure out what your page is about. So, instead of just using < div > or < span > for everything, you use elements that best describe the content, like " < header >, < nav >, < main >, < article >, < section >, and < footer >."

Non-Semantic and Semantic

Non-semantic elements: < div > and < span > – It wont tell what content is present

Semantic elements: < form > , < table >, and < article > – It clearly shows what type of content is present.
< header > : Explaining its use for top-of-page content.

< nav > : Illustrating navigation elements.

< article > : Demonstrating its role in marking standalone content.

< footer > : Describing its use for footer content.

< aside > : Used for content that is tangentially related to the main content of the page, often presenting additional context, sidebars, pull quotes, or related content.

Below image shows all the semantics code

From the above code image:

< header > : contains the main heading and a brief introduction.

< nav > : holds navigation links.

< main > : contains the primary content of the page.

< article > : Describing its use for footer content.

< footer > : contains the copyright notice.