Semantic HTML

HTML tags can be categorized into two types based on semantics in HTML. They are:

Semantic Tag
Non-semantic Tag

Semantic HTML elements clearly define the purpose and meaning of code.

Semantic Tags

The tags which accurately describe their purpose and describe the type of their content are called semantic tags. For example,

<h1>Header</h1>

From the above code, we can accurately tell that the content inside the <h1> tag is a heading.

Some examples of semantic tags are 一 <h1>-<h6>, <form>, <table>, <main>, etc

Non-Semantic Tags

HTML non-semantic tags do not have a specific meaning or purpose. They are used to create general-purpose containers for content without providing any additional meaning or context. For example,

<span>Some Text</span>

From the above code, we cannot extract the meaning of the text. This code could come from any section of the document thus it adds no semantic value to the document.

Some examples of non-semantic tags are 一 <div>, <span>, etc

Examples of some Semantic Tags

There are many semantic HTML tags that can be used to give meaning to the content of a webpage. Some examples of semantic HTML tags include

Semantic Tag	Description
`<p>`	defines a paragraph of a document
`<header>`	defines the header of a document or section of a document
`<footer>`	defines the footer of a document or section of a document
`<nav>`	define a section of the page that contains navigation links
`<article>`	used to specify independent, self-contained content
`<aside>`	defines some content aside from the content it is placed in. It is more like a sidebar
`<main>`	specifies the main content of a document
`<section>`	defines the section of a document
`<details>`	defines additional details that the user can view or hide
`<summary>`	defines the visible heading for the `<details>` element

Why use semantic HTML?

We use semantic HTML because the semantic HTML makes:

makes the code easier to read
makes the site more accessible
leads to better SEO

We will explore each of them in detail.

Semantic HTML makes the code easier to read

Some Semantic HTML tags like <main>, <aside>, <header>, etc do not have any added functionality and act identically to the <div> tag. However, these semantic tags make code easier to read.

Let us look at the following two examples.

Using Semantic tags

<body>
    <header>
        <h1>Heading</h1>
    </header>
    <section>
        <main>
            <article>
                This is the main content of the website.
            </article>
        </main>
        <aside>Extra information.</aside>
    </section>
    <footer>Copyright 2022</footer>
</body>

Browser Output

Sample HTML document using semantic code

Using <div> tag

<body>
    <div>
        <h1>Heading</h1>
    </div>
    <div>
        <div>
            <div>
                This is the main content of the website.
            </div>
        </div>
        <div>Extra information.</aside>
        </div>
        <div>Copyright 2022</footer>
</body>

Browser Output

Sample HTML document not using semantic code

As you can see, both examples create the same output. However, the first one is much easier to understand. This is a small example, but in the case of a large document, it might save hours of a developer's time.

Semantic HTML makes the site more accessible

Semantic HTML can help improve accessibility for people with disabilities because it allows assistive technologies, such as screen readers, to more easily interpret and navigate the content of the page. For example,

Using the <h1> tag to denote the main heading, rather than just making the text big and bold with CSS, allows a screen reader to properly identify the content as a heading and give it the appropriate level of importance.

This helps users with visual impairments better understand the structure and hierarchy of the page.

Semantic HTML leads to better SEO

The semantic tags make it easier for search engines to index the content. It also helps to identify important keywords on a webpage because they give the content a clear structure and hierarchy.

For example, using the <h1> tag for the main heading of a page, and the <h2> and <h3> tags for subheadings, allows users and search engines to easily identify the most important keywords on the page.