Core Structure

Page Structure

Each page we’re working on has this Structure:

‍

Navigation <nav></nav>

- Main Wrap <main></main>

— Section <section></section>

—— Container

——— {Component Name} Wrapper

—————— {Component Name} List <article></article>

————————— {Component Name} Item <article></article>

Footer <footer></footer>

Nav

The <nav> tag defines a set of navigation links. NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

*Source: w3schools

Main

The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

*Source: w3schools

Section

The <section> tag defines a section in a document.

*Source: w3schools

Article

We’re adding this tag when we are adding Blogs or News posts that represent a specific article.

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

• Forum post
• Blog post
• News story

Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element (see example below).

*Source: w3schools

Footer

The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents

You can have several <footer> elements in one document.

Tip: Contact information inside a <footer> element should go inside an <address> tag.

*Source: w3schools

Heading Structure

When creating the page in Webflow it is important that we are following the proper strucure for SEO and Accessibility.

An example of a good Heading Structure:

- H1

— H2

—— H3

—— H3

—— H3

—— H3

— H2

— H2

—— H3

———— H4

———— H4

———— H4

— H2

We should always have a heading structure like this. In some cases, the design doesn’t support having a H3 size after an H2. So in that case we are going to be using typography “fake classes”.

That means that we will add an H3 to the page, but add a class of H5 in order to not compromise design. Ideally the design should also follow the proper hierarchy but in many instances that’s not possible.

When the design is completely out of the box we might end up having to use custom classes for heading sizes but still make sure we follow the heading structure.

Example would be:

‍

In this case we have a Heading 1 with a Label Class added to it and a H2 below with a Jumbo Class connected to it. This was a specific request from the SEO agency, we’re working with, but we’ve found a way to make the design happen without complicated class structures.