Typography Tips

Structuring Content on the Web

Visitors to a website often scroll a page looking for big, bold text (headings) to quickly get an understanding of the information on the page.  Structuring content in a hierarchical manner helps users accomplish this goal by visually indicating sections of content as well as the importance of these sections. See more information about how to use headings.

Correctly structured content also helps users find your website. When you add headings to your content you’re telling a search engine what’s most important on your page. Search engines like Google and Bing scan webpage headings when a user enters a search term. When you use meaningful headings, you’re helping search engines to rank your page higher in search results. Read more about search engine optimization on our SEO Guidelines page.

When you correctly structure content you’re also ensuring that screen reader and other assistive technology users can accurately navigate your web pages. Assistive technologies allow users to navigate a page based on headings. Your web page is accessible to a wider range of visitors when your content is structured effectively.

Examining Content Structure

To view the content structure of a webpage and understand how assistive technology users navigate, we encourage you to use WebAIM’s Web Accessibility Evaluation Tool (WAVE).

How to Effectively Structure Content

Use Headings

Headings are an effective way to structure your content, guiding readers through content by indicating what they will be reading about in each section. Headings increase readability which also improves accessibility as well as SEO. 

Headings should be used correctly, organizing the content into sections of related content. Be sure the headings are nested in an organized way. For example, h1 should be followed by h2, h2 followed by h3, etc.

Read about headings and page structure by W3C Web Accessibility Initiative

How to Emphasize Text

Text Styles: Bold, Italic, Underline 

Text styles such as bold, italic and underline should be only used to emphasize text within a paragraph, not as a heading.

Bold: use to convey extra importance within a content area.

Example:

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. This text is more important that the related text surrounding it. Sed semper lorem at felis. 

Italic: use to offset a span of text for emphatic stress OR to indicate a span of text that is a technical term, part of a bibliography, or in another language.

Examples:

  • Emphatic stress: “You are really funny.”
  • Span of text in another language: “The French translation of grapefruit is pamplemousse.”

UnderlineTraditionally, an underline on the web indicates a link. While your site may have unique styling such as font weight or color to indicate a link, many users still associate an underline with a link. Avoid underlining text on your site to prevent users from being confused.

How and When to Use Lists

Lists serve many purposes: 

  • To group related items together
  • To create visual interest
  • To show levels of importance, instructions or sequences

Most list items can be grouped into bulleted (unordered lists). Consider using a numbered (ordered) list when you are providing steps or instructions that must be followed in a sequential manner, or when you want to refer back to a particular list item further down in the content area.

When to Use Tables

Tables are to be used to display tabular data, which is information that you might otherwise display in a spreadsheet or a grid. Tables are not to be used to structure regular content (paragraphs and headings), to center content on a page, or attempt to change the layout, colors or format of your webpage as a whole. 

Examples of commonly used tabular data: 

  • Curriculum and course schedules
  • Service, product and price listings
  • Comparison tools

See Great Examples of Data Tables Presented on Websites article.

Using Blockquotes

If you have a block of text that is a quote or testimonial, consider styling it as a blockquote using the text editor. Blockquotes create visual interest and set apart the quote as being unique from the rest of your content.

Example:

There is nothing is more musical than a sunset. He who feels what he sees will find no more beautiful example of development in all that book which, alas, musicians read but too little - the book of Nature.
– Claude Debussy