HTML5 New Elements

---

---

Share with a Friend

---

Introduction

HTML5 introduced several new elements to enhance the structure and semantics of web pages. These elements make it easier to define the layout of a page and improve accessibility and search engine optimization (SEO). Here, we will cover the following:

1. Structural Elements:
• <article>
• <section>
• <nav>
• <header>
• <footer>
2. Complementary Elements:
• <aside>
• <main>
3. Media Elements:
• <figure>
• <figcaption>
4. Formatting and Interactive Elements:
• <mark>
• <progress>
• <meter>
• <output>

---

1. Structural Elements

<article>

The <article> element represents a self-contained piece of content, such as a blog post, news article, or forum post. It can be reused or syndicated independently.

Syntax:

<article>
    <h2>Breaking News</h2>
    <p>This is a news article about recent updates in technology.</p>
</article>

<section>

The <section> element defines a thematic grouping of content. It is commonly used for dividing a page into sections like chapters, tabs, or headers.

Syntax:

<section>
<h1>About Us</h1>
<p>We are an innovative e-learning platform providing top-notch courses.</p>
</section>

<nav>

The <nav> element is used for defining navigation links, such as menus, table of contents, or navigation bars.

Syntax:

<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="courses.html">Courses</a></li>
    </ul>
</nav>

<header>

The <header> element represents the introductory content of a page or section. It typically contains headings, logos, or navigational links.

Syntax:

<header>
    <h1>Welcome to Our Platform</h1>
    <p>Your journey to learning starts here!</p>
</header>

<footer>

The <footer> element represents the footer of a document or section. It usually contains copyright information, contact details, or links to related resources.

Syntax:

<footer>
    <p>© 2024 IT Developer. All rights reserved.</p>
</footer>

---

2. Complementary Elements

<aside>

The <aside> element represents content indirectly related to the main content. It is often used for sidebars, advertisements, or callout boxes.

Syntax:

<aside>
    <h2>Related Articles</h2>
    <ul>
        <li><a href="#">HTML Basics</a></li>
        <li><a href="#">CSS Styling Tips</a></li>
    </ul>
</aside>

<main>

The <main> element represents the central content of a web page. It excludes headers, footers, and sidebars, focusing solely on the primary content.

Syntax:

<main>
    <h1>Our Courses</h1>
    <p>Explore a wide range of programming and technology courses.</p>
</main>

---

3. Media Elements

<figure>

The <figure> element is used for encapsulating media content, such as images, videos, or diagrams. It is often paired with <figcaption> to provide a caption for the media.

Syntax:

<figure>
    <img src="image.jpg" alt="HTML Logo">
    <figcaption>An example of the HTML logo.</figcaption>
</figure>

<figcaption>

The <figcaption> element is used to provide a caption or description for the <figure> element.

Syntax:

<figure>
    <img src="course.jpg" alt="E-learning">
    <figcaption>Learn programming with us.</figcaption>
</figure>

---

4. Formatting and Interactive Elements

<mark>

The <mark> element highlights text for emphasis or importance, usually representing search terms or key points.

Syntax:

<p>Learn the basics of <mark>HTML5</mark> for modern web development.</p>

<progress>

The <progress> element represents the progress of a task. It is useful for displaying download progress, form completion, etc.

Syntax:

<label for="progress">Course Completion:</label>
<progress id="progress" value="50" max="100"></progress>

<meter>

The <meter> element represents a scalar value within a known range. It is often used for displaying performance scores, ratings, or usage levels.

Syntax:

<label for="rating">Course Rating:</label>
<meter id="rating" value="4.5" min="0" max="5">4.5 out of 5</meter>

<output>

The <output> element is used to display the result of a calculation or script.

Syntax:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0"> =
    <output name="result">0</output>
</form>

---

Summary

Element	Description
<article>	Defines self-contained content like blog posts or news articles.
<section>	Groups related content thematically.
<nav>	Represents navigation links or menus.
<header>	Denotes introductory content of a page or section.
<footer>	Represents footer content, often for copyright or links.
<aside>	Displays content related to the main content, such as sidebars.
<main>	Represents the primary content of the page.
<figure>	Encapsulates media content like images or diagrams.
<figcaption>	Provides a caption for the <figure> element.
<mark>	Highlights text for emphasis or search results.
<progress>	Displays progress of a task like loading or completing a course.
<meter>	Displays a measurement within a range, like ratings or scores.
<output>	Shows the result of a calculation or script.

HTML5's new elements improve both the semantic structure and the usability of web pages. Using these elements correctly will enhance the readability, maintainability, and accessibility of your web projects.

---