HTML Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading and <h6> defines the least important. Browsers automatically add space (margin) before and after each heading.

Heading Hierarchy

Headings create a document outline. Search engines use headings to index the structure and content of your pages. Users often skim a page by its headings, so it is important to use them to show the document structure. Use headings only for actual headings — do not use them to make text bold or large.

<h1> — Page title, used once per page
<h2> — Major section headings
<h3> — Sub-sections within an h2
<h4>–<h6> — Deeper nesting, used sparingly

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Headings</title>
</head>
<body>
  <h1>Main Page Title</h1>
  <p>Introduction paragraph.</p>

  <h2>First Major Section</h2>
  <p>Content of section one.</p>

  <h3>Sub-section 1.1</h3>
  <p>More detail here.</p>

  <h2>Second Major Section</h2>
  <p>Content of section two.</p>

  <h3>Sub-section 2.1</h3>
  <p>Even more detail.</p>

  <h4>Deeper Level</h4>
  <p>Rarely needed, but available.</p>
</body>
</html>

HTML

Full Editor

Pro Tip

Use only one <h1> per page — it signals the primary topic to search engines. Nest headings in logical order (h1 → h2 → h3) without skipping levels to keep your document outline accessible.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned