The semantic elements in HTML 5 are used to make an easy understanding of code. The meaning behind a word or a phrase is thus defined by the semantics. In simpler words, a Semantic element is an element with a meaning that is simple and clear for both the browser and the developer.
Importance of the semantic elements:
The accessibility of a website advances with the use of the semantic elements in HTML. It thus contributes to creating a better website structure.
Semantic Elements in HTML5:
| Semantic Tag | Uses |
| <article> | Used to specify an article. |
| <aside> | Used to specify content aside from the page content. |
| <details> | Used to specify the additional details that can be visible or hidden from the user. |
| <figcaption> | Used to specify a caption for a <figure> element. |
| <figure> | Used to define self-contained content, like a diagram, photo, code listing, etc. |
| <footer> | Used to specify a footer for a document or a section. |
| <header> | Used to define a header for a document or a section. |
| <main> | Used to define the main content of a document. |
| <mark> | Used to specify the marked or highlighted text. |
| <nav> | Used to specify the navigation links. |
| <section> | Used to specify a section in a document. |
| <summary> | Used to specify a visible heading for a <details> element. |
| <time> | Used to specify a date/time value. |
Popular Semantic Elements of HTML5:
Below we have described some important semantic elements in HTML5.
HTML5 <article> Element:
The HTML <article> element is used to specify an independent self-contained article like a big story and huge article in a document, page, application, or site and is thus used for use on Forum posts, Blog posts, News stories, and comments.
Example:
<!DOCTYPE html> <html> <body> <article style="background-color:crimson; color: white; text-align: center; width: 50%; border: 5px solid yellow; padding:20px"> <p>HELLO WORLD!! Today is a great day. Why not learn something new with us? Let us start with HTML.</p> </article> </body> </html>
Explanation:
In the above example, we defined an independent self-contained article.
HTML5 <aside> Element:
To display the information about the main content aside from the other contents on a web page, the HTML <aside> tag was introduced in HTML5.
Example:
<!DOCTYPE html> <html> <body> <p>HELLO WORLD!! Today is a great day. Why not learn something new with us? Let us start with HTML.</p> <aside> <h4>HTML</h4> <p>HTML stands for Hypertext Markup Language.</p> </aside> </body> </html>
Explanation:
In the above example, we used the HTML <aside> tag to display information about the main content.
HTML5 <section> Element:
To specify different chapters, headers, footers, or other sections in a document (on a web page), the HTML <section> tag is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
section{
border:5px solid yellow;
padding:10px;
margin:20px;
}
</style>
</head>
<body>
<section>
<h1>Inspirational Quote By Winston Churchill:</h1>
<p>The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.</p>
</section>
<section>
<h1>Inspirational Quote By Steve Jobs:</h1>
<p>If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.</p>
</section>
</body>
</html>
Explanation:
In the above example, we have used the HTML <section> tag to specify the different sections of an HTML document and to apply CSS properties to the different sections of an HTML document.
Nesting <article> tag in <section> tag or Vice Versa:
The <section> element can be used within an <article> element in HTML 5. It is also true for the vice versa. Multiple <section> elements can also be used within a <section> element, and similarly, multiple <article> elements can be used within an <article> element in HTML 5.
HTML5 <nav> Element:
To specify a section to contain navigation links, the HTML <nav> tag is used.
Example:
<!DOCTYPE html> <html> <body> <p> Example: </p> <nav> <a href="/a">A_List</a> | <a href="/b">B_List</a> | <a href="/c">C_List</a> | <a href="/d">D_List</a> </nav> </body> </html>
Explanation:
In the above example, we have used the HTML <nav> tag to add a major block of navigation links.
HTML5 <header> Element:
To act as a container of introductory content or navigation links, the HTML <header> tag is used.
Example:
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>Motivational Quote:</h1>
<h3>By: Winston Churchill</h3>
</header>
<p>The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.</p>
</article>
<article>
<header>
<h1>Motivational Quote:</h1>
<h3>By: Steve Jobs</h3>
</header>
<p>If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.</p>
</article>
</body>
</html>
Explanation:
In the above example, we have used the HTML <header> tag as a container of the introductory content.
HTML5 <footer> Element:
To specify a footer for a document or a section on a web page the HTML <footer> tag is used.
Example:
<!DOCTYPE html> <html> <body> <footer> <h3>Author:</h3> <p>XYZ Example</p> <h3>Contact information:</h3> <p>Mail Address: <a href="mailto:[email protected]">[email protected]</a></p> <p>Postal Address: <i>123, Street 1, Colony 2, City, State, Country, 123123</i></p> <p>Tel. No. <i>123456</i></p> </footer> </body> </html>
Explanation:
In the above example, we are using the <footer> tag to specify the footer for an HTML document.