Example of HTML5 structure

February 19, 2024

In this article, we’ll dissect an HTML5 structure example that incorporates essential elements. Here is the full code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Structure Example</title>
</head>
<body>

    <header>
        <div class="logo">
            <img src="logo.png" alt="Logo">
        </div>
        <div class="tagline">
            <h1>Welcome to my website</h1>
            <p>Your go-to destination for all things amazing!</p>
        </div>
        <!-- Header content goes here -->
    </header>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <!-- Navigation links go here -->
    </nav>

    <main>
        <article>
            <h2>Article Title</h2>
            <p>This is the main content of the article.</p>
            <!-- Article content goes here -->
        </article>

        <aside>
            <h2>Aside Section</h2>
            <p>This is additional content related to the main content.</p>
            <!-- Aside content goes here -->
        </aside>
    </main>

    <footer>
        <p>© 2024 My Website. All rights reserved.</p>
        <!-- Footer content goes here -->
    </footer>

</body>
</html>

The Header Section

The header of a webpage typically holds introductory content and navigation links. In our example, we enhance this section by including a logo and a tagline. The logo is represented by an <img> element within a <div class="logo">, and the tagline is contained within a <div class="tagline">. This design ensures that users immediately recognize the website’s brand and purpose upon landing on the page.

Navigation Links

A clear navigation structure is crucial for guiding users through the website. Within the <nav> element, we’ve included an unordered list (<ul>) with list items (<li>) that link to different sections of the website, such as Home, About, Services, and Contact.

Main Content Area

The <main> element encapsulates the primary content of the webpage, consisting of an <article> and an <aside>. The <article> element represents a self-contained piece of content, such as a blog post or news article. Meanwhile, the <aside> element contains supplementary content related to the main article, offering additional context or resources.

Footer Section

Concluding the webpage is the footer section, denoted by the <footer> element. Here, we provide essential information such as copyright details and any additional links or acknowledgments.