HTML5 Semantics

HTML5 Semantics

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 more simple words, a Semantic element is an element with a meaning which 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 a 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 a 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 a site and is thus used for used on Forum post, Blog post, News story 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>

Output:

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>

Output:

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>

Output:

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>

Output:

Explanation:

In the above example, we have used the HTML <nav> tag to add 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>

Output:

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:xyz@example.com">xyz@example.com</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>

Output:

Explanation:

In the above example, we are using the <footer> tag to specify the footer for an HTML document.

Please Share