Hierarchical Headers Last Updated April 2024 Most writers are aware of the importance of having great headlines but online they have even more power. That’s why there are some rules about using the heading tags in the website code. These tags are <h1>, <h2>… all the way down to <h6>. Search engines, like Google, weigh headers higher in results than bold or other text. They do not like pages that do not follow the rules below. Screen readers, used by visually impaired visitors, use headings to present the content in a more structured way that is easier for non-visual navigation. Rules for Using Headings Headings create an outline for the page and should follow the logical flow of the document content. A page should have only one <h1>. Heading levels 2 thorough 6 represent steps in the outline and must be presented in a logical order. Never skip over a heading level, (e.g. from Heading 1 to Heading 3). Search engines especially hate pages with more than one Heading 1. The heading should describes the content that follows it. If your headings do not look good when used in the proper order, let us know. On our WordPress and Drupal sites the Title field of the page is usually the Heading 1, by default. Your specific site may have various ways to implement the Heading 1 of a page in order to create different styles for your website brand and should have other components available to help indicate content priority and hierarchy. If you are having trouble conveying the intended meaning or feel constrained by the options on your site, please let us know. How to Check the Heading Outline To see an outline of the headings on a page, you can visit the Web Validation Checker and select “Show Outline” under More Options, then enter your website address and click the “check” button. Scroll past the warnings about the source code to see an outline of the headings on your page. Design For each website, a designer has determined how the Headers will look and be differentiated from each other. Use Headers to create a consistent stylistic presentation for your visitors. In the Rich Text Editors for Drupal and WordPress the headings will be available to select from the drop-down. If you think the design of the headings needs improvement, then contact the Web team and we will help fix them for the entire website. Never use styles and tags like strong, emphasis, small or bigger instead of heading tags. It is acceptable to use them in addition to the heading tags when appropriate. Also, never skip or jump over headings because you don’t like the way it is designed. Learn More Read the Headings Tutorial from the W3C for details on the rules and some nuance and exceptions. For more general best practices read the Meet Content article, Introducing Your Content: Page Titles and Headings. The use of proper syntax and hierarchical tagging in the Web community is commonly called Web Standards.
