DEV Community

Cover image for Semantic HTML Elements: Here are 8 elements to use instead of a div element
Kingsley Ubah
Kingsley Ubah

Posted on • Updated on • Originally published at ubahthebuilder.tech

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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Now:

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

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>
Enter fullscreen mode Exit fullscreen mode

Now:

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

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>
Enter fullscreen mode Exit fullscreen mode

Now:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  </nav>
Enter fullscreen mode Exit fullscreen mode

Main

This defines the main content of a document.

Before:

<div class=”main”>
  <p> This is the main text </p>
 </div>
Enter fullscreen mode Exit fullscreen mode

Now:

<main>
  <p> This is the main text </p>
</main>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

P/S: I recently launched my Beginners Guide to Web development for Absolute Beginners. Check it out .

These 8 are some of the semantic elements to be used in lieu of the div tag. I hope you found this post enlightening.

Make sure to follow this blog for more informative posts on web development.

See you soon.

Top comments (4)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Awesome it was well explained too!

Collapse
 
ubahthebuilder profile image
Kingsley Ubah

Thank you Andrew!

Collapse
 
peterlunch profile image
Peter

Great post, really important to use semantic HTML for accessibly.

Collapse
 
cswalker21 profile image
cswalker21

Thanks for this. Good article!