HTML Semantics

1. Header (<header>)

The <header> tag represents introductory content or a set of navigational links. It typically contains heading elements, logos, or introductory information.

HTML Example:

<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

Copy

2. Footer (<footer>)

The <footer> tag defines the footer for a document or section. It typically contains information about the author, copyright, or contact information.

HTML Example:

<footer>
    <p>© 2024 My Website</p>
    <p>Contact us at <a href="mailto:info@example.com">info@example.com</a></p>
</footer>

Copy

3. Section (<section>)

The <section> tag represents a thematic grouping of content, typically with a heading.

HTML Example:

<section>
    <h2>About Us</h2>
    <p>We are a web development company specializing in semantic HTML.</p>
</section>

Copy

4. Article (<article>)

The <article> tag represents a self-contained piece of content that could be distributed independently, such as a blog post or news article.

HTML Example:

<article>
    <h2>The Rise of Web Development</h2>
    <p>Web development has seen a significant rise in popularity over the past decade. This article explores the reasons behind this trend.</p>
</article>

Copy

5. Aside (<aside>)

The <aside> tag represents a section of content that is tangentially related to the content around it. It is often used for sidebars or additional information.

HTML Example:

<aside>
    <h2>Related Articles</h2>
    <ul>
        <li><a href="#article1">Article 1</a></li>
        <li><a href="#article2">Article 2</a></li>
    </ul>
</aside>

Copy

6. Nav (<nav>)

The <nav> tag defines a set of navigation links. It helps browsers and assistive technologies understand where to find the navigation menu.

HTML Example:

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

Copy

7. Main (<main>)

The <main> tag represents the dominant content of the document. There should be only one <main> element per document.

HTML Example:

<main>
    <h1>Welcome to Our Website</h1>
    <p>This is the main content of the page.</p>
</main>

Copy

8. Figure (<figure>)

The <figure> tag is used to encapsulate media such as images, videos, or illustrations, along with their captions.

HTML Example:

<figure>
    <img src="image.jpg" alt="A description of the image">
    <figcaption>This is an image of a beautiful landscape.</figcaption>
</figure>

Copy

9. Figcaption (<figcaption>)

The <figcaption> tag provides a caption or legend for the content of a <figure> element.

HTML Example:

<figure>
    <img src="example.jpg" alt="Example image">
    <figcaption>This is an example image with a caption.</figcaption>
</figure>

Copy