Semantic Structure

Headings, Text and Styles

  • Create a paragraph: hit Enter
  • Create a line break: hit Shift + Enter.
  • Click inside the paragraph or click within the text itself to apply a style. The style is applied to the entire line.
  • Use Heading 1 only once per page - it is the title of the document.

A heading must be on its own line. You won’t be able to choose part of a paragraph to apply a heading style.

Never use Underline. If text is underlined, it’s assumed to be a link.

Never Justify. Justifying creates unnatural breaks in the flow of text and makes your site less readable.

Headings are not for styling paragraph text. Heading are just that – they’re headings.

Headings should be used in logical order. You'll use heading 2 and 3 most often. You'll rarely use headings past heading 4. Headings should not be randomly applied based on size display preferences.

Why Use Headings?

“Despite the nature of the Web and the vast change in its role from a structural medium to a visual media, it is still important that Web content be designed with proper structure…

Pages should be structured in a hierarchical manner, with 1st degree headings (<h1>) being the most important (usually page titles or heading), then 2nd degree headings (<h2> - usually major section headings), down to 3rd degree headings (sub-sections of the <h2>), and so on.”

Learn more about creating semantic structure.

Use headings to give web pages meaningful structure to convey hierarchy. Screen readers and other assistive technologies allow users to navigate web pages by structure. But, there has to be a structure in place to use for navigation. Using text styling only, like bold or bigger font sizes, means nothing and isn't helpful.

Users scan pages to find specific information or to get something done. They’re not reading the whole page word-for-word. Use headings the right way and you help users scan your content.