Headings
Use proper heading elements to indicate the page’s content structure
The arrangement of the content on the page is communicated through headings. They can be used by web browsers, plug-ins, and assistive technologies to allow in-page navigation.
Heading Ranks
Rank the headings in order of importance (or level). The most important heading has the rank of 1 (<h1>), the least important heading rank 6 (<h6>). Headings with the same or higher rank begin a new section, while headings with a lower rank begin new subsections within the higher-ranked section.
Can be confusing, therefore, it is best to check and ensure the headings on the page are in semantic order.
Example: Make sure a <h2> is not immediately followed by a <h4>
Heading and arrangement
HTML headers are numbered from 1 to 6, with 1 being the highest and 6 being the lowest. The content of a well-designed web page is outlined by its headings.
The first level of the outline is the "highest". To show the page's primary content, use a <h1> element.
Subdivisions are denoted by a higher number. The headings should form a well-organized hierarchy when they're all put together. As an example:
-
Heading level 1
-
Heading level 2
-
Heading level 3
-
-
Heading level 2
-
Heading level 3
-
Heading level 4
-
-
-
Pros:
These measures enable assistive technology users to:
- Recognize the numerous portions (or subjects) covered on the page
- Comprehend distinct areas of related content
- Swiftly browse to any specific component
- Make it possible for search engines to figure out