Home >> html >> HTML Headings

HTML Headings

The heading elements H1, H2, H3, H4, H5, and H6 are defined in HTML as six levels of headings. The highest or most important level is H1, and the lowest or least important level is H6. These distinct heading levels aid in expressing the content's order and hierarchy on a page.

See the below example

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

Try with example

Output:

Headings with an equal or higher ranking, for example, indicate the beginning of a new section, while headings with a lower rank imply the beginning of a new subcategory within a higher-ranked section.

Headings and assistive technology are covered in section two. Assistive technologies will be able to display the heading state of text to users using heading markup. Screen reader users, for example, can distinguish heading markup and declare the text as a heading with a level. Users can also traverse web pages using header levels with screen readers. This allows people to find relevant articles quickly.

The importance of heading levels is discussed in the third section. Jumping from an H1 to an H3 level, for example, can be confusing for all sorts of users and should be avoided wherever feasible. For example, having an H4 heading immediately following an H2 heading is generally not regarded a good training.

When closing a subsection, however, it is allowed to skip heading levels. An H2 element, for example, can start a new section right after an H4, which was the previous section's last subsection.

Fixed page sections are another example where heading levels aren't as important. A sidebar, which lies beside the main content of the page, is an example of content within a sidebar. The heading levels in a sidebar should not alter based on the heading levels in the main section. Consistency among pages is more crucial than consistency inside a page in many circumstances.

Using headings as labels in section four. Headings can be used to help assistive technologies identify parts of a page. The aria-labelled by attribute, for example, can be used to link a heading to a page region. The region is clearly identifiable for all users if the titles are visible. Another example is using a modal widget as a heading. The H4 is employed as the modal's heading in this example.

Some heading rules in Section 5. The first criterion is that headings must be informative. All headings should be informative and informative. The content within each part should be described by the headings. More and Next Section should not be used as headings.

Another criterion is that classes are not to be confused with headings. Some authors give non-heading items head classes and then style them to look like headings. Assistive technologies do not treat these elements as heading elements since they often have no semantic relevance. This method should not be employed.

Empty headings should be avoided. On a page, there should be no empty heading components. Assistive technologies, particularly those that navigate by headers, may become confused as a result of this. Starting with an H1, every page should have a heading. Every page should have headings to make it easier to discover content parts, and each page should have headings that are in a logical order. All pages should, ideally, begin with an H1. However, there may be exceptions in certain circumstances, such as when a primary heading follows a website navigation.

All-caps headings should be avoided. All-caps headings should be avoided by authors since they can cause problems for some assistive technology users when the heading material is announced.

Long headings should be avoided. Heading material should ideally be under 100 characters long, as longer headings can cause complications for assistive technology users who navigate using headings.

Conclusion. So there you have it, a quick primer on headers.

Unless otherwise stated, this work is licensed under the Creative Commons Attribution Share Alike 4.0 license, copyright 2018 California Community Colleges Chancellor's Office. The creative commons attribution 4.0 international license applies to these works. They are open to the public and can be repurposed to fulfil the specific requirements of educational institutions.

-Advertisement-