HTML Semantics

Introduction:

HTML semantics refers to the use of HTML tags that convey the meaning and structure of the content they contain. Semantic tags provide information about the content in context, allowing browsers, search engines, and screen readers to understand the page's purpose and content better.

Core Semantic Elements:

1. <header>

Represents introductory content, typically containing a group of introductory or navigational aids.

    <header>
        <h1>Website Title</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>
                

2. <nav>

Defines a set of navigation links.

    <nav>
        <ul>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
                

3. <main>

Specifies the primary content of the document, unique per page.

    <main>
        <article>
            <h2>Article Heading</h2>
            <p>This is the main content of the page.</p>
        </article>
    </main>
                

4. <article>

Represents a self-contained piece of content that can be distributed and reused independently.

    <article>
        <h2>Article Title</h2>
        <p>Written by Someone.</p>
    </article>
                

5. <footer>

Contains meta information about the document including links to the author, copyright data, and contact details.

    <footer>
        <p>Copyright &copy; 2023 Example.com</p>
    </footer>