Semantic HTML

<!DOCTYPE html>
<html lang="en">
<head>...</head>
   
Document  Meta goes in the <head>
<body>
   
Document  Content goes in these elements:
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
</body>
</html>

<header>
    <!-- navigation -->
    <nav>
        <!-- logo -->
        <a href="/" class="logo">
            <img src="/logo.svg" width="64" height="64" alt="Logo"/>
        </a>
        <!-- pages -->
        <ul>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
Advanced - controls — 27 collapsed lines
        <!-- controls --> 
        <div class="controls">
            <!-- search -->
            <form role="search" action="/search" method="get" class="search-form">
                <label for="site-search" class="sr-only">Search site</label>
                <input type="search" id="site-search" name="q" placeholder="Search..." autocomplete="off">
            </form>
            <!-- theme switcher -->
            <input type="checkbox" id="theme-toggle" class="sr-only">
            <label for="theme-toggle" class="theme-switch" aria-label="Toggle dark mode"></label>
            <!-- language selector -->
            <details class="language-dropdown">
                <summary aria-label="Select Language">English (EN)</summary>
                <ul>
                    <li><a href="/en/" hreflang="en" lang="en">English</a></li>
                    <li><a href="/fr/" hreflang="fr" lang="fr">Français</a></li>
                    <li><a href="/es/" hreflang="es" lang="es">Español</a></li>
                </ul>
            </details>
            <!-- Subscribe to newsletter -->
            ...
        </div>
        <!-- authentication -->
        <ul>
            <li><a href="/login">Login</a></li>
            <li><a href="/signup">Sign up</a></li>
        </ul> 
    </nav>
</header>

header {
    position: fixed;
    
             
 Headers are often styled to stay at the top of the viewport
}

<footer>
    <div class="footer">
Brand — 19 collapsed lines
        <!-- brand --> 
        <div class="brand">
            <!-- logo -->
            <h2>
                <a href="/" class="logo">
                    <img src="/logo.svg" width="64" height="64" alt="Logo"/>
                </a>
            </h2>
            <!-- headline -->
            <p>...</p>
            <!-- social media -->
            <nav class="social-links" aria-label="Social Media">
                <ul>
                    <li><a rel="me" href="https://github.com/..."  aria-label="GitHub">GitHub</a></li>
                    <li><a rel="me" href="https://discord.com/..." aria-label="Discord">Discord</a></li>
                    <li><a rel="me" href="https://twitter.com/..." aria-label="X">X</a></li>
                </ul>
            </nav>
        </div> 
        <!-- pages -->
        <nav>
            <div class='column'>
                <h3>About</h3>
                <ul>
                    <li>Story</li>
                    <li>Help</li>
                    <li>Community</li>
                </ul>
            </div>
            <div class='column'>
                <h3>About</h3>
                <ul>
                    <li>Story</li>
                    <li>Help</li>
                    <li>Community</li>
                </ul>
            </div>
        </nav>
    </div>
Advanced - legal — 16 collapsed lines
    <!-- sub footer --> 
    <div class="legal">
        <!-- copyright -->
        <p>
            &copy; 2026 Site, Inc. All rights reserved.
            Designed and built by <a href="/about" rel="author">Stephen</a>.
        </p>
        <!-- legal documents -->
        <nav aria-label="Legal Navigation">
            <ul>
                <li><a rel="privacy-policy" href="/privacy">Privacy Policy</a></li>
                <li><a rel="terms-of-service" href="/terms">Terms of Service</a></li>
                <li><a href="/cookies">Cookie Settings</a></li>
            </ul>
        </nav>
    </div> 
</footer>

<main>
    <aside>...</aside>
    <section>...</section>
    <aside>...</aside>
</main>

<section id='hero'>...</section>
<section id='about'>...</section>
<section id='contact'>...</section>