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.