HTML Semantic Elements | HTML5 Semantic Tags & Why Do You Need To Use It?
In any vocabulary, it is important to understand the meaning of words during communication. And if this is computer communication, then it becomes more critical.
So HTML5 delivers more semantic elements, which makes easy understanding of the code.
Hence Semantics describes the meaning of words and phrases, i.e.
Semantic elements= elements with a meaning. Semantic elements have a simple and clear meaning for both the browser and the developer.
For example:
In HTML4, we have witnessed <div>, <span> etc., which are non-semantic elements. They don't say anything about its content.
On the other side, <form>, <table>, and <article> etc., are semantic elements because they clearly describe their content.
All essential browsers support HTML5 semantic elements.
{tocify} $title={Table of Contents}
Why to use semantic elements?
In HTML4, developers have to make and utilize their own id/class names to style elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, top nav, etc.
This is so challenging for search engines to specify the right web page content.
Now in HTML5 elements (<header> <footer> <nav> <section> <article>), are become easier to understand what the content is.
Semantic elements can improve the accessibility of your website, and also helps to make a better website structure.
Semantic Elements in HTML5
Many websites include HTML code like:
<div id="nav"> <div class="header"> <div id="footer"> to display navigation, header, and footer.
In HTML, some semantic elements can be used to define different parts of a web page:
| Semantic Tag | Description |
|---|---|
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Some Important Semantic Elements in HTML5
<section> tag
To keep related content in different groups, we divide a webpage into several parts and keep the same content in each part. The <section> tag is used to keep such related content together.
For example, on a news website, one part contains today's latest news, and the other part contains other news.
Similarly, the <section> tag is used to keep different types of news so that it can be known which section is for which news.
<header> tag
The <header> element represents the document's header, which can contain introductory content or navigation links.
Example:
<header><h1>Welcome to Web123.com</h1><nav><ul><li>Home |</li><li>About us |</li><li>Contact us</li></ul></nav></header>{codeBox}
<nav> tag
<nav> tag is used to provide navigation. Many links on the webpage help the user move to another webpage; those links are written inside the <nav> tag.
<main> tag
The <main> tag defines the main content of a document.
The content inside the <main> element should be unique to the document.
It should not include any content that is repeated across documents, such as sidebars, navigation links, copyright information, site logos, and search forms.
Note: You should not use more than one <main> element in a document. The <main> element must not be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.{alertSuccess}
<article> tag
HTML <article> element represents article content within a document, page, application, or website. It can be used to represent a forum post, a magazine, a newspaper article, or a big story.
Example:
<article><h2>Today's highlights</h2><p>First story</p><p>Second story</p><p>Third story</p></article>{codeBox}
<aside> tag
The <aside> element represents the content indirectly, giving information about the page's main content.
It is often represented as a sidebar.
Example:
<body><h2>My last year memories</h2><p>I visited Paris with my buddies last month. This was a remarkable journey, and I hope to go there again.</p><aside><h4>Paris</h4><p>Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy, and culture</p></aside></body>{codeBox}
<footer> tag
The <footer> element represents a footer for a document or section.
An <footer> element typically contains:
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
You can include several <footer> elements in one document.
<figure> and <figcaption> Elements
Things like photos and diagrams are kept inside the <figure> tag so that it is known that it is associated with an element, images.
<figcaption> tag is used to give caption to <figure> tag.
Example:
<!DOCTYPE html><html><body><figure><img src="pic_trulli.jpg" alt="Trulli" style="width:100%"><figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption></figure></body></html>{codeBox}
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “Semantic Elements.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
