Beyond Basic HTML: The Art of Semantic Elements

Introduction

Before learning semantic elements, let's assume you joined a new company and you get a codebase to work on and you are struggling to understand that codebase, you are struggling to find the main content of the website, the aside part of the website, the footer part of the website, etc.

But why?

It might be possible that the codebase is not readable and the previous developer uses a div element for structuring every content.

Let's take a look

 <div class="header">
        <div class="nav">
        </div>
    </div>

    <div class="section">
        <div class="article">
            <div>

            </div>
        </div>
    </div>

As I used div everywhere to structure the web page so it is hard to read.

Here semantic elements come into the picture, semantic elements have some meaning, and they clearly describe their meaning to the browsers and the developers.

Have a look:-

<header class="header">
        <nav class="nav">

        </nav>
</header>

    <main class="main">

        <section class="section1">
        </section>

        <section class="section2">
        </section>

    </main>

    <aside class="sidebar">
    </aside>

As we can see how readable the code is.

we used a header tag to make the header, the main tag to write the main content, aside for the side. There are so many useful semantic tags which we'll discuss in the next blog with their meaning.

Using semantic elements is the crux of writing neat code.

Benefits of using semantic elements:-

• First things first, it improves the readability and maintainability of code. The easier is to understand the easier is to change.

• It enhances accessibility means screen readers(for visually impaired people) and search engines understand the content very effectively.

• Browsers understand the content and render our webpage effectively.

• It improves the SEO.

• It improves styling means we can easily target our header by tag name, we don't need to worry about class name, id name because there is only one header.

Note:

As I believe, to be a good developer we should more focus on practicality, not on theory. so go and try out some tags on your own and we will discuss some most important commonly used semantic tags with their meaning in the next blog.

Thank you so much for reading it completely, If you liked it do like and comment and follow for more content. Comment for any feedback.