How do you apply W3.CSS classes to a semantic HTML page structure?

Keep the semantic elements (header, nav, main, footer) and attach W3.CSS classes to them — layout classes like w3-container or w3-bar combined with color classes like w3-black.

<body>
    <header class="w3-container w3-black">
        <nav class="w3-bar w3-black">
            <button class="w3-button">News</button>
            <button class="w3-button">About</button>
        </nav>
    </header>
    <main class="w3-container w3-sand">
        <section class="w3-panel w3-blue-grey">Hello World</section>
    </main>
    <footer class="w3-container w3-black">More infos...</footer>
</body>

The two ideas this combines:

1. The library styles, the HTML stays semantic. W3.CSS doesn't replace header/nav/main/footer with <div> soup — you keep the meaningful elements (good for accessibility and structure) and only add classes to them.
2. Classes compose. One element typically carries a role class (w3-container for a padded block, w3-bar for a horizontal bar, w3-panel for a highlighted note, w3-button for a clickable) plus a color class (w3-black, w3-sand, w3-blue-grey). Mixing and matching these few building blocks is how whole pages get styled without writing CSS.

Go deeper:

• MDN — Structuring documents — why header/nav/main/footer exist and what they do for accessibility and SEO.