Streaming live at 10am (PST)

Rant: heading tags are not for styling

I’ve been using Webflow professionally for 4 years and during that time, I have bought dozens of templates for clients.

The quality of these templates vary widely. Of course they all look good but the designer experience is often severely lacking. One issue that I come across often is default styles for heading tags.

Template designers don’t seem to understand what header tags are for and assume that h1 is a style and not a dom navigation tag. 99 percent of the time, the default class for h1 is bigger than the default class for h2 and so on.

This may make intuitive sense but when you have a page that actually uses multiple heading tag hierarchies (say a complex blog post) then you immediately run into styling problems. Another example is when you have the same section as your first and last sections on the page, on a portfolio site for instance. If your name is using an h1 tag, you’ll end up closing your page with an h1 tag - which is weird and causes accessibility issues for non-screen users and crawlers.

The correct approach (I don’t know who needs to hear this) would be to set all default heading styles to 1rem and then define text size classes based on your font scaling approach. Add a ‘text-xl’ class and apply it to whatever text you want to appear extra large. Most of the time that’ll be your h1 tag but not always. In the portfolio example above, your name is an h1 tag at the top of the page but is an h6 or p tag at the end of the page.

I really want Webflow to enforce this on their template store but I don’t know how realistic is that ask. With the new accessibility check errors, maybe they can simply says: to be listed on the store, your site must not have any errors or warnings.

Rant over

Source/further reading:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

Edit: I kept saying header when I meant heading. Also added a source for further reading on this issue.