Use Meaningful Styles

  • On the Web, style your text for meaning first and appearance second.

    What does that mean? When you have a heading in your content, don’t just use boldface—style it with Heading 2.

    Why? Boldface is only about appearance, while Heading 2 is about meaning: it is a second-level heading (the title of your page is a first-level heading). And while most readers will easily understand that that bold text is a heading, that won’t be at all clear to your non-human readers: search engines and screen readers.

    And those non-human readers matter, because behind them are actual human readers who won’t be able to find or read your text as well.

    When you tell search engines that this text isn’t just bold, it is a header, that helps the search engine understand your content, making it more likely to be found during searches.

    A screen reader—a program that reads webpages out loud for the vision impaired—can use those headings to help their users understand the structure of your content. They also allow vision-impaired users more easily to skip through a long page to find the information they need.

    For more information, take a look at our Technical Best Practices, especially Use Styles and Structural Elements According to Their Meaning. For examples of styles, see How to Style Content.