Chirag's Blog

HTML-Semantic Tags

Photo by Jackson Sophat on Unsplash

HTML-Semantic Tags

Chirag's photo
Chirag
·

3 min read

Table of contents

No heading

No headings in the article.

Overview

HTML Semantic tags introduce meaning to the web page rather than just presentation. A semantic tag clearly describes its meaning to both the browser and the developer. Semantic tags have many advantages over non-semantic tags like semantic tags are of great help to screen readers, and they also help in code optimization.

Introduction to Semantic tags

  • HTML Semantic tags indicate what the content is rather than just how the browser displays them.

  • Semantic elements: A semantic element clearly describes its meaning to both the browser and the developer.

    E.g.:-<header>, <footer>, and <form> - can tell the type of content by tag name.

  • Non-semantic elements: Unlike semantic elements, they don’t have any meaning. They don’t tell anything about the content they contain. They can be used with different attributes to mark up semantics common to a group. Following is the list of some non-semantic elements: div and span.

A Semantic tag clearly describes its meaning to both the browser and the developer. For example, a developer knows content inside <navbar> is of the navigation bar, and the browser knows how to display it.

Why Use Semantic Tags

  • By using Semantic tags in our code, we can provide additional information about that document by defining the layout and sections of the webpage.

  • Semantic elements are of great help to people using screen readers. The additional information provided by semantic tags help screen readers understand the content better and help them to determine the different section within a page more efficiently.

  • HTML Semantic tags help the browser determine the purpose of the page and its content. Semantic tags also help in Search Engine Optimization as they help browsers interpret the content more easily by making content more adaptive.

  • Semantic tags help developers write consistent code. Without semantic tags, we will have to define ids and classes and use CSS to define the header, footer, and navigation sections.

Using CSS:

<div id="nav"> 
<div class="header">
<div id="footer">

Using semantic tags:

<nav>
<header>
<footer>

Various HTML Semantic Tags are:

  1. <artical> :-The HTML <article> tag is used for independent, self-contained content, which means the content inside the article tag is complete and independent from the rest of the article.

  2. <aside> :-We use the aside tag when we want to give some additional information or information indirectly related to the main content, like tips, notes, sources, etc.

  3. <details> :-<details> tag is used to give additional information about the main content, which we can view or hide as we want.

  4. <figure>:- Figure tag is used to add images, diagrams, code, etc., in the article.

  5. <figcaption> :-This tag is used to give a caption to an image.

  6. <footer> :-<footer> tag defines a footer for the web page.

  7. <header>:-<header> tag defines a header for the webpage which contains the website logo, website name, navigation bar, etc.

  8. <main>:-<main> tag is used to write the main content of the article.

  9. <mark>:-It is used to highlight a word in a sentence. The Mark tag highlights the words by giving them a yellow background. It is supported by all major browsers.

  10. <section>:-<section> tag is used to create different sections on the webpage.

  11. <nav>:- This tag is used to create a navigation bar for the webpage.

HTML5semantic html