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