Stop Using the Div Element for Everything in Your HTML

Alternatives to the HTML div element

Image for post
Image for post
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.

Image for post
Image for post
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,
  • Clean, readable and maintainable code,
  • Allows for better user experience,
  • Better ranking of web pages on search engines and
  • Better parsing of web pages by browsers

Here is a selection of HTML semantic elements that you can use in your web pages. For a more exhaustive list, take a look at Mozilla docs here.

Article

The article element is used in defining a self-contained area on a page. In other words, the entry within an article element is a complete composition. Ideal candidates to be placed within the article elements include an entire blog post which is independents of other elements. Each article is wholly self-contained and can therefore contain sub-elements directly under it.

Section

One of the elements that can be used to group content thematically is the section element. The section element defines distinct content of a web document. Below are the article and section elements in action.

<article>
<p>Main headlines</p>
<section>
<p>News</p>
<h4> Headline one </h4>
</section>
</article>

The article and section elements are similar and can be used interchangeably in most cases.

Nav

Navigation to other parts of a website is key. The nav element helps to define the main navigation areas for a website. Often, the nav element contains a group of links. Common forms of the nav element are top navigation bar or side navigation. Here is a simple navigation section.

<nav>
<ul>
<li><a href="/home"> Home </a></li>
<li><a href="/about"> About </a></li>
</ul>
</nav>

Aside

An aside element defines smaller content areas outside of the normal flow of a web page. The content within an aside element is somehow related to the main content but may be placed in a sidebar, for example. It is complementary to the main content.

<aside>
<p>This is a sidebar; content may complement main section.</p>
</aside>

Header

The header element defines the topmost part of a web page, article, or section. Typically, a header will contain navigation tools or a search bar that appears the very top of a web page.

<header>
<h1> Page heading </h1>
<p> Paragraph With supplementary info</p>
</header>

Footer

What goes up must come down! If there is a header, surely there must be a footer. The footer element is used to define the bottom part of a web page, article or section. Typically, it contains metadata, for example, author details or a website owner.

<footer> &copy; Mkulu inc. All rights reserved </footer>

Figure and figcaption

Last but not least, the figure element helps define content that contains a figure, for example, image charts, etc. The figcaption simply adds text caption to your figure.

<figure>
<img src="./assets/img/lake_malawi.jpg" alt="beautiful lake" />
<figcaption> Image of lake Malawi at dawn </figcaption>
</figure>

Here is a diagram depicting how a typical web page may be structured with HTML semantic elements.

Image for post
Image for post
diagram by author

Conclusion

HTML semantic elements help you to deliver high-quality web content in an organized and clean manner. In addition, the website code is highly maintainable and readable.

Written by

I develop software by profession. My interests include: history, economics, politics & enterprise-architecture. I am a child of God.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store