Codectionary / Developer documentation / HTML

<h1> - <h6>

The heading elements <h1> through <h6> represent six levels of section headings, with <h1> being the most important and <h6> the least. Headings create a document outline that both sighted users and assistive technologies rely on to understand and navigate page structure. Search engines also use heading hierarchy to interpret content relevance. Each page should typically have exactly one <h1> describing its main topic, with subsequent headings nested logically to reflect the content hierarchy.

Syntax

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

Examples

Basic Heading Hierarchy

A properly nested heading structure for an article.

<h1>How to Bake Bread</h1>
<h2>Ingredients</h2>
<h2>Instructions</h2>
<h3>Preparing the Dough</h3>
<h3>Baking</h3>

Page Layout with Headings

Using headings to structure a typical page layout.

<h1>Codectionary Blog</h1>
<article>
  <h2>Understanding Closures in JavaScript</h2>
  <h3>What is a Closure?</h3>
  <p>A closure gives a function access to its outer scope...</p>
  <h3>Common Use Cases</h3>
</article>

Styled Headings

Applying custom styles while preserving semantic meaning.

<h1 style="font-size: 2.5rem; color: #1a1a1a; border-bottom: 3px solid #3b82f6; padding-bottom: 8px;">Welcome</h1>
<h2 style="font-size: 1.5rem; color: #4b5563;">Getting Started</h2>

Best practices

  • Use exactly one <h1> per page that describes the main content
  • Never skip heading levels (e.g., going from <h2> straight to <h4>) as it breaks the document outline
  • Choose heading levels based on document structure, not visual size — use CSS for styling instead
  • Keep heading text concise and descriptive so it makes sense out of context (screen reader users often navigate by headings alone)
  • Avoid using headings purely for visual emphasis on text that is not actually a section title

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation

<span>
The <span> element is an inline container used to group and style specific portions of text or inline elements. Unlike <div>, which is block-level, <span> doesn't break the flow of content. It's perfect for applying styles or manipulating specific words or phrases within a paragraph without affecting the surrounding content.<p>
The <p> element represents a paragraph of text — one of the most fundamental building blocks of written content on the web. Browsers automatically add margin above and below paragraphs to visually separate them. The <p> element cannot contain other block-level elements like <div> or headings, only inline content and text. It is a block-level element, meaning it always starts on a new line.Text Formatting: <strong>, <em>, <b>, <i>, <mark>, <small>
HTML provides several inline elements for formatting text with semantic and visual meaning. <strong> indicates strong importance (typically rendered bold), and <em> indicates stress emphasis (typically rendered italic) — both carry semantic weight that screen readers can announce. <b> and <i> are their purely visual counterparts, used when bold/italic styling is needed without implying importance or emphasis. <mark> highlights text as relevant to the current context, and <small> represents side comments like fine print or disclaimers.<br>, <hr>
These are two simple void (self-closing) elements for controlling text flow. <br> inserts a single line break within text, forcing the next content onto a new line without starting a new paragraph. <hr> represents a thematic break between paragraph-level content — visually rendered as a horizontal line, but semantically indicating a shift in topic, such as a scene change in a story or a new section.