HTML Semantic Elements

A developer’s work is not confined to designing a website's layout and providing structure. As a developer, you may have worked tirelessly to decide on the page structure, font size, style, color, placement of the graphics, and so on. But how do you define your page’s hierarchy?

If you have opted for an HTML course, you must have learned about the conventional HTML elements such as <span> and <div>, which are generic containers that help to style and structure a website’s content. However, if we do not insert semantic meaning, it becomes difficult for accessibility tools and search engines to understand the purpose the different parts of your webpage are supposed to serve.

Semantic elements in HTML are important aspects of web development that help convey the meaning and define the purpose of your website’s content. This kind of specification imparts information not only to viewers but also to machines that determine the webpage's ranking in Google SERPs. 

Some such examples of semantic tags in HTML are <header>, <article>, <footer>, <main>, <aside>, etc. In this tutorial, I will explore what is semantic HTML and guide you through some of these semantic elements in action. Let's dive in!

Why Do We Use Semantic Elements in HTML?

Semantic elements in HTML help improve a website’s consistency across the internet. Before I delve deeper into the discussion, let us first glance through the benefits of using semantic elements in HTML. 

Easy Accessibility

The use of HTML semantics helps improve website accessibility. This is beneficial for mobile applications as it requires less memory than non-semantic HTML. Although this may not show much variation for small applications, the difference is very prominent for larger websites.

Semantic elements help in better interpretation of the codes and improve the responsiveness of the websites.

The primary function that semantic elements in HTML perform is that they define the different sections of a website very clearly. As a result, consistency is maintained throughout the web page, and the audience is able to enjoy a smooth and seamless experience. 

Better Optimization 

Search Engine Optimization (SEO) defines the rank of a website on the SERPs. Semantics help improve the rank of a website by making the contents easily identifiable to search engines. 

The use of semantic elements in HTML helps browsers interpret the codes better and identify the structure of the website for better optimization. 

What are the Different Semantic Elements in HTML?

Many web pages contain HTML codes such as <div id=”nav”>, <div class=”header”>, and <div id=”footer”> to denote navigation, header, and footer sections. 

The <div> part is non-semantic. Therefore, in order to ensure the specificity of certain <div> elements, developers need to add an id attribute. 

There are many semantic elements in HTML5 that can help developers define their web pages better. I have listed some of them below:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

In the next part of the tutorial, I will provide a few examples that will help clarify the HTML 5 semantic tags. 

HTML Semantics Use Cases 

These use cases of HTML semantics will help you have a better idea about the use of semantic elements in HTML.

<section> Element in HTML

When a write-up is divided into sections, it ensures ease of comprehension and readability. This is defined with the help of the <section> element in HTML. 

A web page can be split into sections for writing chapters, introductions, contact information, etc. 

Let us understand the use of the <section> with the help of this example. Suppose we are trying to create a webpage that will have two sections, the code will be: 

Code:

Compilation:

The screenshot below shows the outcome that this code will generate. 

<article> Element in HTML

In HTML, the <article> element is used to denote a piece of content that is self-contained and can be told apart from the rest of the web page. This element is ideally used for content like news articles, blog posts, forum posts, or any such content that can stand alone. 

Here is an example to show how to use the <article> element in HTML:

Code:

This code will generate the following outcome:

<header> Element in HTML

Every write-up has headings at the top of the webpage or within sections. HTML has a <header> element that is used to define the navigational or introductory content at the top of a webpage. 

The <header> section contains the headings, authorship information, logos, navigation menus, search bars, and other elements that are important for the overall structuring and navigation of the webpage. 

Let us understand how to create a header using HTML5 semantic tag header with an example. The code is as follows:

Code:

Compilation:

In this semantic element in HTML, the <article> element contains information about the advantages of exercising regularly. The <header> element has the <h1> tag that denotes the main heading of the topic. Next, the <p> element provides readers with an introduction so they know what to expect from the article. 

The main body of the article starts from the next <p>.

It is important to note that an HTML document can contain multiple header elements. However, header elements cannot be placed within the address, footer, or another header element. 

<footer> Element in HTML

As the term itself suggests, the <footer> semantic element in HTML is used to define the footer for a section or an entire document. This semantic element encompasses important information like information about authorship, contact information, copyright information, or sitemap information. 

The <footer> semantic element in HTML may also contain information about the related documents or direct users back to top links. 

You can scroll back to the example we have used in the <article> element section to understand how the <footer> HTML element works. 

<nav> Element in HTML

The <nav> semantic element in HTML is used to define a set of navigation links. It contains the list of links, menus, and other navigation-related content that is present on a webpage. 

<aside> Element in HTML

Do you remember how our school textbooks had a small box on one side of the page that read “Fun Facts” or “Did You Know?” This is a classic example of the use of the <aside> element in HTML. 

The <aside> semantic element in HTML defines some content that is placed in a sidebar. The content is, however, indirectly related to the content that the webpage is dealing with. 

Let us understand this with an example. 

Code:

The result for this code will be displayed thus: 

Final Words

I hope this tutorial has provided you with a lot of information on the new semantic elements in HTML5. Developers can use these HTML 5 elements to provide specific information about the various parts that make up a webpage. 

If you are looking forward to learning more about HTML, you can check through the courses offered by upGrad. These courses will help you learn the features connected to HTML and give you a competitive edge in this fast-pacing digital age. 

Learn, apply your knowledge in projects, and excel in the realm of website development!

Frequently Asked Questions 

1. What is the semantic element of language?

It is an element that helps to clearly denote what kind of content an element contains. 

2. How many semantic tags are there?

There are several semantic tags in HTML like <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>, etc.

3. What are semantic documents using HTML?

Semantic documents using HTML are web pages that use HTML elements to accurately convey the meaning and structure of their content. This involves using appropriate HTML tags such as <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, etc., to semantically represent different parts of the webpage. By doing so, semantic elements in HTML enhance accessibility, search engine optimization, and overall comprehension of the webpage's content by both humans and machines.

4. What is semantics with an example?

Semantic tags in HTML5 help in denoting a meaningful structure to a webpage and also define the purpose of the different elements. This helps in enhancing the understanding of both viewers as well as SEO bots. For instance, using the <header> element marks the introductory content of a webpage.

5. Why do we use semantic HTML?

We use semantic HTML to provide meaning and structure to web content, making it more accessible to both users and machines like search engines. This improves search engine rankings, assists with screen readers for accessibility, and enhances the overall understanding and organization of web content.

6. Is the main tag semantic?

The <main> tag indicates the area of the webpage that contains the main content. 

7. What is semantics and syntax?

The semantic elements in HTML define the purpose and meaning that each element conveys. On the other hand, syntax ensures the accurate formatting and arrangement of HTML code, thereby ensuring the language's compliance with the rules and specifications. 

8. Is the button a semantic element?

The <button> element is considered semantic because it indicates some kind of interactive functionality, like submitting forms or triggering some kind of action.