Heading

The Heading block allows you to add section titles and subtitles to structure your content hierarchically. Intended for organising your content, improving readability, and helping both readers and search engines understand the structure of your page. Specifically, the Heading block enables you to:

• create clear content hierarchy with six heading levels (H1-H6);
• visually distinguish different sections of your content;
• improve page navigation for readers;
• enhance accessibility for users of assistive technologies;
• boost SEO by properly structuring your content; and
• maintain consistent typography across your site.

The Heading block appears as a prominent text element with styling that visually indicates its importance in the content hierarchy. Each heading level uses a different font size, with H1 being the largest and H6 the smallest. Headings help break up long content into scannable sections, making it easier for readers to find the information they need quickly.

The WordPress Heading block displaying different heading levels (H1-H6) with their respective styling.

Adding the Heading Block

1. In the WordPress block editor, click the + button to add a new block.
2. Search for Heading and select the Heading block.
3. The block will appear ready for you to type your heading text.

Alternatively, you can type /heading on a new line and press enter to add the block, or simply type ## (for H2) or any number of hashtags corresponding to your desired heading level.

Creating and Editing Headings

To create a heading:

1. Click inside the Heading block.
2. Type your heading text.
3. Select the appropriate heading level from the block toolbar (H1-H6).

To convert existing text to a heading:

1. Select the text block you wish to convert.
2. Click the block converter icon in the toolbar.
3. Select Heading from the options.
4. Choose your desired heading level.

Customising the Heading Block

Once you have added your heading, you can customise its appearance:

• Heading Level: Change between H1-H6 using the level selector in the toolbar
• Text Alignment: Align your heading left, centre, or right
• Typography: Adjust font family, size, and weight in the sidebar settings
• Colour: Change the text colour to create visual emphasis
• Width: Set the maximum width of your heading

These options can be found in the block settings sidebar under the Settings tab when the heading block is selected.

Best Practices

For optimal use of the Heading block:

• Use H1 only once per page, typically for the main page title
• Follow a logical hierarchy (don't skip levels, e.g., from H2 to H4)
• Keep headings concise and descriptive
• Use sentence case for consistency
• Ensure heading text accurately reflects the content that follows
• Maintain a consistent style across all headings on your site

Accessibility Considerations

Headings play a crucial role in accessibility:

• Screen reader users often navigate pages by headings
• Proper heading hierarchy provides context and structure for all users
• Avoid using headings merely for visual styling
• Ensure sufficient colour contrast between heading text and background
• Do not rely solely on colour to distinguish heading levels
• Use headings to create a logical, navigable document outline