Today I will learn how semantics tags are important to the coder and also website. before telling the advantages of semantics tags we will be known what semantics tags are A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

These semantics tags are used when working in a big company because when entering a new company and startup first you have to understand the code of that website and that code is not the proper manner of code and there is clearly defines its content. That time you face issues and working gets slow. That's why we use semantics tags to define the code to increase the readability of the code to that coder can understand the code easily.

Advantages of semantics tags

Improved accessibility: Semantic tags provide context to web content and make it easier for assistive technologies, such as screen readers, to understand and present the content to users with disabilities.
Better SEO: Search engines use semantic tags to better understand the content of a page, allowing for more accurate indexing and improved search rankings.
Consistent structure: Semantic tags provide a standard and consistent way of structuring web content, making it easier for developers to create and maintain websites.
Enhanced readability: Semantic tags improve the readability of web content for both users and developers, making it easier to understand the content and how it should be presented.
Reusable code: Reusing common semantic tags, such as header and footer, across a website can simplify the development process and reduce the amount of code needed.

Disadvantages of semantics tags

increased complexity: Using semantic tags adds complexity to a website's HTML code, which can make it harder to maintain and update.
Browser compatibility: Not all browsers support all semantic tags, which can lead to the inconsistent rendering of a website across different devices.
Overuse: Overuse of semantic tags can make the HTML code cluttered and harder to read, defeating the purpose of using them in the first place.
Misuse: Improper use of semantic tags, such as using them for styling rather than for their intended purpose, can lead to incorrect and inconsistent search engine optimization (SEO) results.
Learning curve: Semantic tags are a relatively new concept and may require time and effort for web developers to learn and understand how to use them effectively.

List of semantics tags

Here's a list of common semantic tags used in HTML and XML:

<html> - the root element of an HTML document
<head> - contains meta-information about the document
<title> - defines the title of the document, which is shown in the browser's title bar
<body> - contains the main content of the document
<header> - contains introductory content or a set of navigational links
<nav> - contains navigation links
<main> - contains the main content of the document, excluding content in sidebars, headers and footers
<article> - defines a self-contained content that can be independently distributed
<section> - defines a standalone section within an HTML document, such as chapters, headers, footers, or any other sections of the document
<aside> - contains content that is tangentially related to the main content, such as sidebars, pull quotes, and other secondary information
<footer> - contains information about the author, copyright information, and other information about the document
<p> - defines a paragraph
<h1> to <h6> - defines headings of different levels, with <h1> being the highest-level heading and <h6> being the lowest-level heading
<ul> - unordered list
<ol> - ordered list
<li> - list item
<img> - embeds an image
<a> - defines a hyperlink
<br> - line break
<hr> - horizontal rule (a thematic break)

This list is not exhaustive and there are many other semantic tags that can be used in HTML and XML.

Semantics tags are useful or not

Subscribe to my newsletter

Venkatesh Rapolu

Venkatesh Rapolu