Open In App

Explain semantic elements in HTML5

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we are going to learn about the semantic elements in HTML5. Semantic elements are the elements that describe their meaning to both the developer as well as to the browser. HTML5 provides us with many semantic elements as listed below:

  • <article> tag: A article tag is used to specify a particular block or space on the web page that is independent and has self-contained content. We can use <article> for the blog posts, the articles from newspapers, and more such entities.
  • <header> tag: The header is the semantic tag that specifies the header or title of the page that will be shown at the top of the page.
  • <nav> tag: Nav is the element or tag that is used to build the navbar of the page. It is the element inside which we define the nav links that perform some actions on click to them.
  • <section> tag: section element is used to define the midsection part of the page, which can contain the information about the upcoming events, text content, or whatever a developer wants it to display.
  • <main> tag: The main element is also used to define the middle content on the web page. It can contain text or other elements to show the content on the web page.
  • <aside> tag: The aside element defines the content on the side of the web page.
  • <footer> tag: Footer is the element mainly used to provide the copyrights or some extra links that are available on the web page.
  • <table> tag: The table tag is one of the most important elements available in HTML. It allows us to create a table with rows, columns, and the data inside them, as shown below example.
  • <form> tag: The form tag is also a very useful and important tag. It is used to build a web page form that can be a login or a submission form. It uses input tags inside it which are used to get inputs from the user.
  • <figure> and <figcaption> tag: The figure tag contains the self-contained content such that images, graphs, code content, etc. while the figcaption tag specifies the caption or the description of the content contained by the figure tag. we can place the caption above or below the figure content by using figcaption tag to the corresponding position.
  • <details> and <summary> tag: The details tag contains the information that will be visible on the page when the user demands it to display. By default, the text is not visible on the page. while the summary tag is used to show the main heading of the details tag and the text that is contained inside details other than summary text will be visible when the user clicks on the content of the summary tag.
  • <time> tag: Time tag the time or the datetime. We use an attribute named datetime inside it that translates the time into a machine-readable language that results in a smarter search response from search engines.
  • <mark> tag: The mark tag contains the content that is marked or highlighted to show the importance of the text.

Let's see the use of the above elements through some examples.

Example 1: In this example, we will use HTML5 semantic elements.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>HTML5 semantic elements</title>
    <style>
        body {
            background-color: black;
        }
        .center {
            display: flex;
            color: white;
            align-items: center;
            justify-content: center;
        }
        nav {
            display: flex;
            align-items: center;
            background-color: rgb(41, 40, 40);
            height: 8vh;
        }
        ol {
            display: flex;
        }
        ol li {
            list-style: none;
            padding: 15px;
        }
        ol li a {
            text-decoration: none;
            color: white;
        }
        .container {
            width: 65vw;
            height: 65vh;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            border-bottom: 1px solid grey;
        }
        section img {
            position: absolute;
            left: 3vw;
            top: 8vh;
            height: 40vh;
            width: 60vw;
            border-radius: 15px;
        }
        main {
            position: absolute;
            top: 50vh;
            left: 3vw;
            right: 7vw;
        }
        .mid {
            display: flex;
            flex-direction: row;

        }
        aside img {
            height: 65vh;
            width: 30vw;
            margin-left: 2vw;
        }
        footer {
            margin-top: 6vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
    </style>
</head>
<body>
    <header class="center">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220510093811/GFGLogo2.png" 
            alt="GFG logo" 
             height="50px" 
             width="50px">
        <h2>GeeksforGeek</h2>
    </header>
    <nav>
        <ol>
            <li><a href="#">Contribute</a></li>
            <li><a href="#">Tutorials</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Events</a></li>
        </ol>
    </nav>
    <div class="mid">
        <div class="container">
            <section>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220509230929/article-300x106.png"
                     alt="section image">
            </section>
            <main>
                <h2>12 pip Commands For Python Developers</h2>
                
                <p>
                    Python has been preferred over all 
                    programming languages for technological 
                    advancement. It is one of the most 
                    lucrative programming languages that 
                    is used as the… Read More
                </p>

            </main>
        </div>
        <aside>
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220509230937/whatnew-300x258.png"
                 alt="aside image">
        </aside>
    </div>
    <footer>
        All copyrights reserved
    </footer>
</body>
</html>

Output:

footer

Example 2: In this example, we will use HTML5 semantic elements.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>HTML 5 semantic elements</title>
    <style>
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        table,
        th,
        td {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <table width="50%">
            <tr>
                <th>Name</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>
                    GeeksforGeeks
                </td>
                <td>
                    A computer science portal for all geeks.
                </td>
            </tr>
            <tr>
                <td>
                    Apple
                </td>
                <td>
                    Manufacture smartphones with their own 
                    processor and other properties.
                </td>
            </tr>
            <tr>
                <td>
                    Toyota
                </td>
                <td>
                    A car manufacturing company with a lot of 
                    customers around the globe.
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Output:

Example 3: In this example, we will use HTML5 semantic elements.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>HTML 5 semantic elements</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        form {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 30vw;
            height: 30vh;
        }
        form input {
            margin: 10px 0;
            border: none;
            border-bottom: 2px solid grey;
            background-color: transparent;
            width: 20vw;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>It is the form tag</h2>
        <form>
            <input type="text" placeholder="Enter Username">
            <input type="email" placeholder="Enter your email">
            <input type="password" placeholder="Enter password">
            <button>Submit</button>
        </form>
    </div>
</body>
</html>

Output:

Example 4: In this example, we will use HTML5 semantic elements.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>HTML semantic elements</title>
    <style>
        .container {
            display: flex;
            /* flex-direction: row; */
            align-items: center;
            justify-content: center;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Hey Geek, Welcome to GFG!</h1>
    </div>
    <div class="container">
        <figure>
            <figcaption>
                caption: GeeksforGeeks is a computer 
                science portal for geeks.
            </figcaption>
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220428080551/gfglogo.png" 
                 alt="">
        </figure>
        <figure>
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220428080551/gfglogo.png" 
                 alt="">
            <figcaption>
                caption: This is the logo of GFG.
            </figcaption>
        </figure>
    </div>
</body>
</html>

Output:

Example 5: In this example, we will use HTML5 semantic elements.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>HTML semantic elements</title>
    <style>
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <details>
            <summary>Hey Geek, Welcome to GFG!</summary>
            <p>
                A computer science portal and online
                learning platform all for geeks.
            </p>
        </details>
    </div>
</body>

</html>

Output:

details

Example 6: In this example, we will use HTML5 semantic elements.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>HTML semantic elements</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>Hey Geek, Welcome to GFG!</h2>
    </div>
    <div class="container">
        <h3>
            <mark>GeeksforGeeks</mark> is a
            <mark>computer science portal</mark> as well
            as the <mark>online learning platform</mark>
            for all geeks.
        </h3>
        <p>
            Enroll yourself on 15 May, 2022 for the
            50% discount on GFG courses between
            <time datetime="2022-05-15">10:00</time> AM to
            <time datetime="2022-05-15">12:00</time> PM
        </p>
    </div>
</body>

</html>

Output:


Next Article
HTML Introduction

A
abhisheksainiaggarwal
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox