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).
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.
There are up to 6 headings, each nested in hierarchy starting with heading 1 as the most important to heading 6, the least important. 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.
<h1> is reserved for your page title and is set automatically.
<h2> is the secondary heading and must appear on each page.
<h3> should be used to group sections of related text in your content area and to label lists or other similar chunks of content.
<h4> is a versatile heading. It can be used to further group sections of content that are less important than an <h3>. <h4> can also be used to break up <h2> and <h3>, for instance, if you have a subheading or short description that is important, but not as important as <h3>. See the example below.
<h5> has less importance than all of the above headings. Since this heading’s font size is usually too small to adequately identify sections of content, it’s best used to emphasize small sections of content that are still important from a search engine optimization perspective, such as the name of a contact person or *explanatory text annotated with an asterisk, such as a footnote.
The headings above should be adequate for effective content structuring so we advise against using <h6>.
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.
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. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
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.
- Emphatic stress: “You are really funny.”
- Span of text in another language: “The French translation of grapefruit is pamplemousse.”
Underline: Traditionally, 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.
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.
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
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.
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