HTML Semantics

14. The search Element

The search element represents a part of a page containing search or filtering controls. It provides semantic meaning to the region, but it does not implement search behavior by itself.

Example: Course Search

<search aria-label="Search courses">
    <form action="/courses" method="get">
        <label for="course-query">Search courses</label>
        <input
            type="search"
            id="course-query"
            name="q"
            placeholder="Enter a course name"
        >
        <button type="submit">Search</button>
    </form>
</search>

The search element identifies the search region. The form submits the query to the specified endpoint, and the application must implement the actual search logic.

The search element and the input type="search" are different: one identifies a region, while the other provides a search-oriented input control.

15. Combining Semantic Elements in a Real Website

Semantic elements are most useful when they work together to describe the overall page structure.

Example: Complete Codementrix Blog Layout

<header>
    <a href="/">
        <strong>Codementrix</strong>
    </a>

    <nav aria-label="Main navigation">
        <a href="/">Home</a>
        <a href="/courses">Courses</a>
        <a href="/blog">Blog</a>
        <a href="/contact">Contact</a>
    </nav>
</header>

<main>
    <section aria-labelledby="latest-heading">
        <h1 id="latest-heading">Latest Tutorials</h1>

        <article>
            <header>
                <h2>Introduction to Semantic HTML</h2>
                <p>
                    Published
                    <time datetime="2026-10-17">
                        October 17, 2026
                    </time>
                </p>
            </header>

            <p>
                Learn to use meaningful HTML elements to structure webpages.
            </p>

            <p>
                <a href="/blog/semantic-html">Read the full article</a>
            </p>
        </article>

        <article>
            <h2>Introduction to Accessible Forms</h2>
            <p>
                Learn how to create forms that are understandable and usable.
            </p>
            <a href="/blog/accessible-forms">Read the full article</a>
        </article>
    </section>

    <aside aria-labelledby="popular-heading">
        <h2 id="popular-heading">Popular Topics</h2>
        <ul>
            <li><a href="/topics/html">HTML</a></li>
            <li><a href="/topics/css">CSS</a></li>
            <li><a href="/topics/javascript">JavaScript</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>&copy; 2026 Codementrix.</p>

    <nav aria-label="Footer navigation">
        <a href="/privacy">Privacy Policy</a>
        <a href="/terms">Terms</a>
    </nav>
</footer>

This example demonstrates a page header, main navigation, primary content, a thematic section, independent articles, complementary content and a page footer.

It also demonstrates how semantic elements can reduce ambiguity in a real content-driven website.

16. Semantic HTML and Accessibility

Semantic HTML provides a foundation for accessible websites. It communicates information about the role and structure of content to browsers and assistive technologies.

Landmarks

Some semantic elements expose useful landmarks, enabling screen-reader users to navigate directly to major page regions.

header: can expose a banner landmark when it is a page-level header.
nav: identifies navigation regions.
main: identifies the main content region.
aside: can expose a complementary landmark in appropriate contexts.
footer: can expose a content-information landmark when it is page-level.

Landmark behavior depends on the element's context. For example, a header inside an article does not have the same page-level banner meaning as a header belonging to the overall page.

Headings

Use headings to communicate the hierarchy of the content. A clear heading structure helps users understand how the page is organized.

<main>
    <h1>HTML5 Mastery</h1>

    <section>
        <h2>HTML Foundations</h2>

        <section>
            <h3>Semantic Elements</h3>
            <p>Learn to structure content meaningfully.</p>
        </section>
    </section>
</main>

Choose heading levels based on the document's content hierarchy rather than the font size you want. CSS can change visual sizes independently.

Modern HTML does not automatically create a separate heading outline for each section or article. Authors should provide a sensible heading hierarchy explicitly.