HTML Semantics

The aside element represents content that is indirectly related to the surrounding content or that forms a complementary part of the page.

Common examples include related articles, a sidebar with useful links, a glossary or supplementary information.

Example: Related Articles

<main>
    <article>
        <h1>Understanding HTML</h1>
        <p>HTML provides structure for web content.</p>
    </article>

    <aside aria-labelledby="related-heading">
        <h2 id="related-heading">Related Articles</h2>
        <ul>
            <li><a href="/css">Introduction to CSS</a></li>
            <li><a href="/javascript">Introduction to JavaScript</a></li>
        </ul>
    </aside>
</main>

The aside contains supplementary links related to the main article.

Important Notes

An aside is not restricted to appearing on the right side of a webpage.
CSS determines where the aside appears visually.
Content inside an aside should be related but not essential to the main flow of the surrounding content.
A page can contain more than one aside when each has a meaningful purpose.

12. The address Element

The address element represents contact information for the nearest article or body ancestor. It is commonly used for contact information associated with a website or an individual article's author or publisher.

Example: Website Contact Information

<footer>
    <address>
        Contact Codementrix:
        <a href="mailto:hello@codementrix.in">
            hello@codementrix.in
        </a>
    </address>
</footer>

Example: Article Author Contact

<article>
    <h2>HTML Accessibility Guide</h2>
    <p>Learn how semantic elements improve document structure.</p>

    <address>
        Author:
        <a href="mailto:author@example.com">Course Author</a>
    </address>
</article>

The address element is not intended for arbitrary postal addresses or every mention of a location. Use it for relevant contact information associated with the page or article.

13. The time Element

The time element represents a date, time or duration. Its datetime attribute can provide a machine-readable value that differs from the human-readable text.

Example: Date

<p>
    Published on
    <time datetime="2026-10-17">October 17, 2026</time>
</p>

Example: Time of Day

<p>
    Class begins at
    <time datetime="14:30">2:30 PM</time>.
</p>

Example: Duration

<p>
    Estimated lesson duration:
    <time datetime="PT45M">45 minutes</time>.
</p>

In the examples above, the datetime attribute uses machine-readable values. PT45M is an ISO 8601 duration representing 45 minutes.

The time element is useful for publication dates, event schedules, appointments and course durations. It does not automatically schedule events or convert time zones.