Nkiru Nwanolue's Blog
The Beauty Of Semantic HTML. Part 1

The Beauty Of Semantic HTML. Part 1

Making Use of Semantic Elements In Place Of <div> Element

Nkiru Nwanolue's photo
Nkiru Nwanolue
·

2 min read

Table of contents

No heading

No headings in the article.

Semantic elements in Html simply put are tags that give meaning to any html page

Think of them as elements that clearly announce their value to not only us as a developer but to browsers too. Most times when building our websites, we often overuse the <div> element to point out whether it’s a header or a footer, etc. I know I’m guilty of this.

Example: div class="header"

This is where semantic HTML comes in because it allows us to define various parts of a web page. This part will cover the first four elements in semantic Html, where it is used, and its examples.

The first four elements we'll be looking at are:

  • <header>

  • <nav>

  • <section>

  • <footer>

<header> Element

This element serves as a container for introductory elements or navigational links. it contains:

  • The icon or logo of the website

  • Heading elements e.g <h1>, <h4>, <h6>

  • Information on the origin of the website

Example

Ordinarily, we would use `

<div class="header" >

<h1>Coding 101</h1>

 <p>Learning to code is a patient consistent process.</p>

</div>

`

Instead, let's make use of the <header> element.

`

 <header>

 <h1>Coding 101</h1>

 <p>Learning to code is a patient consistent process.</p>

 </header>

`

nav Element

This element is used to define a set of navigational links although not all links should be included in the <nav> element.

Example

Instead of this

`

 <div class="nav">

<a href="/home">Home</a>

 </div>

` Use this

`

 <nav>

<a href="/home">Home</a>

 </nav>

`

section Element

This element represents a section in a document and it is typically used for Introduction, content information etc.

Example

Instead of this

`

 <div class="section">

 <h2> Welcome page</h2>
 <p> Hi! Welcome to my blog page</p>

 </div>

`

Make use of this

`

 <section>

 <h2> Welcome page</h2>
 <p> Hi! Welcome to my blog page</p>

 </section>

`

footer Element

A footer contains important information about the owner of the web page, contact information, copyright data or links to documents with the same similarity.

Example

Instead of this

`

 <div class="footer">

 <p> All Rights Reserved. 2022</p>

 </div>

`

Make use of this

`

 <footer>

 <p>All Right's Reserved</p>

 </footer>

`

HTML