Headings in order

HTML has 6 levels of headings, H1 to H6. Those heading are significant. By looking at a page, we can see the relative importance of information. If you can’t see the page, and use a screen reader, the importance is announced as “Heading 1” or “Heading 2”. Screen readers can also announce a list of all the headings on a page. Headings give people a sense of what the whole page is about.

Don’t use headings for things that aren’t headings - Menus, footers, blog post authors, dates.

Each page should be about just 1 topic. My recommendation is to use 1 H1 Heading. After that you can use 2 H2 headings, 3 H3s and so on. Unless you are writing some very detailed information, you’ll probably never use an H6. 

‍

1. Go to Webflow Designer

2. Click on Publish

3. See the "Issues to improve on this page" section and Click on it

4. Find Skipped heading level…

5. Click on Show me how to fix arrow

6. Decide which way to make the changes needed

‍

‍

If it’s a home page or landing page, you’ve got one main idea - that’s your H1.

Heading styles

I usually use Type Scale to create my heading visual hierarchy. In the image above, H1 are bigger than H2 which are bigger than H3. Type Scale lets you find a beautiful sequence.

On this site I used the Minor Third scale for desktop and Major Second scale for mobile viewports.

How you style the Headings is not the same as how you name them programmatically. Especially on home pages or landing pages, you can make your H2 or H3 headings in whatever style you want.

‍

‍