Table of contents
1.
Introduction
2.
What are Semantic elements in HTML?
3.
What Are Semantic HTML Tags?
4.
Why Do I Need to Use Semantic HTML Tags?
5.
Types of HTML Semantic Tags
5.1.
HTML <article> Element
5.2.
HTML <aside> Element
5.3.
HTML <footer> Element
5.4.
HTML <header> Element
5.5.
HTML <main> Element
5.6.
HTML <nav> Element
5.7.
HTML <section> Element
6.
Frequently Asked Questions
6.1.
What is the main semantic element in HTML?
6.2.
Is HTML a semantic language?
6.3.
What is the HTML semantic element for menu?
6.4.
Why use semantics in HTML?
6.5.
What are non-semantic elements in HTML?
6.6.
Can we perform nesting of <section> tag in <article> tag?
6.7.
What is the use of <figure> and <figcaption> elements used in HTML?
7.
Conclusion
Last Updated: Nov 11, 2024
Easy

Semantic elements in HTML

Author Mehak Goel
0 upvote

Introduction

In web development, semantic HTML plays a crucial role in creating meaningful, accessible, and SEO-friendly websites. Semantic elements are HTML tags that not only define the structure of a webpage but also convey the meaning of the content they enclose. These elements improve the readability of your code for both developers and browsers, making it easier to maintain and understand. By using semantic HTML, you enhance the accessibility of your site, allowing screen readers and other assistive technologies to better interpret the content. In this blog, we will explore what semantic HTML elements are.

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

Here's your problem of the day

Solving this problem will increase your chance to get selected in this company

Skill covered: Programming

How do you create a function in JavaScript?

Choose another skill to practice

What Are Semantic HTML Tags?

Semantic HTML tags are elements that clearly describe their meaning in both human-readable code and machine-readable format. These tags provide a clear structure to the content of a webpage, helping browsers, developers, and search engines understand the role of different parts of the page. Unlike non-semantic tags (like <div> or <span>), semantic tags convey more specific meaning about the content they wrap. For example, <article> defines an independent piece of content, while <header> represents the introductory section of a document. By using semantic HTML tags, you create a well-organized, more accessible, and SEO-friendly web page that is easier to navigate and understand.

Why Do I Need to Use Semantic HTML Tags?

Using semantic HTML tags improves both the accessibility and SEO of your website. Since semantic tags describe the content’s purpose, they enable screen readers and other assistive technologies to present the content more clearly to users with disabilities. For search engines, semantic tags improve indexing and ranking by helping crawlers understand the importance and context of various sections of a page. Additionally, using semantic tags makes your code cleaner, more readable, and easier to maintain, as each tag clearly indicates the type of content it contains. This approach leads to better user experience, improved performance, and enhanced discoverability on the web.

Types of HTML Semantic Tags

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

What is the main semantic element in HTML?

The main semantic element in HTML is <main>, which defines the primary content of a webpage, excluding headers, footers, and sidebars.

Is HTML a semantic language?

HTML itself is not inherently semantic, but it provides semantic elements (like <article>, <header>, and <footer>) to structure content meaningfully.

What is the HTML semantic element for menu?

The semantic element for a menu in HTML is <nav>, which is used to define navigation links to other sections or pages.

Why use semantics in HTML?

Using semantics in HTML enhances accessibility, improves SEO, and makes code more readable and maintainable by clearly defining content's meaning and structure.

What are non-semantic elements in HTML?

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.

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

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

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

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

Conclusion

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