Skip to main contentSkip to site search
Honeycomb

Headings

Navigating through headings is the most used feature used for finding information on a page and the correct implementation of clearly written headings paired with good heading hierarchy is key to enabling users to quickly find what they need.

Respect the heading hierarchy

Add the title of the page on the "H1" tag to help search engines and users alike to understand the purpose of that page.

"H1"
"H2"
"H3"
"H2"
"H3"

Don't use more than one "H1" per page.

"H1"
"H2"
"H1"
"H3"
"H1"

Organize sub-sections under "h2", "h3" and "h4" according to their context.

H1 — Pokémon guide
H2 — Types
H2 — Species

Don't use heading levels to set font size.

Some regular sized text
H2 — A call to action
Another regular sized text

Organize headings in a way that makes it possible to generate a "table of contents" of the web page.

H1 — My mom's best lasagna recipe
H2 — Ingredients
H2 — Preparation
H3 — Sauce
H3 — Pasta
H3 — Layering

Don't skip heading levels.

"H1"
"H3"
"H3"
"H5"

Visual hierarchy versus actual hierarchy

The visual hierarchy is more often than not different than the actual hierarchy of the document but you should never skip heading levels because of visual design decisions. Use CSS to set the font size and weight that you desire.

Honeycomb offers heading styles as classes that can be applied to any element, and we strongly encourage you to add different heading classes to different heading elements, even if they don't match, as long as you respect the page hierarchy.

Accessible writing

  • Organize your content in a coherent way
  • Titles should be clear, useful and relevant
  • Avoid long statements or questions as headings
  • Do not use all caps text