HTML Semantics - Detailed Overview

Introduction to HTML Semantics

HTML semantic elements clearly describe their meaning in a human- and machine-readable way. These elements provide meaning to the structure of the web page, making it easier to read and understand. Examples include <header>, <footer>, <article>, and <section>.

The <header> Element

The <header> element represents a container for introductory content or a set of navigational links. It typically contains headings, logo, and navigation:

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

Page Title

The <footer> Element

The <footer> element represents a footer for its nearest sectioning content or sectioning root element. It typically contains information about the author, copyright, or related documents:

<footer>
    <p>© 2024 ShariqSP</p>
    <p>Contact: <a href="mailto:info@shariqsp.com">info@shariqsp.com</a></p>
</footer>

The <article> Element

The <article> element represents a self-contained piece of content that could be distributed or reused independently. It is often used for blog posts, news articles, or other content:

<article>
    <h2>Article Title</h2>
    <p>This is a sample article. It includes text that is meaningful on its own.</p>
</article>

Article Title

This is a sample article. It includes text that is meaningful on its own.

The <section> Element

The <section> element represents a generic section of content. It groups related content together and typically includes a heading:

<section>
    <h2>Section Title</h2>
    <p>Content related to the section topic goes here.</p>
</section>

Section Title

Content related to the section topic goes here.

The <aside> Element

The <aside> element represents content indirectly related to the main content. It is often used for sidebars or tangential information:

<aside>
    <p>This is some related content that provides additional information.</p>
</aside>

The <main> Element

The <main> element represents the dominant content of the <body> of a document. It is used for content that is directly related to or expands upon the central topic of the document:

<main>
    <h2>Main Content</h2>
    <p>This is the main content of the page.</p>
</main>

Main Content

This is the main content of the page.