Stop Using the Div Element for Everything in Your HTML

Alternatives to the HTML div element

Photo by Marius Serban on Unsplash

Introduction

In this post, I will show you how you can write clean and well-structured HTML code by utilizing semantics elements.

If you have been using HTML for a while you will have probably come across code that looks similar to the one below. Having a ton of div elements that your head starts to spin.

Note: The figure below is an example of bad HTML code.

div screenshot

HTML semantics are more explicit in representing HTML elements. For example, in the last but one line in the code above, instead of using a div element to define a footer you could simply use the footer element as follows:

<footer> … </footer>

HTML semantic elements allow you to deliver highly fluid and interactive web content in an organized structure. In addition, HTML semantic elements are used by web browsers for search engine optimization (SEO).

The Advantages of HTML semantic elements

• Better structured web pages,