Kingsley Ubah

Posted on Apr 28, 2021 • Updated on May 2, 2021 • Originally published at ubahthebuilder.tech

Semantic HTML Elements: Here are 8 elements to use instead of a div element

#webdev #html #programming #javascript

Hello again.

Last time out we did a little Introduction into React . Today I am slightly shifting the focus over to HTML.

HTML stands for Hyper Text Markup Language. You can represent all elements of a text document with a relevant tag in HTML. However, until the release of the HTML5 standard there were no elements to represent certain areas of a document.

As a result, you would often find mark-ups such as div class=”footer” or div class=”navigation” used to represent a footer and a navigation respectively. While this worked, it wasn't a semantically ideal use case. When I say semantic, I mean that each HTML element should represent it’s equivalent in a meaningful way. Thankfully, the coming of the HTML5 standard also brought about semantic elements.

What is a semantic element?

A document has a footer section. Instead of using: div class=”footer” to represent the footer in the HTML document, we’re now able to use a dedicated footer element.

The coming of semantic elements brought better meaning to our HTML markup and allowed us reason about HTML elements in a more intuitive and sensible way.

Without further ado, below are 10 elements to use in place of the div element:

Article

An article can represent a blog post or a forum post. Before the tag was introduced, you’d do something like this:

<div class=”first-article”>
<h2>1st article</h2>
<p>This is the first article from Kingsley</p>
</div>

Now, it’s all meaningful:

<article>
<h2>1st article</h2>
<p>This is the first article from Kingsley
</article>

<article>
<h2>2nd article</h2>
<p>This is the first article from Kingsley.</p>
</article>

Footer

The footer tag is used to represent the bottom section of the page.

Before:

< div class=”footer”>
  <p>Kingsley Ubah</p>
  <p><a href="mailto:kingsley@example.com">kingsley@example.com</a></p>
</div>

Now:

<footer>
  <p>Kingsley Ubah</p>
  <p><a href="mailto:kingsley@example.com">kingsley@example.com</a></p>
</footer>

Header

Header represents the area for some form of introductory content, such as the title of an article.

Before:

<div class=”article”>
  <div class=”header”>>
    <h1>React Definition</h1>
    <p>What is React?</p>
  </div>
  <p>React is a JavaScript framework...
</div>

Now:

<article>
  <header>
    <h1>React Definition</h1>
    <p>What is React?</p>
  </header>
  <p>React is a JavaScript framework...
</article>

Nav

Nav is used to hold a set of Navigation links.

Before:

<div class=”nav”>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
 </div>

Now:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  </nav>

Main

This defines the main content of a document.

Before:

<div class=”main”>
  <p> This is the main text </p>
 </div>

Now:

<main>
  <p> This is the main text </p>
</main>

Section

As it’s name suggests, it defines a section in a page

<div class=”section-one”>
<h1>First Section</h1>
<p>This is the first section</p>
</div>

<div class=”section-two”>
<h1>Second Section</h1>
<p>This is the second section</p>
</div>

Now:

<section>
<h1>First Section</h1>
<p>This is the first section</p>
</section>


<section>
<h1>Second Section</h1>
<p>This is the second section</p>
</section>

Figure and Figcaption

The figure tag specifies self-contained content, such as illustrations, code blocks, diagrams, photos etc.
The figcaption defines a caption for the figure.

<figure>
  <img src="ubahthebuilder.jpg" alt="This is my blog">
  <figcaption>Fig1. – Blog Home</figcaption>
</figure>

Aside

The aside element defines some content which will be placed beside another content, kind of like a sidebar,

Before:

<p>This content is the main content which will be placed at the center</p>

<div class=”sidebar”>
<h2>Side Content</h2>
<p>This content will be aligned to the side</p>
</div>

Now:

<p>This content is the main content which will be placed at the center</p>

<aside>
<h2>Side Content</h2>
<p>This content will be aligned to the side</p>
</aside>