HTML Semantics - Fullstackadda

A semantic element clearly describes its meaning to both the browser and the User.

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form> , <table> , <aside> and <article> – Clearly defines its content.

In HTML4 we have seen <div>, <span> etc. are which are non-semantic elements. They don’t tell anything about its content.

On the other hand, in HTML5 <form>, <table>, and <article> etc. are semantic elements because they clearly define their content.

Use of semantic elements?

In HTML4 version, to style any HTML elements developers have to use their own id/class names, like header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.

This is so difficult for search engines to identify the correct web page content. Now in HTML5 elements (<header> <footer> <nav> <section> <article>), this will become easier.

Semantic elements can increase the accessibility of your website, and also helps to create a better website structure.

List of some semantic elements

The semantic elements added in HTML5 are:

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

Some semantic elements in HTML5

1.<article> Element

The HTML <article> tag is an HTML5 element that defines a self-contained composition in the HTML document. This tag is also commonly referred to as the <article> element.It is mostly used to represent a magazine, a newspaper articles.

EXAMPLE

<body>

    <h1>Example about article element</h1>

    <article>
        <h2>Ratan Tata</h2>
        <p>Ratan Naval Tata is an Indian industrialist and former chairman of Tata Sons. He was also the chairman of the Tata Group from 1990 to 2012, serving also as interim chairman from October 2016 through February 2017. He continues to head its charitable trusts.</p>
    </article>

    <article>
        <h2>Sundar Pichai</h2>
        <p>Pichai Sundararajan, better known as Sundar Pichai, is an Indian-American business executive. He is the chief executive officer of Alphabet Inc. and its subsidiary Google. Born in Madurai, India, Pichai earned his degree from IIT Kharagpur in metallurgical engineering.</p>
    </article>

    <article>
        <h2>Narendra Modi</h2>
        <p>Narendra Damodardas Modi is an Indian politician serving as the 14th and current prime minister of India since 2014. Modi was the chief minister of Gujarat from 2001 to 2014 and is the Member of Parliament from Varanasi.</p>
    </article>

</body>

</html>

OUTPUT

2.<aside> Element

The HTML <aside> tag is an HTML5 element that defines a section that is related to the main content around it in the HTML document.

<!DOCTYPE html>
<html>

<body>

    <h1>Example of aside element</h1>

    <p>How Google search engine works</p>

    <aside>
        <h3>Google</h3>
        <p> Google analyzes the text, images, and video files on the page, and                 stores the information in the Google index, which is alarge database. 
        Serving search results: When a user searches on Google, Google returns information that's relevant to the user's query..</p>
    </aside>

</body>

</html>

OUTPUT

3.<footer> Element

The <footer> tag in HTML is used to specify the footer of HTML document. It contains the footer information like author information, copyright information, etc. The footer tag is used within the body tag. footer tag is generally used in the bottom of the page.

EXAMPLE

 <html>

 <head>
     <title>Title of the document</title>
     <style>
         .header {
             height: 40px;
             padding: 20px 20px 0;
             background: blue;
         }

         .main-content {
             height: 60vh;
             padding: 20px;
         }

         footer {
             padding: 10px 20px;
             background: #666;
             color: white;
         }

         a {
             color: #00aaff;
         }
     </style>
 </head>

 <body>
     <div class="header">Tutorials/ Menu/Jobs</div>
     <div class="main-content">
         <h1> Welcome to fullstackadda.com</h1>
         <p>A blog that decided to help the people who want to learn technologies. </p>
     </div>
     <footer>
         <p>Company ©2022 fullstackadda. All rights reserved.</p>
     </footer>
 </body>

 </html>

OUTPUT

A semantic element clearly describes its meaning to both the browser and the User.
Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.
Examples of semantic elements: <form> , <table> , <aside> and <article> – Clearly defines its content.