What are the best practices for using subheadings in RWD?

1 Use a clear hierarchy

The first rule of using subheadings is to establish a clear hierarchy of your content, using the HTML heading tags from <h1> to <h6>. The <h1> tag should be reserved for the main title of your page, while the lower-level tags should be used to divide your content into sections and subsections. A clear hierarchy helps users scan your content and find the information they need, as well as helps search engines understand the structure and relevance of your page.

2 Use descriptive and concise subheadings

The second rule of using subheadings is to make them descriptive and concise. Your subheadings should summarize the main idea or point of each section, using keywords that match your users' queries and expectations. Avoid vague or generic subheadings that do not convey any specific information or value. Also, keep your subheadings short and simple, avoiding unnecessary words or punctuation. A descriptive and concise subheading helps users and search engines grasp the purpose and context of each section.

3 Use consistent and appropriate formatting

The third rule of using subheadings is to use consistent and appropriate formatting. Your subheadings should follow a consistent style and tone throughout your page, using the same font, size, color, and alignment. You can also use different formatting techniques, such as bold, italic, underline, or capitalization, to create contrast and emphasis, but do not overdo it or mix them randomly. A consistent and appropriate formatting helps users and search engines differentiate your subheadings from the rest of your content and create a visual hierarchy.

4 Use responsive and adaptive subheadings

The fourth rule of using subheadings is to use responsive and adaptive subheadings. Responsive subheadings are subheadings that adjust their size and layout according to the screen size and device of the user, using CSS media queries and breakpoints. Adaptive subheadings are subheadings that change their content or display according to the screen size and device of the user, using JavaScript or server-side techniques. A responsive and adaptive subheading helps users and search engines access and view your content optimally on any device.

5 Use semantic and accessible subheadings

The fifth rule of using subheadings is to use semantic and accessible subheadings. Semantic subheadings are subheadings that use the correct HTML heading tags and follow the logical order of your content, without skipping or repeating levels. Accessible subheadings are subheadings that use proper attributes and labels, such as id, class, role, aria-level, and aria-labelledby, to make your content accessible to users with disabilities or assistive technologies. A semantic and accessible subheading helps users and search engines understand and navigate your content easily and correctly.

6 Use subheadings strategically and sparingly

The sixth and final rule of using subheadings is to use them strategically and sparingly. Subheadings are not mandatory for every section or paragraph of your content, and using too many or too few can have negative effects on your design and SEO. Use subheadings only when they add value and clarity to your content, and when they support your main goal and message. Avoid using subheadings that are redundant, irrelevant, or misleading. A strategic and sparing subheading helps users and search engines focus on your content and avoid distraction or confusion.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?