The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!

Headings on a website are used by both your users and search engines to determine the content on your page.

Headings used by humans & search engines

Adding a Heading

There are 6 options for headings ranging from largest to smallest: H1, H2, H3, H4, H5, and H6. When you add a heading element in Webflow, you are given the option to select which heading variant to use.  


Choosing the right heading type

There are many approaches to organizing content on a website using headings. The top level heading, the first words your users and search engines see, is usually going to be an H1. You can think of this like a newspaper headline.

Newspaper analogy

Headings should be concise, unique to the page you’re on, and written for your human users to read. It is not good practice to keyword-stuff your H1 headings, the practice of adding specific words into the title to rank higher for those terms in search results. Users don’t want to read keyword-stuffed headings and it can actually negatively affect search rankings.   

Other sections of your site may contain subheadings—these typically consist of H2 headings. H3 headings can be added as a lower-level under the H2 heading and so on in that fashion. Headings are used to give your human users and search engines a good idea of the content in the paragraphs below the heading.


You don’t always need every level of heading on a page. Sometimes it doesn’t make sense to have several headings – a simple page can have just one H1 heading.

Styling a Heading

Styling a heading in Webflow is simple. You can add a new heading to your project by dragging it into the canvas from the Add Panel. You can double click into the heading to edit the content, then use the style panel to  edit the font, font-size, font-weight, color, etc. If you already have a styled heading, you can simply assign it the corresponding class name.


It is not always necessary to use all levels of heading on a page. If it doesn’t make sense to have several headings, a simple page can have just one H1 heading.

Editing the heading

To edit the text, double-click the element or select it and press enter. Then, select the placeholder text and replace it with your own content.

Formatting inner text

If you want to bold, italicize, or style specific parts of your headings, you can do so by double clicking into the Heading element. Then, select the parts you want and use the context menu to style. You can see examples and read more on this process in Text Formatting.