Unleash the Power of HTML: Get to Know the Most Common Semantic Tags

what is a semantic tag?

A semantic tag is a specific type of HTML tag that provides meaning to the content it surrounds. These tags give structure and context to the content, making it easier for web browsers and assistive technologies to understand and process the information. Some examples of semantic tags include: <header> <nav> <article> <section> <aside> <footer> and <figure>.

what are its advantages?

The main advantage of using semantic tags in HTML is improved accessibility and search engine optimization (SEO).

1. Accessibility: Semantic tags make it easier for assistive technologies, such as screen readers, to understand the structure and purpose of the content on a web page, thus improving the accessibility of the web for users with disabilities.

2. SEO: Search engines use the structure and context provided by semantic tags to better understand the content of a web page, which can improve its ranking in search engine results. This is because search engines can use semantic tags to understand the main topics and themes covered on a page, and how they relate to the content on other pages.

3. Code organization and maintainability: Semantic tags can also make the HTML code more readable and easier to maintain, as it provides clear structure and meaning to the content.

Overall, using semantic tags in HTML can improve the accessibility, search engine visibility, and maintainability of a web page.

what are the most common semantic tags are there?

The most common semantic HTML tags are:

1. <header>: Defines a container for the header of a document or section.

2. <nav>: Defines a container for navigation links.

3. <main>: Defines the main content of a document, unique to the document and excluding content that is repeated across a set of documents such as site navigation, header, or footer.

4. <article>: Defines a self-contained composition in a document, such as a blog post or newspaper article.

5. <section>: Defines a section of a document, such as chapters, headers, footers, or any other sections of the document.

6. <aside>: Defines content aside from the main content, such as sidebars or pull quotes.

7. <footer>: Defines a container for the footer of a document or section.

8. <figure>: Defines self-contained content, such as images, diagrams, illustrations, code listings, etc.

9. <figcaption>: Defines a caption for an <figure> element.

10. <mark>: Defines marked/highlighted text.