Let Your HTML Make Sense Using Semantic Elements

Let Your HTML Make Sense Using Semantic Elements

Today, web development is in its golden age. The sites that are built are not only informative but also artistic. Ten years ago, no one could even dream about the things now we are able to do using our browsers. However, despite this magnificence, we have compromised on the significance of HTML.

Today, web development is in its golden age. The sites that are built are not only informative but also artistic. Ten years ago, no one could even dream about the things now we are able to do using our browsers. However, despite this magnificence, we have compromised on the significance of HTML.

DIV Is An Unlimited Power

Here is a fun fact: apart from barebone setup, you can build a fully functioning website just by using div and span elements. This is totally possible because using CSS, you can turn empty divs and spans into any visually attractive element. By default div and span has no semantic meaning and styling. They’re just boxes holding what you put inside. And I think this is what makes especially div to be used heavily on the recent websites. Unlike semantic HTML elements, it has no meaning. So, you don’t have to think about its place or order amongst others. All of them are equal and will look like however you want. Take a look at this example.

When you see the piece of HTML above, do you get anything about the content or layout at first glance? I know you don’t because what you’ve seen is just a bunch of nested div tags with classes.

To understand the markup, you looked at the classes and tried to visualize them. This is the exact case with browsers. Since there is no semantic meaning in the markup, browsers cannot understand the site and index it easily. That leads to bad SEO and some troubles with users having disabilities and who access the site using virtual screen readers. So, the accessibility of the site decreases dramatically.

The other issue that non-semantic markup causes is the development difficulty. Since we all are humans, we cannot read the written markup as computers do. Let’s assume that we want to add another section right under an existing section. We have to find the existing section, then find the end of the block and start adding the new section. If the markup is non-semantic and looks like something in the picture above, this will be pretty hard because each element is just a div and looks almost the same. In this scenario, finding the closing tag of the existing section is pretty hard if the section has many lines. Because we have to follow indentation without making a mistake.

Communicate With The Way You Write HTML

However, instead of writing endless lines of div elements, fortunately, you have a ton of options to choose one. There is output to show results or time to insert dates into markup.

html web-development javascript programming html

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

JS Development Company India | JavaScript Development Services

Best JavaScript web app development company in India, PixelCrayons provides full stack JS development & maintenance. 16+ Yrs Exp., 60% less cost, Strict NDA

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

JS Development Company India | JavaScript Development Services

Best JavaScript web app development company in India, PixelCrayons provides full stack JS development & maintenance. 16+ Yrs Exp., 60% less cost, Strict NDA

Find the best web app development company for your Startup

Web development company in India & USA offers different types of web application development services with the best result oriented, clients all specifications, different technologies, etc with a cost-effective rate. Get a free quote.

JavaScript Web Developer Bootcamp - Complete Guide to Become JavaScript Developer

In this Video we will learn these concept and there are almost 10+ Project in javaScript. One Video For becoming web developer. This video will teach you web development from scratch.