Semantic Elements in HTML

Semantic elements are HTML elements that provide information about the structure of the web page. They are used to describe the content of the page, rather than the appearance of the content. Semantic elements help search engines and screen readers understand the content of the page, which can improve accessibility and search engine optimization (SEO).

Semantic Elements

Here are some of the semantic elements in HTML:

<header>

The <header> element represents a group of introductory or navigational aids. It typically contains the logo, navigation menu, and other introductory content.

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

<nav>

The <nav> element represents a section of the page that contains navigation links. It typically contains links to other pages or sections of the website.

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<main>

The <main> element represents the main content of the page. It typically contains the primary content of the page, such as articles, blog posts, or product listings.

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here...</p>
    </article>
</main>

<section>

The <section> element represents a section of the page that groups related content together. It is typically used to group related content, such as blog posts, articles, or product listings.

<section>
    <h2>Section Title</h2>
    <p>Section content goes here...</p>
</section>

<article>

The <article> element represents a self-contained piece of content that could be distributed and reused independently. It typically contains blog posts, news articles, or forum posts.

<article>
    <h2>Article Title</h2>
    <p>Article content goes here...</p>
</article>

<aside>

The <aside> element represents content that is tangentially related to the content around it. It typically contains sidebars, pull quotes, or advertisements. I would recommend inclduding some styling with the <aside> element to make it stand out from the rest of the content.

<aside>
    <h3>Related Content</h3>
    <p>Related content goes here...</p>
</aside>

<footer>

The <footer> element represents a footer for the page or section. It typically contains copyright information, contact information, or links to related content.

<footer>
    <p>&copy; 2024 Website Name</p>
    <nav>
        <ul>
            <li><a href="/privacy">Privacy Policy</a></li>
            <li><a href="/terms">Terms of Service</a></li>
        </ul>
    </nav>
</footer>