Semantic Elements In Html

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

1. Header

   The header element represents the introductory part of a website. It usually contains logo, site name and navigation links.

2. Footer

   Footer element contains the footer content of a webpage. It contains information like author’s information, sitemaps, copyright information.

3. Article

   Article element defines article contents. It can represent blog posts, newspaper story, forum post, a magazine.

4. Section

   The section element divides the content of a page into sections and subsections.

5. Nav

   The Nav element contains the navigation links.

6. Figure

   Figure element specifies contents like images, tables, charts, diagrams illustrations.

7. Figcaption

   Figcaption 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.