HTML Headings

Understanding HTML Headings

HTML headings define titles and section headings within a webpage. HTML provides six heading levels, from <h1> for the highest-level heading through <h6> for the lowest-level heading.

Headings organize content into a logical hierarchy that makes a page easier for visitors to scan and understand. A well-structured heading hierarchy also helps assistive technologies and search engines understand how the sections of a page relate to one another.

HTML Heading Levels

HTML includes six heading elements. The number in the element name represents its level in the document hierarchy rather than simply determining how large the text appears.

• <h1> — highest-level heading
• <h2> — second-level heading
• <h3> — third-level heading
• <h4> — fourth-level heading
• <h5> — fifth-level heading
• <h6> — lowest-level heading

Heading levels should describe the structure of the content. Lower-level headings introduce subsections belonging to the higher-level heading above them.

HTML Heading Example

Each heading is created by placing the heading text between an opening and closing heading tag.

<h1>Main Page Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Fourth-Level Heading</h4>
<h5>Fifth-Level Heading</h5>
<h6>Sixth-Level Heading</h6>

The browser gives headings default styles so the different levels can usually be distinguished visually. Their appearance can later be changed with CSS without changing their structural meaning.

Heading Hierarchy

Heading levels create a hierarchy similar to the outline of a document. An <h2> normally introduces a major section beneath the <h1>, while an <h3> introduces a subsection of the preceding <h2>.

<h1>Learning HTML</h1>
<h2>HTML Basics</h2>
<h3>HTML Elements</h3>
<h3>HTML Attributes</h3>
<h2>Working with Text</h2>
<h3>HTML Headings</h3>
<h3>HTML Paragraphs</h3>

Think of headings as an outline of the page. Sections at the same level use the same heading level, while subsections move down one level.

The <h1> Heading

The <h1> element represents the highest-level heading for the content. On a typical webpage, it is commonly used for the main title that identifies the primary subject of the page.

<h1>HTML Headings</h1>

Using one clear main <h1> heading is a simple and predictable approach for most webpages. Additional sections can then be organized beneath it with <h2> through <h6> as needed.

Heading Appearance

Web browsers apply built-in styles to heading elements. An <h1> is normally displayed larger and more prominently than an <h2>, with progressively different default styles through <h6>.

Heading elements should not be selected simply because their default size looks right. Choose a heading level according to the structure of the content, then use CSS to control its font size, weight, color, spacing, and other visual properties.

h2 {
  font-size: 2rem;
  font-weight: 600;
}

Headings and Accessibility

Headings provide important structural information for people using assistive technologies. Screen-reader users can use headings to understand the organization of a page and navigate directly between its sections.

Use meaningful heading text and maintain a logical hierarchy. Avoid choosing heading levels solely for visual appearance or using bold paragraphs as substitutes for actual heading elements.

Heading Best Practices

• Use headings to describe the structure and organization of the content.
• Use a clear <h1> for the primary page heading.
• Use <h2> elements for major sections beneath the main heading.
• Use lower heading levels for subsections when the content requires them.
• Keep heading text descriptive and relevant to the content that follows.
• Do not choose a heading level simply because you prefer its default font size.
• Use CSS to control the visual appearance of headings.
• Avoid using headings merely to make ordinary text appear larger or bolder.

Summary

HTML provides six heading elements, <h1> through <h6>, for organizing webpage content into a meaningful hierarchy. Heading levels describe the structure of the content, while CSS should be used to control how headings look.