Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.
Headings provide a hierarchical structure and context for your page that search engines (and accessibility readers) look for. Each heading should give the reader an idea of the information they can glean from the paragraph text that follows below it. Think of it as a page outline.
- Your H1 introduces the topic your page is all about. It’s the page title.
- The H2s describes the main topics covered in sections of the page.
- Subsequent headings, H3s to H6s, serve as additional sub-headings within each section.
Select headings based on content hierarchy, not header style. Headings should be arranged hierarchically without skipping heading levels. Here’s an example of a child page that properly uses headings.
To create a Heading block
- Click the plus icon (+) to insert a new block on your page.
- From the list of blocks available, select Heading.
- Select what size of heading you’d like to use from the floating editor bar and in the righthand sidebar.
- The floating editor bar will adjust the look of the heading on the front end. The righthand sidebar adjusts the heading size for screen readers so those with accessibility issues navigating the page through headings will move through the headings in the correct order.
- Type your content in the block.
- Click update in the Page Editor to save your changes.
Adding an anchor link to your heading
You also have the ability to add an anchor link to the heading block to quickly jump users to that section of the page.
- In the right-hand block editor, open the Advanced settings.
- Type in one or two words that you want to use as your anchor (connecting multiple words with a dash or just leaving out any spaces as you would for a URL).
- For example, if I wanted to link to this section of this page for quick reference on how to make anchor links, I might type in: anchor-link.
- Save the page.
- When you want to jump people directly to that section on a page, then use the page URL and add # and then the words you chose for the anchor link.
- For example, if I wanted to refer to this section, using the anchor I set above, I would just use the page URL and add #anchor-link:
https://digitaldocumentation.wustl.edu/global/blocks/heading/#anchor-link
- For example, if I wanted to refer to this section, using the anchor I set above, I would just use the page URL and add #anchor-link:
How to edit a Heading block
Click on the block to activate the block editor. From there you can change the type of heading you want to use from the options along the top or in the sidebar.
How to transform a Paragraph block into a Heading block
- Click the paragraph icon from the floating paragraph editor bar and select Heading from the drop down menu that appears.
- You can then choose the type of heading, H2-H6 from the new floating heading editor bar.
Large headline style
In addition to the heading styles that signal the page content’s hierarchical structure (H1-H6), there is an additional option to style a heading as a “Large Headline.”
- While in the Page Editor, click the heading block you wish to style
- Navigate to the Styles section in the right sidebar
- Select Large Headline