Limiting div Tag Use for Better Code

We all know how popular and widely used the div tag is. The majority of websites use the div tag extensively. The div tag is not bad when used in small amounts, but the problem arises when it is heavily used. The excessive use of the div tag makes the code unreadable and disorganized. Due to this, Google's algorithm cannot read your code properly, which negatively affects your website's search engine optimization and reduces its reach.

Solution!!

To overcome the div tag problem we use, Semantic elements.

Semantic Elements

Semantic elements are used to make the code more organized. They specify different parts of the web page, clearly defining its content, which helps with the page's SEO.

The top semantic elements that are very helpful and must be known are mentioned below:-

1. Header

<header></header> is used to represent the main content heading of the web page and is also used for navigation links.

2. Nav

<nav></nav> is used to represent a section of a page that links to other pages or to parts within the pages.

3. Main

<main></main> is used to represent the main content of the body of a document.

4. Section

<section></section> represents a generic section of a document. We can use section element for different parts of the web page, like introduction, content and contact.

5. Article

<article></article> represents a complete, or self contained composition in a document, page, or application. This could be a forum post, a magazine or a newspaper article.

6. Figure and Figcaption

<figure></figure> element is used to specify diagrams or photos.

<figcaption></figcaption> is used to add a caption to the figure. We can use it to provide an image description.

7. Footer

<footer></footer> is used to contain information about the section, such as the author's name, links related to the document, and copyright data.

8. Mark

<mark></mark> element is used to highlight text in a document or in a web page.

---

If you want more information(examples), you can visit the following links:

• MDN Docs

• w3schools