Skip to content
Related Articles

Related Articles

Improve Article

HTML5 | Semantics

  • Difficulty Level : Easy
  • Last Updated : 13 Aug, 2021

HTML tags are classified in two types. 
 

  • Semantic
  • Non-Semantic

Semantic Elements: Semantic elements have meaningful names which tells about type of content. For example header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below which make the code easier to write and understand for the developer as well as instructs the browser on how to treat them. 
 

  • article
  • aside
  • details
  • figcaption
  • figure
  • footer
  • header
  • main
  • mark
  • nav
  • section

Article: It contains independent content which doesnt require any other context. 
Example: Blog Post, Newspaper Article etc.
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>Article Tag</title>
      <style>
         h1 {
         Color:#006400;
         font-size:50px;
         Text-align:left;
         }
         p {
         font-size:25px;
         text-align:left;
         margin-top:-40px;
         }
      </style>
   </head>
   <body>
      <article>
         <h1>GeeksforGeeks</h1>
          
<p>A Computer Science Portal for Geeks</p>
 
      </article>
   </body>
</html>

Output: 
 

Article tag



Aside: It is used to place content in a sidebar i.e. aside the existing content. It is related to surrounding content.
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>Aside Tag</title>
      <style>
         h4 {
         Color:#006400;
         font-size:50px;
         Text-align:none;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
       
<p>GeeksforGeeks is a Computer Science Portal</p>
 
      <aside>
         <h4>GeeksForGeeks</h4>
          
<p>GeeksforGeeks is a computer Science platform
            where you can learn good programming.
         </p>
 
      </aside>
   </body>
</html>

Output:
 

aside tag

Details and Summary: “details” defines additional details that the user can hide or view. “summary” defines a visible heading for a “details” element.
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>Detail and summary Tag</title>
      <style>
         .GFG {
         Color:#006400;
         font-size:50px;
         Text-align:none;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <details>
         <summary class="GFG">GeeksforGeeks</summary>
          
<p>GeeksforGeeks is a Computer Science portal
            where you can learn good programming.
         </p>
 
      </details>
   </body>
</html>

Output:
 

summary

Figure and Figcaption: These are used to add an image in a web page with small description.
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>Figcaption Tag</title>
      <style>
         h2 {
         Color:#006400;
         font-size:50px;
         Text-align:none;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <h2>GeeksforGeeks</h2>
      <figure>
         <img src="4.jpg" alt="gfg" style="width:20%">
         <figcaption>GeeksforGeeks Logo</figcaption>
      </figure>
   </body>
</html>

Output:
 



figcaption

Header: As the name suggests, it is for the header of a section introductory of a page. There can be multiple headers on a page. 
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>Header Tag</title>
      <style>
         h1, h3 {
         Color:#006400;
         Text-align:left;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:left;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <article>
         <header>
            <h1>GeeksforGeeks</h1>
            <h3>GeeksforGeeks</h3>
             
<p>A computer Science portal</p>
 
         </header>
      </article>
   </body>
</html>

Output:
 

header tag

Footer: Footer located at the bottom of any article or document, they can contain contact details, copyright information etc. There can be multiple footers on a page.
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>footer Tag</title>
      <style>
         p {
         font-size:25px;
         text-align:left;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <footer>
          
<p>Posted by: GeeksforGeeks</p>
 
          
<p>Contact: <a href="http://www.geeksforgeeks.org">
            geeksforgeeks.org</a>.
         </p>
 
      </footer>
   </body>
</html>

Output:
 

footer tag

Main: It defines the main content of the document. The content inside main tag should be unique.
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>main Tag</title>
      <style>
         h1 {
         color:#006400;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <main>
         <h1>Important Residences</h1>
          
<p>A few of them are Rashtrapati Bhavan, White House etc</p>
 
         <article>
            <h1>Rashtrapati Bhavan</h1>
             
<p>It is the home of the President of India.</p>
 
         </article>
         <article>
            <h1>The White House</h1>
             
<p>It is the home of the President of United
               States of America.
            </p>
 
         </article>
      </main>
   </body>
</html>

Output:
 

main tag



Section: A page can be split into sections like Introduction, Contact Information, Details etc and each of these sections can be in a different section tag.
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>section Tag</title>
      <style>
         h1 {
         color:#006400;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <section>
         <h1>Data Structure</h1>
          
<p>Data Structure is a data organization and
            storage format that enables efficient access
            and modification.
         </p>
 
      </section>
      <section>
         <h1>Algorithm</h1>
          
<p>A process or set of rules to be followed
            in calculations or other problem-solving
            operations, especially by a computer.
         </p>
 
      </section>
   </body>
</html>

Output:
 

section tag

nav: It is used to define a set of navigation links in the form of navigation bar or nav menu.
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>nav Tag</title>
      <style>
         h1 {
         color:#006400;
         }
      </style>
   </head>
   <body>
      <h1>Navigation Bar</h1>
      <nav>
         <a href="/home/">Home</a> |
         <a href="/about-us/">About Us</a> |
         <a href="/data-structure/">Data Structure</a> |
         <a href="/operating-system/">Operating System</a>
      </nav>
   </body>
</html>

Output:
 

nav tag

Mark: It is used to highlight the text.
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>mark Tag</title>
      <style>
         h1 {
         color:#006400;
         }
      </style>
   </head>
   <body>
      <h1>mark tag</h1>
       
<p>GeeksforGeeks is a <mark>Computer Science</mark> portal</p>
 
   </body>
</html>

Output:
 

mark tag

Non-Semantic Elements: Tags like div, span fall under the Non- Semantic categories as their names don’t tell anything about what kind of content is present inside them.
div It is a block level element or division of a section. It is used as a container.
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>div Tag</title>
      <style>
         .GFG {
         color:#006400;
         }
      </style>
   </head>
   <body>
      <h1>div Tag</h1>
      <div class="GFG">
         <h1>GeeksforGeeks</h1>
          
<p>GeeksforGeeks is a Computer Science portal</p>
 
      </div>
   </body>
</html>

Output:
 

div tag

span: It is an inline element which doesn’t start on a new line and takes up only the necessary width. For more details use https://www.geeksforgeeks.org/span-tag-html/.
 

Supported Browsers:  

  • Google Chrome 6.0 and above
  • Internet Explorer 9.0 and above
  • Mozilla 4.0 and above
  • Opera 11.1 and above
  • Safari 5.0 and above

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :