Semantic Elements In Html

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

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