Semantic Elements In HTML

What is Semantic Element?

First, we will see what is semantic: Semantic is nothing but meaning. It studies the meaning of the word in any language.

Now what is Semantic Elements:

Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.

Semantic Elements make code easier to write and understand for the developer as well as easier to understand for the browser. Eg: <section>, <footer>, <nav>, etc.

semantic html.png

We can see in the image how every tag and element is divided in a structured way by using Semantic HTML.

Before the semantic elements, the non-semantic elements are used. Non-semantic elements do not have meaning. Non-semantic elements are <div> and <span>

As we can see before the semantic element we have to use the <div> tag to describe every tag on the HTML like section, footer, navbar, etc.

Why use Semantic Elements?

To see the uses of semantic elements we have two code snippets.

This is the first snippet in which Semantic Elements are used. We can clearly see that how much this is easier to read, write and understand for both developer and the browser.

<header></header>
<section>
    <article>
        <figure>
            <img>
            <figcaption></figcaption>
        </figure>
    </article>
</section>
<footer></footer>

This is the second snippet in which non-semantic elements are used. In this, we can only use the <div> tag, and to define the meaning we have to give id or class to every <div> tag.

<div id="header"></div>
<div class="section">
    <div class="article">
        <div class="figure">
            <img>
            <div class="figcaption"></div>
        </div>
    </div>
</div>
<div id="footer"></div>

Accessibility: Semantic HTML makes web pages accessible for mobile devices and people with disabilities as well. This is because screen readers and browsers can interpret the code better.
SEO: It improves website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weigh the most important content appropriately.
Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other web developers.

Semantic Elements in HTML

Here is an overview of some Semantic Elements:

section: <section> element is used to group standalone sections within a webpage containing logically connected content (news block, contact information, etc.)

Example:

Before <section>:

<div id="section">
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</div>

After<section>:

<section>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</section>

nav: The <nav> element defines a block of navigation links, either within the current document or to other documents. Note, that not all links in the HTML document can be placed inside the element; it can only include major navigation blocks. For example, the <nav> tag cannot be placed in the <footer> tag for defining links in the footer of the website.

Example:

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

footer: The element defines the footer of a web page or a section. As a rule, it contains copyright information, contact details, navigation links, etc.

Example:

<footer>
  Some copyright info or contact page.
</footer>

figure: The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

Example:

<figure>
    <img src=".jpg">
</figure>

main: The <main> element defines the main content of the page. The content of the <main> tag must be unique and not a duplicate block of the same type that is repeated in other documents, such as the header of a site, footer, menu, etc.

and many more elements you can see on MDN Web Docs

That's it from my side. This is my first blog. Hope you liked it! You can connect me on LinkedIn