Semantic HTML Elements: Here are 8 elements to use instead of a div element
Tags: webdev, html, programming, javascript
Published: 2021-04-28 23:10:17


**Hello again.**

Last time out we did a little  [Introduction into React](https://dev.to/ubahthebuilder/learn-react-in-plain-english-3php) . 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:

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

Now, it’s all meaningful:

``` html
<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:

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

Now:

``` html
<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:

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

Now:

``` html
<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:

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

Now:

``` html
<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:

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

Now:

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

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

``` html
<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:

``` html
<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.

``` html
<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:

``` html
<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:

``` html
<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>
```

> 
P/S: I recently launched my Beginners Guide to Web development for Absolute Beginners.  [Check it out](https://gumroad.com/l/WebDevBeginners) .


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.**