HTML5 | Semantics

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

summary

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

footer tag

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

section tag

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

nav tag

Mark: It is used to highlight the text.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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/.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.