Semantic elements in HTML

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!