---
icon: file-code
---
# 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.
## **Example page structure**
This is our default and recommended structure when you start a page using the **Page Template** component or the **New Page Template**.
> **`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 [this section](global-code.md) for details.
> > >
> > > **`css_page`** : It allows you to add custom CSS specific to the page and see changes immediately.
> > >
> > > **`main-nav`** : Contains `nav`, the page's main navigation.
> > >
> > > **`main`** : Wraps the main content of the web page.
> > >
> > > > ... Other parts of the website.
> > >
> > > **`footer`** : Footer section.
{% hint style="info" %}
The `main` wrapper of the page SHOULD NOT include the **nav** and **footer**.
A page should always have a `Main` HTML tag.
{% endhint %}
## Semantic HTML Structure
In terms of HTML, the default page structure looks like this (simplified), which is included in the **Page Template** component.
{% code lineNumbers="true" %}
```html
Page Template
```
{% endcode %}