9 Most Important And Useful HTML5 Tags You Must Know

Pushpa Raj Dangi January 06, 2021


HTML5 is the latest version of the standard that defines HTML. Some of the new elements are discussed below.

<progress> 

<progress> tag is used to show a progress bar.

Example


<!DOCTYPE html>
<html>
<body>

<label for="file">Uploading:</label>
<progress id="file" value="50" max="100"> 50% </progress>

</body>
</html>


Result 








<details>

<details> tag used for additional information. The user has the option to view or hide this.

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Aside</title>
        <style>
            details {
                width: 20%;
            }

            summary,
            p {
                background: blueviolet;
                color: #fff;
                padding: 10px;
            }
        </style>
    </head>

    <body>
        <details>
            <summary>Wikipedia</summary>
            <p>Wikipedia is a multilingual open-collaborative
                online encyclopedia created and maintained by a community of
                volunteer editors using a wiki-based editing system.
                It is one of the 15 most popular websites as ranked by
                Alexa, as of August 2020.</p>
        </details>
    </body>

    </html>

Result

 

<header>

<header> tag specifies the webpage header. It also is used for objects inside the webpage. It is a block element.

Example


    <header>
        <h1>Post Title</h1>
        <p>Article by John.</p>
    </header>
    

<footer>

<footer> tag specifies the webpage footer. It also is used for objects inside the webpage. It is also block element.

Example


    <footer>
        <h5>© Copyright 2021 Company Name. All rights reserved.</h5>
        <p><a href="mailto:example@example.com">example@example.com</a></p>
    </footer>

<main>

<main> tag specifies the main content of the webpage.

Example


    <main>
        <h5>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</h5>
        <p>Accusantium error incidunt voluptatum quia cum perspiciatis ut voluptates consectetur minus adipisci.</p>
    </main>

<article>

<article> tag denotes independent content. It doesn't render any special in a browser. But it is used to style the block.

Example 


        <article>
            <h1>article title</h1>
            <p>writer name</p>
        </article>


<aside>

<aside> tag denotes content displayed in a sidebar of the webpage. It doesn't render any special in a browser. 

Example

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aside</title>
    <style>
        aside{
            display: inline-block;
            width: 20%;
            background: #ddd;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>This is title</h1>
    <aside>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus eius dolorem et optio, porro impedit culpa
        illo id nisi reprehenderit numquam ducimus voluptatem minima pariatur? Nobis aperiam provident deserunt eos!
    </aside>
</body>

</html>

Result


<section>

<section> tag specifies a particular section in the webpage.

Example

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aside</title>
    <style>

    </style>
</head>

<body>
    <section>
        <h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Placeat eum fugiat sapiente voluptatum molestias?
            Maxime possimus veritatis nesciunt sit? Deleniti
            labore perferendis maiores corporis error consequatur
            necessitatibus eius dolore distinctio.
        </p>
    </section>
    <section>
        <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            quam veniam in architecto voluptates quisquam laudantium!t
            veritatis
            sit.
    </section>
    <section>
        <h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit. </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.labori
            quaerat ut qui perferendis, quisquam eligendi
            tempore!</p>
    </section>
</body>

</html>

Result


<dialog>

<dialog> tag is used to create dialog box. The open attribute specifies that the dialog element is active and that the user can interact with it.

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Aside</title>
        <style>
            body{
                text-align: center;
            }
            dialog {
                width: 20%;
            }
        </style>
    </head>

    <body>

        <h5>Dialog box </h5>
        <dialog open>Wikipedia is a multilingual open-collaborative
            online encyclopedia created and maintained by a community of
            volunteer editors using a wiki-based editing system.
            It is one of the 15 most popular websites as ranked by
            Alexa, as of August 2020.</dialog>

    </body>

    </html>



Result 


Reactions

Post a Comment

0 Comments

If you have any question please ask?