Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What are Semantic elements in HTML?
2.1.
HTML <article> Element
2.2.
HTML <aside> Element
2.3.
HTML <footer> Element
2.4.
HTML <header> Element
2.5.
HTML <main> Element
2.6.
HTML <nav> Element
2.7.
HTML <section> Element
3.
Frequently Asked Questions
4.
Key Takeaways
Last Updated: Mar 27, 2024

Semantic elements in HTML

Author Mehak Goel
0 upvote

Introduction

HTML is a markup language that was created to design documents on the early internet. As the internet expanded in popularity and more people used it, it needed some new updates. Now, people want to make the web look nicer and pretty.

But initially, the web was not built to be designed that way, so programmers utilised various hacks to get things laid out in various ways. Instead of using <table></table> to describe the data using a table, programmers would rather use them to arrange other elements on a page.

As the use of visually designed layouts grew, programmers started using a generic “non-semantic” tag like the <div> tag. They would often give these tags a class or id attribute to explain their purpose. For example, instead of writing <footer> this was written as <div class="footer">.

Therefore, all the HTML tags are classified into two types, mainly known as Semantic and Non-Semantic elements. 

What are Semantic elements in HTML?

Semantic elements are elements having meaningful names that describe the content in a human and machine-readable way.

Elements such as <main>, <header>,<footer> and <section> are all considered as semantic elements as they accurately describe the primary purpose as well as the type of content these tags contain. 

Let’s have a look at some of the elements with their examples:

HTML <article> Element

The <article> element contains independent content without any other reference. It can be used in Forum posts, Product cards and Newspaper articles etc.

Example:

<article>
 <h2> Data Structure </h2>
 <p>A data structure is a way of organizing data in a computer so that it can be used effectively.</p>
</article>

 

Output:

HTML <aside> Element

The <aside> element contains the content that is indirectly related to the main content. It is represented mostly as a sidebar.

Example:

<p>Instagram is a social media app where you can post pictures and have chats with your friends. </p>
<aside>
  <h3>Instagram</h3>
  <p> Recently, there was a new feature added to instagram where we can add short videos with music and transitions. </p>
</aside>

 

Output: 

HTML <footer> Element

The <footer> element represents the footer of a page. We can have multiple <footer> elements on one page.

Example:

<footer>
 <p>Posted by: coding ninjas</p> 
 <p><a href="https://www.codingninjas.com/">codingninjas.com</a></p>
</footer>

 

Output:

HTML <header> Element

The <header> element defines the header of a document that contains introductory content or navigation links. 

We can have multiple <header> elements in one document. However, <header> cannot be placed inside <address>, <footer>,or another <header> element.

Example:

<article>
  <header>
    <h1>What is a Binary Search Tree</h1>
    <p> Binary Search Tree: </p>
  </header>
  <p>It is a binary tree with a specific order. In a binary search tree, all the nodes in the left subtree are less than the root node and the nodes in the right subtree is greater than the root node. </p>
</article>

 

Output:

HTML <main> Element

The <main> element represents the main content of a page. The content inside the main element must be unique.

Example:

<main>
  <h1>Places to visit</h1>
          
  <article>
   <h1>Udaipur</h1>  
   <p>It is known as the white city of India.</p>
  </article>

  <article>
    <h1>Kashmir</h1>
<p>It is known as paradise on earth. </p>
  </article>

</main>

 

Output:

HTML <nav> Element

The <nav> elements are used to define the set of navigation links.

Example:

<nav>
  <a href="https://www.codingninjas.com/courses/web-dev-react">React</a> |
  <a href="https://www.codingninjas.com/courses/full-stack-web-dev-mern">MERN </a>
</nav>

 

Output:

If you click on the links, they will navigate you to the respective pages. 

Like if you click on MERN, the following page will appear:

 

HTML <section> Element

The <section> element contains a section in a page. A page can have many sections, and each section can contain any kind of content within a heading.

<section>

  <h1>Football</h1>

  <p>Two opposing 11-player teams defend goals at opposite ends of a field with goalposts at each end, with points earned mostly by carrying the ball beyond the opponent's goal line and place-kicking or drop-kicking the ball over the crossbar between the opponent's goalposts.</p>

</section>

 

<section>

  <h1>Cricket</h1>

  <p>Cricket is primarily a bat-and-ball game. Batting, fielding, and bowling are all part of the game, which is played on an oval by two teams. A game can run anywhere from many hours to several days, with 11 players per team. Cricket is a sport that may be enjoyed by men and women of all ages, both socially and competitively.</p>

</section>

 

Output:


Check out this problem - No of Spanning Trees in a Graph

Frequently Asked Questions

Q1. What are non-semantic elements in HTML?

Ans. They have no meaning, unlike semantic elements. They provide no information regarding the content they contain. Examples of non-semantic elements are div and span tags.

 

Q2. Can we perform nesting of <section> tag in <article> tag?

Ans. Yes, we can use the <section> elements inside the <article> elements and <article> elements inside the <section> elements. 
 

Q3. What is the use of <figure> and <figcaption> elements used in HTML?

Ans. These are semantic elements that are used for adding images to the HTML page with a small description.

Key Takeaways

To summarise the subject, we looked at the semantic elements used in HTML documents. The list doesn't stop there; HTML has various tags and elements, which you can refer to in our other articles. Keep a lookout for future posts to help you along your growth path.

Don't be a slacker, Ninja; take part in our Web-development course to set yourself out from the crowd!

Live masterclass