Semantic Tags in HTML
FREE
Overview
HTML Semantic tags introduce meaning to the web page rather than just presentation. A semantic tag clearly describes its meaning to both the browser and the developer. Semantic tags have many advantages over non-semantic tags like semantic tags are of great help to screen readers, and they also help in code optimization.
Introduction to Semantic tags
HTML Semantic tags indicate what the content is rather than just how the browser displays them.
Semantic elements: A semantic element clearly describes its meaning to both the browser and the developer. E.g.:<header>, <footer>, and <form> - can tell the type of content by tag name.
Non-semantic elements: Unlike semantic elements, they don’t have any meaning. They don’t tell anything about the content they contain. They can be used with different attributes to mark up semantics common to a group. Following is the list of some non-semantic elements: div and span.
A Semantic tag clearly describes its meaning to both the browser and the developer. For example, a developer knows content inside <navbar> is of the navigation bar, and the browser knows how to display it.
Various HTML Semantic Tags are:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <section>
Why Use Semantic Tags
-
By using Semantic tags in our code, we can provide additional information about that document by defining the layout and sections of the webpage.
-
Semantic elements are of great help to people using screen readers. The additional information provided by semantic tags help screen readers understand the content better and help them to determine the different section within a page more efficiently.
-
HTML Semantic tags help the browser determine the purpose of the page and its content. Semantic tags also help in Search Engine Optimization as they help browsers interpret the content more easily by making content more adaptive.
-
Semantic tags help developers write consistent code. Without semantic tags, we will have to define ids and classes and use CSS to define the header, footer, and navigation sections.
Using CSS:
Using semantic tags:
Various types of Semantic tags are:
Article Tag
- The HTML <article> tag is used for independent, self-contained content, which means content inside the article tag is complete and independent from the rest of the article.
- The content inside this tag does not need context. It makes sense on its own, for example, a news flash or an advertisement.
- It can be used for forum posts, blog posts, news stories, etc.
- It should have a closing tag.
Syntax:
In this example, article tags enclose the h2 and p tags which means the content inside them is independent of the rest of the article.
Example
Output
Aside Tag
- We use the aside tag when we want to give some additional information or information indirectly related to the main content, like tips, notes, sources, etc.
- It should have a closing tag.
The Aside tag displays some content that is not directly related to the main content. For example, sidebars, pull-out boxes, etc.
Syntax:
Example
The Aside tag is used to give information that is not directly related to the main content or if we want it to keep separate from the main content. As we can see in this example, "Note" is kept inside the aside tag as it is additional information and maybe not be directly related to the main content.
Output:
Details Tag
- <details> tag is used to give additional information about the main content, which we can view or hide as we want.
- It should have a closing tag.
It creates a disclosure section and contains additional details that the user can open and view.
Syntax:
Example
In this example, the paragraph tag is enclosed inside the details tag. Therefore its content is not visible initially. The content inside the p tag will be displayed when we click on it.
Output
- When we click it
Figure and figcaption Tag
<figure>
- Figure tag is used to add images, diagrams, code, etc., in the article.
- Figure tag is independent of the main flow, i.e., even if it is removed, this will not affect the flow of the article.
- It should have a closing tag.
<figcaption>
- This tag is used to give a caption to an image.
- It is nested inside the <figure> tag. Only one <figcaption> should be used inside a figure tag because an image can have only one caption.
- It should have a closing tag.
Syntax:
Example
As shown in the example, the "HTML logo" is the figure caption of the added image.
Output
Header Tag
- <header> tag defines a header for the webpage which contains the website logo, website name, navigation bar, etc.
- It is generally at the start of the webpage.
- It must have a closing tag.
It creates a header section for the webpage.
Syntax:
Example
In this example, a header is defined with website name as "Scaler tips" and some info as "An educational website".
Output
Footer Tag
- <footer> tag defines a footer for the web page.
- It contains information like contact information, copyright information, author details, etc.
- It is generally at the bottom of a webpage.
- It must have a closing tag.
It creates a footer section for the webpage.
Syntax:
Example
In this example, a footer is created with details like the article's author and Email address.
Output
Main Tag
- <main> tag is used to write the main content of the article.
- Content inside the main tag should be directly related to the main topic or title of the article.
- It is written inside the body tag.
- It must have a closing tag.
Syntax:
Example
As the content of h1 and p are directly related to the main content of the article in the example above, therefore they are enclosed inside the main tag.
Output
Mark Tag
- This tag is a relatively new tag that was introduced in HTML5.
- It is used to highlight a word in a sentence. The Mark tag highlights the words by giving them a yellow background. It is supported by all major browsers.
- It must have a closing tag.
A Mark tag is used to highlight a word.
Syntax:
Here Scaler tips is highlighted with a yellow background using the <mark> tag.
Example
Output
Nav Tag
- <nav> tag is used to create a navigation bar of the webpage
- Different types of navigation links are provided inside the nav tag.
- Some of the navigation link examples are home, contacts, index, etc.
- It must have a closing tag.
Nav tag is used to provide a section for the navigation bar and links.
Syntax:
Example
Here, a simple navigation bar is created with links to HOME, CONTACTS, and INDEX pages of the website.
Output
Section Tag
- <section> tag is used to create different sections on the webpage.
- It must have a closing tag.
Syntax:
Example
In this example, the h2 and p tags are confined to a section using a section tag. It is used to indicate that content inside this section in this example is related to lorem ipsum text.
Output
Summary
- A Semantic element clearly describes its meaning to both the browser and the developer.
- By using Semantic tags in our code, we can add additional information about that document.
| Semantic tag | Use |
|---|---|
| <article> | The HTML <article> tag is used for independent self-contained content. |
| <aside> | Display some content aside from the content it is placed in |
| <details> | It creates a disclosure widget and contains additional details, that the user can open and view. |
| <figcaption> | This tag is used to give a caption to an image |
| <figure> | Figure tag is used to add images, diagrams, code, etc., in the article. |
| <mark> | It is used to highlight a word with a yellow background. |
| <footer> | It defines a footer for the web page |
| <header> | It defines a header for the webpage |
| <main> | It is used to write the main content of the article. |
| <nav> | This tag is used to create the navigation bar of the webpage. |
| <section> | This tag is used to create different sections on webpage |