Stop Using the Div Element for Everything in Your HTML
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.
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.
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.
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.
<h4> Headline one </h4>
The article and section elements are similar and can be used interchangeably in most cases.
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.
<li><a href="/home"> Home </a></li>
<li><a href="/about"> About </a></li>
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.
<p>This is a sidebar; content may complement main section.</p>
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.
<h1> Page heading </h1>
<p> Paragraph With supplementary info</p>
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> © 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.
<img src="./assets/img/lake_malawi.jpg" alt="beautiful lake" />
<figcaption> Image of lake Malawi at dawn </figcaption>
Here is a diagram depicting how a typical web page may be structured with HTML semantic elements.
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.