HTML - New semantic elements: main, figure, figcaption, mark, time

New Semantic Elements in HTML

1. The <main> Element

The <main> element is used to encapsulate the main content of a webpage. It represents the central content that is directly related to the document or the primary functionality of the page.

The <main>  element should contain unique content that is not repeated across pages (e.g., navigation or headers). It helps screen readers and search engines identify the main content, improving accessibility and SEO.

Example:

    <main>
        <h1>Welcome to My Website</h1>
        <p>This is the main content of the webpage.</p>
    </main>
    

2. The <figure> Element

The <figure> element is used to represent content that is referenced from the main content, such as images, illustrations, diagrams, or code examples. It is used to wrap media content along with a <figcaption> element (optional) to describe the content.

The <figure> element helps provide a clear association between the media and its description.

Example:

    <figure>
        <img src="cat.jpg" alt="A playful cat">
        <figcaption>A playful cat jumping in the garden.</figcaption>
    </figure>
    

3. The <figcaption> Element

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

It is optional but recommended for accessibility and enhancing the context of the media.

Example:

    <figure>
        <img src="city.jpg" alt="A beautiful city skyline">
        <figcaption>A view of the city skyline during sunset.</figcaption>
    </figure>
    

4. The <mark> Element

The <mark> element is used to highlight or emphasize a portion of text. It typically marks text that is of special interest or relevance to the user, such as search results or highlighted keywords.

The content within <mark> is typically styled with a yellow background by default, but this can be customized with CSS.

Example:

    <p>The <mark>cat</mark> jumped over the fence.</p>
    

5. The <time> Element

The <time> element represents a specific period in time, such as a date, time, or a range of dates. It is used to encode time-related information in a machine-readable format, which can be beneficial for search engines and accessibility tools.

The <time> element can include attributes like datetime to specify a machine-readable date/time value.

Example:

    <time datetime="2025-02-25">February 25, 2025</time>
    

6. Benefits of New Semantic Elements

Using these new semantic elements provides various benefits:

• Improved Accessibility: These elements help screen readers and assistive technologies navigate the content more efficiently.
• SEO Improvement: Search engines understand the content better, which improves indexing and search ranking.
• Better Structure and Readability: These elements create a more organized and structured document, making it easier to read and maintain.
• Clearer Document Structure: Each semantic element has a specific purpose, improving the overall organization of the HTML code.

Summary:

1. <main>: Encapsulates the main content of a webpage.

2. <figure>: Groups media content and its optional caption <figcaption>.

3. <figcaption>: Provides a caption for media elements within <figure>.

4. <mark>: Highlights important text, often for emphasis or search results.

5. <time>: Represents specific time-related content, such as dates and times.

These new semantic elements help improve both accessibility and SEO, creating more structured, meaningful, and understandable content.