Transcript
PRESENTER: This tutorial explores HTML headings. We're going to cover HTML headings, headings and assistive technologies, the importance of heading levels, using headings as labels, and some heading rules.
Section one, HTML headings. HTML defines six levels of headings, and these heading elements are H1, H2, H3, H4, H5, and H6. The H1 element is the highest or most important level, and the H6 element is the least important. These different heading levels help to communicate the organization and hierarchy of the content on a page. For example, headings with an equal or higher ranking indicate the start of a new section, and headings with a lower rank indicate the start of a new subsection that is part of a higher-ranked section.
Section two, headings and assistive technologies. Heading markup will allow assistive technologies to present the heading status of text to a user. For example, screen reader users can recognize heading markup, and announce the text as a heading, along with a heading level. Screen readers also allow users to navigate web pages via heading levels. This allows users to quickly find the content of interest.
Section three, the importance of heading levels. Skipping heading levels, for example, jumping from an H1 to an H3, can be confusing for all types of users, and should be avoided where possible. For example, it's generally not considered a good practice to have an H4 heading directly after an H2 heading.
However, it's acceptable to skip heading levels when closing a subsection. For example, an H2 element can begin a new section directly after an H4, which was the last subsection within the previous section.
Another example where heading levels are not as relevant is fixed page sections. An example could be the content within a sidebar, which sits beside the main content of the page. In a sidebar, heading levels should not change depending on the heading levels in the content area. In these cases, consistency across pages is more important than consistency within a page.
Section four, using headings as labels. Headings can be used to help label regions of a page for assistive technologies. For example the aria-labelledby attribute can be used to associate a heading with an overall page region. If the headings are visible the region is easily identifiable for all users. Another example would be heading with a modal widget. In this example, an H4 is used as the heading inside the modal.
Section 5, some heading rules. The first rule is that headings should be meaningful. All headings should be descriptive and meaningful. Headings should describe the content within that section. Authors should avoid headings such as More and Next Section.
Another rule is that classes are not headings. Some authors head classes to non-heading elements, and then style these elements to look like headings. However these elements often have no semantic meaning, and are not treated as heading elements by assistive technologies. This technique should not be used.
Headings should not be empty. There should be no empty heading elements on a page. This can cause confusion for assistive technologies, especially those who are navigating via headings. Every page should have a heading, starting with an H1. Every page should have headings to help to find sections of content, and every page should have headings that follow a logical sequence. Ideally all pages should start with an H1. However there may be some exceptions in specific cases, such as if a main heading comes after a website navigation.
Avoid all-cap headings. Authors should avoid headings that are written in all caps, as these can present issues for some assistive technology users when the heading content is announced.
Avoid over-use of headings. Headings should be used to provide structure and meaningful content. They should not be used for site titles or for hidden structural labels. See the landmark roles video for information on how to add structure to HTML pages.
Avoid long headings. Ideally heading content should be under 100 characters in length, as otherwise, they are too long, and this can cause issues for assistive technology users who navigate via headings.
Conclusion. So there you have it, a simple explanation of headings.
Except where otherwise noted, this work is licensed under Creative Commons by attribution ShareAlike 4.0 license, copyright 2018, California Community Colleges Chancellor's office. These works are licensed under creative commons attribution 4.0 international license. They are available to everyone, and may be repurposed to meet the unique needs of educational institutions.