When people scan webpages, they often only read the headings to figure out if the content is relevant to them. It’s important to make your headings as specific as possible53, 54 — try to include keywords to help users find the information they need.
Including keywords in headings also makes it more likely that search engines will show your content in search results. Search engines show sites where keywords appear in the web address, title, page headings, and links before they show websites with keywords that only appear in content.
Start headings with verbs when you can. This helps set you up to write actionable content.
Use sub-headings
Adding a sub-heading, or “teaser” text, underneath each heading can give the user additional clues about what to expect from your content.
Example
Main heading: Get Active
Sub-heading: Aim for 2 hours and 30 minutes of activity a week.
Consider question headings
When appropriate, try using common questions readers may have as headings. Use “I” and “me” to reflect the voice of the user — and make sure your question headings are clear, specific, and to the point.
For example, when discussing mammograms, question headings might include:
- How does getting a mammogram benefit me?
- How much does it cost?
- What happens if the doctor finds something wrong?
- How often do I need to get tested?
- Are there any risks associated with the test?
Figure 5.2: This page on promoting good sleep habits uses common questions like “How much sleep do I need?” as headings to help users spot topics they’re interested in.
Place headings properly
Make sure your headings don’t “float” on the page. Floating happens when there’s too much white space above and below the heading. Make it clear which chunk of text the heading corresponds to — leave more space above a heading than between the heading and the text that comes after it.53
Figure 5.3: This page about getting a dilated eye exam, featured on the National Eye Institute (NEI) website, is a good example of properly placed headings. The page has little space between headings and the content that follows — and more space between the end of a paragraph and the next header. This helps users to see which headings and chunks of content belong together at a glance.
Source: https://www.nei.nih.gov/learn-about-eye-health/healthy-vision/get-dilated-eye-exam
Use appropriately structured headings when building the page code to support SEO and accessibility. The first header code (H1) is your page title, and other header codes (H2, H3, etc.) support structured scanning.
Figure 5.4: See this example of a marked-up MyHealthfinder page, with header codes ranging from H1 to H5. Each header code uses a unique font type and size so users can easily recognize the content hierarchy. H1 uses the largest and most prominent font, and the font size gets smaller with each header level.
Source: https://odphp.health.gov/myhealthfinder/healthy-living/nutrition/get-enough-calcium
