Semantics in HTML

Semantic Elements in HTML are the element that describes their meaning and role in readable text for both user and machine. Let us understand HTML Semantics in detail.

What are the Semantic Elements?

HTML semantic Elements are the meaningful name that explains the purpose oF element and type of content used inside them. HTML defines the tag in two types

        1. Semantic.   2. Non – Sementic.

  • HTML4  used non – semantic elements like <div>, <span> , etc which do not tell anything about the content of the element.
  • HTML5 being the latest version supports many semantic elements which make the HTML text easier to write and understand for the developer rather than searching through endless div’s with or without semantic or namespaced classes and id.  for eg: instead of   <nav > this was often written as <div class =” nav”>.
  • HTML5 semantic elements are accepted in most of the web browsers and increase the accessibility to the webpage and make the code better structured.

Why Using HTML Semantics?

  • It enhances the HTML content search engine optimization (SEO) by increasing the semantic keywords on the webpage.
  • The semantic element gives greater accessibility to visually impaired users while using technology like screen readers to understand the context of the content better.
  • Semantic elements reuse and share the information across the websites and in other web forums.

 List of Some HTML Semantic Tags

Examples of HTML Semantic Elements

1 .<article> tag is defined for independent and self – contained content and it used to represent blog posts, magazines, and news articles, etc.

2. <section> tag is defined to represent a section within the HTML document and it is used for grouping certain HTML content together.
both sections and articles are similar interchangeable elements let us see how to use them.
Example: 

<section>
  <p>Harry Potter series</p>
  <section>
    <p>parts</p>
    <article>Harry Potter and the Philosopher's Stone </article>
    <article>Harry Potter and the Chamber of Secrets </article>
    <article>Harry Potter and the Prisoner of Azkaban </article>
    <article>Harry Potter and the goblet of fire </article>
    <article>Harry Potter and the order of phoenix </article>
    <article>Harry Potter and the half blood prince </article>
      <article>Harry Potter and the deathly hallows part -1 </article>
    <article>Harry Potter and the deathly hallows part -2 </article>
  </section>
  <section>
    <p>Frontend devlopment</p>
    <article>HTML</article>
    <article>CSS</article>
    <article>Javascript</article>
  </section>
</section>

OUTPUT

3. <figure> tag is used to define the self-contained content which represents images, code listings, and flowcharts and diagrams, etc.

4.<figcaption> tag is used to define  small descriptions for the <figure> element content . for example caption for a diagram.
Let us see how to use both figure and figcaption HTML tags.
Example:

<!DOCTYPE html>
<html>
<body>

<h2>Website</h2>

<p>Codebun provides free and easy education to every student who wants to learn. Main focus to provide easy and valuable content for Computer Science student.</p>

<figure>
  <img src="/home/aman/Desktop/frames/codebunlogo.png" alt="LOGO" style="width:70%">
  <figcaption>follow us on facebook</figcaption>
</figure>

</body>
</html>

OUTPUT:

5. <mark> tag is used to highlight the HTML text on the webpage.
Example:

<!DOCTYPE html> 
<html> 
<head> 
  <title>Example of HTML Semantics</title> 
  <style> 
    h1 { 
    color:#00BFFF; 
    } 
  </style> 
</head> 
<body> 
  <h1> Semantic mark tag</h1> 
  <p>Codedec is a <mark>programming learning</mark> website.</p> 
</body> 
</html>

OUTPUT:

6. <nav> tag is used to define the set of navigation links on the webpage.
Example:

<!DOCTYPE html>
<html>
<body>

<h1>The HTML Semantic element</h1>

<p>The nav Tag:</p>

<nav>
<a href="https://codedec.com/course/step-by-step-html-tutorial/">HTML</a> |
<a href="https://codedec.com/course/c-programming-tutorial/">CSS</a> |
<a href="https://codedec.com/course/java-script-full-stack-tutorial/">JavaScript</a> 
</nav>

</body>
</html>

OUTPUT:

7. <aside> tag is used to define the content which is indirectly related to the surrounding content, it is also known as a sidebar.
Example:

<!DOCTYPE html>
<html>
    <body>  
    <h2>My trip to Uttrakhand</h2>  
    <p>I have visited uttrakhand with my friends in january. It was most memorable and fun moment of my life.</p>  
      <aside>  
        <h4>Mussoorie</h4>  
        <p>Mussoorie, in dehradun district of the indian state of uttrakhand is a hill station known as queen of hills famous for its scenic surroundings ,foothills of the himalays .</p>  
      </aside>  
    </body>  
    </html>

OUTPUT:

8. <header> tag is used to define the section or article of the main heading of the introductory document, there can be more than one header in the HTML document but it can not be used within other <header> tag.
Example:

<!DOCTYPE html>
<html>
<body>

<article>
  <header>
    <h1>Example of heading element</h1>
    <p>Posted by Aman kumar</p>
    <p>Article on HTML semantic elements.</p>
  </header>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae neque libero. Pellentesque ac leo nec neque porttitor bibendum eu in tortor. Aenean augue dui, tincidunt sed tortor in, hendrerit elementum quam. Cras id elit ut magna dignissim tempus in non diam. Suspendisse laoreet convallis nisi. </p>
</article>

</body>
</html>

OUTPUT:

9. <footer> tag is used to define the footer of the HTML document that is the bottom part of any article and it represents mainly author detail, contact information, navigation-related and copyright information, etc.
Example:

<!DOCTYPE html> 
<html> 
<head> 
  <title> Example of HTML semantics</title> 
  <style> 
    p { 
    font-size:40px; 
    text-align:center; 
    margin-top:0px; 
    } 
  </style> 
</head> 
<body> 
  <footer> 
    <p>CODEDEC</p> 
    <p>WEBSITE: <a href="https://codedec.com/"> 
      CODEDEC.COM</a>. 
    </p> 
  </footer> 
        <footer>  
        <p> © Copyright 2020. All Rights Reserved. </p>  
     </footer>  
</body> 
</html>

OUTPUT: