HTML Element: h1—h6

h1 - h6 elements represent headings for their respective sections of an HTML document.

Heading elements communicate a hierarchy, and each one has an independent heading level defined by the number in its name. When authoring content, headings form a nested structure, and the order in which they are used should begin with h1, the most important, going down to h6 if necessary.

Example

Syntax

  <h1>Getting Started with Web Design</h1>

  <h2>Welcome</h2>

  <p>Suspendisse sit amet odio et metus feugiat scelerisque eget ac enim. Quisque vel elit dui. Phasellus dui nunc, vehicula vel hendrerit a, lobortis eget magna. </p>

  <h2>The Basics</h2>

  <p>Est duis laboris sunt do consectetur aute. Praesent fermentum dictum erat eget cursus. Integer neque urna, eleifend a justo ac, placerat aliquam dui.</p>

  <h3>Color</h3>

  <p>Nulla tempus, nulla a bibendum placerat, magna diam convallis mauris, id tincidunt quam ligula id diam. Curabitur vel elementum ipsum, ut imperdiet sem. Fusce volutpat scelerisque congue.</p>

  <h4>Monochrome</h4>

  <p>Integer neque urna, eleifend a justo ac, placerat aliquam dui.</p>

  <h3>Typography</h3>

  <p>Sint dolore labore sit in cupidatat fugiat anim. Curabitur vel malesuada erat. </p>

  <h2>Should Web Designers Code?</h2>

  <p>Excepteur cillum ut occaecat aliqua fugiat irure minim velit anim. Aliquam pharetra nunc nulla, et rhoncus ante pellentesque sed.</p>

  <h3>Understanding the box-model</h3>

  <p>Ipsum nulla duis magna amet. Excepteur ipsum ullamco irure voluptate.</p>

Result

Document Outline

If we run the above HTML through an HTML outliner tool we can see how the browser interprets the structure our headings have dictated:

Browser Support

The HTML h1 - h6 elements are supported in all modern browsers. Read more on caniuse.com.

Attributes

h1 - h6 elements support Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

Content

h1- h6 elements support phrasing content.

SEO

When popular search engines index a web page, they crawl for the content they know how to decipher. One way to win a search engine’s favor is using proper semantic HTML and appropriate heading structure.

With h1-h6 elements, start from the most important headings (h1) and work your way down as necessary. Any additional heading is characterized as a subset of the one before. Search engines can identify this and help your content come back more richly or more accurately in search results when a user performs a query.

If an HTML document has multiple headings there can only be one h1, unless it’s contained inside another sectioning element like an article.

1	<h1>Getting Started with Web Design</h1>
2
3	<h2>Welcome</h2>
4
5	<p>Suspendisse sit amet odio et metus feugiat scelerisque eget ac enim. Quisque vel elit dui. Phasellus dui nunc, vehicula vel hendrerit a, lobortis eget magna. </p>
6
7	<h2>The Basics</h2>
8
9	<p>Est duis laboris sunt do consectetur aute. Praesent fermentum dictum erat eget cursus. Integer neque urna, eleifend a justo ac, placerat aliquam dui.</p>
10
11	<h3>Color</h3>
12
13	<p>Nulla tempus, nulla a bibendum placerat, magna diam convallis mauris, id tincidunt quam ligula id diam. Curabitur vel elementum ipsum, ut imperdiet sem. Fusce volutpat scelerisque congue.</p>
14
15	<h4>Monochrome</h4>
16
17	<p>Integer neque urna, eleifend a justo ac, placerat aliquam dui.</p>
18
19	<h3>Typography</h3>
20
21	<p>Sint dolore labore sit in cupidatat fugiat anim. Curabitur vel malesuada erat. </p>
22
23	<h2>Should Web Designers Code?</h2>
24
25	<p>Excepteur cillum ut occaecat aliqua fugiat irure minim velit anim. Aliquam pharetra nunc nulla, et rhoncus ante pellentesque sed.</p>
26
27	<h3>Understanding the box-model</h3>
28
29	<p>Ipsum nulla duis magna amet. Excepteur ipsum ullamco irure voluptate.</p>