Curated by @SajalShlan
A semantic element's defining feature is that it communicates its meaning to both the developer and the browser. Its content is clearly defined by these aspects.
HTML Semantic Elements
Tags | Explanation |
<article> | The <article> element specifies independent, self-contained content. |
<nav> | The <nav> element defines a set of navigation links. |
<aside> | The <aside> element defines some content aside from the content it is placed in (like a sidebar). |
<section> | It represents the section of the document. |
<details> | It specifies the tag for additional details. |
<header> | The <header> element represents a container for introductory content or a set of navigational links. |
<footer> | The <footer> element defines a footer for a document or section. |
<main> | This specifies the main page content and should be unique. |
<summary> | This specifies a header for the <details> element. |
<mark> | This specifies the text that is highlighted. |
Why Do You Need to Use Semantic Tags?
There are a number of benefits to utilizing semantic tags in HTML:
- Search engines and other user devices can employ semantic HTML tags to identify the importance and context of online pages.
- It's much simpler to comprehend pages containing meaningful components.
- It is more easily accessible. It provides a superior user experience.