All web pages, vended technology and documents need to make use of adequate heading structures. They should all start with a Heading 1 and include a title. The title should give meaning to the page or document. Headings exist to give meaning to the information that follows. Headings allow for assistive technology, such as screen readers, to jump to specific areas of a digital content without having to read through the entire page or document. Headings levels should never be skipped, should avoid the use of ALL CAPS, and should be meaningful. Although there are different ways to accomplish each, headings in documents and headings on the web are very similar. Details for proper heading accessibility in different document types will be available in the tutorial for the document type, e.g., Microsoft Word, HTML.
A page's heading is text that is of importance and gives meaning to the text that follows below. Headings are used to structure your content and to divide the content into major section areas. Structuring your content through use of headings will benefit all users. Those who make use of assistive technology will be able to better navigate through a document or webpage. They will be able to have the same experience as a sighted user who can easily navigate to the section of a page or article through visual means. It also benefits all users since they will be able to better understand the organization of the content on a page.
The hierarchy you apply to your headings (H1, H2, H3, etc.) are just as meaningful as the text you are choosing as a heading. For this reason, it is important that the text you are choosing as your headings is meaningful. For example, if you were to add a heading named "Section 1" to your content that will not provide much detail as to what will be covered in the text below it. The Dining Hall example given below would be an example of meaningful headings since they are descriptive and follow the correct hierarchy. "Boiling Point" was chosen as a heading so that users could infer that the content within that section would relate to that food station.
Often, headings will have pre-styled formats. It is important that you do not choose which heading level to use simply based on its stylistic features. Doing so would not ensure that it is a meaningful heading. If you do not like the formatting style of the heading you are using, they can be modified. Visit our document type specific heading tutorials to learn more.
Documents should start with a Heading 1 (H1) and then proceed with a Heading 2 (H2), Heading 3 (H3), Heading 4 (H4), etc. Headings should descend upon the order of importance. The Heading 1 in a document would be the most important overarching concept. This would be followed by Heading 2s used for main concepts or section headings within that document or webpage. Heading levels should never be skipped for example from a Heading 1 to a Heading 3 but movement back from a Heading 4 to a Heading 2 is appropriate when used correctly. See the example below for more information on heading hierarchy.
There are many dining halls to choose from at Michigan State. We have just recently launched a new hall which avoids the use of all major food allergies. Within each dining hall there are sub stations to choose from which each feature different cuisines.
Brody Dining Hall is the largest dining hall on Michigan State's campus. It is usually a place of attraction for all new students and visitors. It has 11 different stations from which you can choose to eat at.
Features house-made noodles tossed with your choice of protein, vegetables, cheese and sauce
Grilled sandwiches including burgers, chicken, hot dogs and many other classics and specialty sandwiches plus golden French fries.
The Vista is located at the center of campus on Shaw lane. It is one of the more popular dining halls.
From the example above you can see that "Eat at State" is the main purpose of the content used to highlight the different dining hall options throughout campus. Since this is the main purpose "Eat at State" would be the Heading 1. "Brody Dining Hall" is a Heading 2 since it is a dining hall on campus and a main section to our content. "Boiling Point" and "Brimestone" are Heading 3s since they are stations at Brody Dining Hall and therefore subsections of "Brody Dining Hall". If "Boiling Point" had a separate "Calzone" station, then that would be a subtopic of "Boiling Point" and would be labeled a Heading 4.
A user should be able to understand what is going to be addressed in a document by navigating the headings or table of contents alone.
Correct Example:
It is okay to navigate from a heading level 4 to heading level 2 since the purpose is to re-establish that the next piece of content is separate from the content that proceeds it but has the same level of importance as the previous heading 2.
Correct Example:
As mentioned previously, skipping heading levels should be avoided. In the example above, we are able to move from a Heading 4 back to a Heading 2 because we are leaving a subsection and going back to a main section heading. However, going from a Heading 2 to a Heading 4 would be incorrect as we would be skipping over a Heading 3 in the middle. The example below shows an instance where heading levels are incorrect.
Incorrect Example:
For more information on how to properly tag headings in Microsoft Word, PowerPoint and PDF please refer to our tutorials linked below.