HTML Structure

S2 follows the best practices of semantic HTML structure in the Page-Template component. You can use this template component as a starter template for any new page.

The main wrapper of the page SHOULD NOT include the nav and footer.

A page should always have a Main HTML tag.

The following is our default structure when you start a page by using the Page-Template component or the New Page Template.

Default page structure

body : This is the body tag with class body.
page : Wrap all content within a div. This practice makes it easier to copy and paste entire pages or sections.
Global-Code : Please refer to the this section for details.
css_page : A hidden Webflow Code Embed element that allows you to add custom CSS specific to the page and see changes immediately.
main-nav : Main navigation.
main : Wraps the main content of the web page.
... Other parts of the website.
footer : Footer section.

Semantic HTML Structure

In terms of HTML generated, the default Page-Template structure looks like this (simplified):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Page Template</title>
</head>
<body class="body">
    <div class="page">
        <!-- Component Instance: Global-Code -->
        <!-- Code Embed: css_page -->
        <nav class="main-nav">
            <!-- Main navigation -->
        </nav>
        <main>
            <section>
                <div class="container">
                    <header class="title-set-layout">
                        <!-- Page title -->
                    </header>
                    <!-- Section content -->
                </div>
            </section>
            <section>
                <div class="container">
                    <!-- Section content -->
                </div>
            </section>
        </main>
        <footer>
            <!-- Footer content -->
        </footer>
    </div>
</body>
</html>

PreviousStructure NextCustom Code

Last updated 11 days ago