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.

It’s important to use Webflow Headings as headings and not as decoration. And they need to be in order. 47% of my sample of Webflow websites had this error. In other words, designers were using <H> as decoration, with no meaning.

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. 

‍

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.

‍

‍