HTML5 New Elements Overview

HTML5 New Elements

1. Article (<article>)

The <article> element represents a self-contained piece of content that could be distributed independently, such as a blog post or news article.

HTML Example:

<article>
    <h2>The Benefits of HTML5</h2>
    <p>HTML5 introduces new elements to enhance semantic structure and improve accessibility.</p>
</article>

2. Aside (<aside>)

The <aside> element represents content that is tangentially related to the content around it, often used for sidebars or pull quotes.

HTML Example:

<aside>
    <h3>Related Links</h3>
    <p>Check out these related articles for more information.</p>
</aside>

3. Details (<details>)

The <details> element represents a disclosure widget from which the user can obtain additional information or controls. It is often used with <summary>.

HTML Example:

<details>
    <summary>More Information</summary>
    <p>Here is some additional information that can be revealed or hidden.</p>
</details>

4. Figcaption (<figcaption>)

The <figcaption> element provides a caption or legend for a <figure> element.

HTML Example:

<figure>
    <img src="example.jpg" alt="Example Image">
    <figcaption>An example image with a caption.</figcaption>
</figure>

5. Figure (<figure>)

The <figure> element represents any content referenced from the main content, such as an image, video, or illustration.

HTML Example:

<figure>
    <img src="example.jpg" alt="Example Image">
    <figcaption>An example image.</figcaption>
</figure>

6. Footer (<footer>)

The <footer> element represents the footer for a section or the whole document. It often contains information about the author, copyright, or contact information.

HTML Example:

7. Header (<header>)

The <header> element represents introductory content or a navigational section. It is typically used at the top of a page or section.

HTML Example:

<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

8. Main (<main>)

The <main> element represents the dominant content of the <body> of the document. It excludes content that is repeated across pages like headers and footers.

HTML Example:

<main>
    <article>
        <h2>Main Content</h2>
        <p>This is the main content of the page.</p>
    </article>
</main>

9. Mark (<mark>)

The <mark> element represents text that has been highlighted or marked for reference or notation purposes.

HTML Example:

<p>This is a <mark>highlighted</mark> text.</p>

10. Progress (<progress>)

The <progress> element represents the progress of a task. It is used to show the completion status of a task or process.

HTML Example:

<progress value="70" max="100">70% Complete</progress>

11. Section (<section>)

The <section> element represents a generic section of a document, which can be used to group content thematically.

HTML Example:

<section>
    <h2>About Us</h2>
    <p>Information about the company.</p>
</section>

12. Summary (<summary>)

The <summary> element provides a summary or heading for a <details> element, which can be used to show or hide additional information.

HTML Example:

<details>
    <summary>Details</summary>
    <p>Additional details go here.</p>
</details>

13. Time (<time>)

The <time> element represents a specific period in time, such as a date or time.

HTML Example:

<time datetime="2024-09-04">September 4, 2024</time>

14. Video (<video>)

The <video> element represents a video file, with options for controls, source files, and more.

HTML Example:

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
Previous Next
Modern Footer