Regular tags in HTML do not indicate what they contain or the functions they perform on a page which might make it hard for a developer or the browser to interpret. HTML5 addresses this with elements that indicate the role and show the content of those tags. These elements are known as SEMANTIC ELEMENTS. HTML semantic elements simply describes its function and content to both the browser and developer.
Example of semantic Elements in HTML
HeaderThe header element represents the introductory part of a website. It usually contains logo, site name and navigation links.
FooterFooter element contains the footer content of a webpage. It contains information like author’s information, sitemaps, copyright information.
ArticleArticle element defines article contents. It can represent blog posts, newspaper story, forum post, a magazine.
SectionThe section element divides the content of a page into sections and subsections.
NavThe Nav element contains the navigation links.
FigureFigure element specifies contents like images, tables, charts, diagrams illustrations.
FigcaptionFigcaption element defines a caption for the content of the figure element.
Some other semantic elements in HTML
<aside></aside> <details></details> <main></main> <mark></mark> <summary></summary> <time></time> <address></address> <dialog></dialog> <meter></meter> <progress></progress>
In conclusion, Semantic elements make HTML more understandable by better defining the various parts of a web page. It makes web pages more accessible and adaptable, allowing browsers and search engines to better interpret content.