Skip to main content Skip to secondary navigation

How-to: Headings

Headings in the Text Area Paragraph are visual indicators to "eyeballs", helping to break up and chunk your content for easy scanning, but they are also important for structure, SEO, and accessibility. When writing web text, you always want to use headings to break up your content hierarchically.

Use headings structurally

It is important to use headings structurally — the first heading used in your Text Area Paragraph should be a heading 2 (H2), not a heading 4 (H4) because you prefer the type style of an H4 over an H2. Using this "semantically correct" structure throughout your content will provide the mechanical hierarchy that is good for sighted users, SEO, and accessibility.

Alternatively, avoid using headers to achieve visual results — and only visual results. In the case that you want to visually — and only visually — emphasize content, like a quote, or a graphically big number, use the Styles menu in your editing tool to achieve this result. 

Take away:

Stick to H2's for your headings. Use lower degree headings for content contained below or "inside" existing H2 content. (Like we have done with this page. Our "Take away" headings are H3's, but each of the other headings is formatted as H2's, as they introduce ideas on the same "level" as one another.)

Use headings to improve SEO 

Headings serve an important function for SEO. As headings increase scanning ease for a sighted user, they do the same thing for search engines. Your headings provide keyword-rich context about your site content. That does not mean you should unnaturally use or overuse headings to attempt altering search engine ranking (as this will inevitably fail, search engines are also optimized to recognize these tricks). But bear in mind, that your headings including "keywords" that highlight important topics of your content, will have an impact on the success of your SEO. 

Take away:

Think about your headings as keywords that will be crawled by search engines as you create the writing for your website.

Using headings to improve accessibility 

Heading structures also provide the opportunity for assistive technologies to navigate websites. As stated in WebAIM, Web Accessibility in Mind, "This means that the user can view a list of all of the headings on the page, or can read or jump by headings, or even navigate directly to top-level headings (<h1>), next-level headings (<h2>), third level headings (<h3>), and so on."

Take away: 

Consider the non-sighted or other users who requires assistive technologies understanding the content on your website. 

What to avoid

Relying on these styles in the "Styles" menu or simply emboldening text to create the hierarchy you are after, will result in poorly structured content for users, search engines, and accessibility.

  • Intro Text
  • Splash 
  • Quote 
  • Drop Cap 
  • Related 
  • Callout 
  • Subtitle

These styles in the "Styles" menu are like the engine sounds a toddler can make by pressing buttons on her toy truck. The buttons make sounds, but those sounds aren't produced by an actual engine or mechanical devices. These styles are not "understood" by search engines or assistive technologies while heading styles are both visual indicators and they behave as "code" — the adult version of the car, with the motor producing the sound itself. That doesn't mean you shouldn't use the "Styles" menu. They serve a visual purpose by differentiating your typography and adding layers of hierarchy — after — you have included your headings.

Take Away: 

Use the "Styles" menu with the above options after you have already applied the proper heading structure to your text using the "Normal" menu.