FactorPad
Faster Learning Tutorials

HTML h1 tag to h6 tag for headings

The six heading tags create section introductions of different sizes making the flow of content consistent and easy to read.
  1. About - Understand the purpose of the h1 to h6 tags.
  2. Syntax - Describe how they are used.
  3. Settings - View required and optional attributes plus default behaviors.
  4. Examples - Review code examples.
by Paul Alan Davis, September 6, 2018
Updated: December 14, 2018
The six HTML heading tags are coded similarly, so this page covers all six. Keep reading to master six easy HTML tags all at once.

Outline Back Next

~/ home  / tech  / html5  / reference  / html h1 tag


HTML h1, h2, h3, h4, h5 and h6 heading tags

Beginner

The six heading tags, <h1> to <h6>, add a text heading between paragraphs or sections in an HTML document.

Specifications for font, line thickness, color and pattern are set in CSS. So headings themselves do not have their own attributes.

Since the only difference between the six heading tags is the number in the tag, all six will be covered in this reference.

HTML Tags Reference

1. About the HTML h1 to h6 heading tags

The <h1> to <h6> tags only occurs in the <body>, so the visible section of the document.

From there, headings are normally inserted into larger blocks, like within <div> elements, often forming breaks between <p> paragraph elements.

As a block-level element, headings take up the whole horizontal space of the surrounding container or parent element by default. So HTML code that comes after the heading tag will start on a new line.

So the <h1> to <h6> tags are as much about document structure as they are about text itself.

2. Syntax for the HTML h1 to h6 heading tags

Each of the six heading elements require opening <h1> and closing </h1> tags. The text within the tags is displayed.

Unlike other most other elements, headings have no attributes in HTML5. Of course global attributes apply, as they do with all elements.

Because headings form outlines for screen readers and maintain document structure, using them in order is advised.

Also, it is common to have only one <h1> heading in a document. This sometimes matches the <title> element, but is not required to.

Sample HTML input
<body> <h3>Heading 3</h3> <p> A paragraph under heading 3 using the factorpad.com CSS. </p> <h4>Heading 4</h4> <p> First paragraph under heading 4. </p> <h4>Heading 4</h4> <p> Second paragraph under heading 4. </p> <h5>Heading 5</h5> <p> Think of headings as forming an outline and use them in order. So don't follow h3 with h5. Here is a heading 5 below heading 4. </p> </body>

HTML code input above will appear as shown below.

Sample HTML output

Heading 3

A paragaph under heading 3 using the factorpad.com CSS.

Heading 4

First paragraph under heading 4.

Heading 4

Second paragraph under heading 4.

Heading 5

Think of headings as forming an outline and use them in order. So don't follow h3 with h5. Here is a heading 5 below heading 4.

3. Settings for the HTML hr tag

As with all tags, global attributes can always be set, like with id="name".

Attributes and values for the hr tag

As mentioned, the <h1> and other heading elements don't have their own attributes, or they would be detailed here.

Each browser (Chrome, Safari, Firefox) has its own settings for when customized CSS settings are not provided. By default, the size of the font and the margin above and below the element declines as you move from <h1> to <h6>. This visually shows the rank order by size, from largest to smallest.

Default behaviors

Each user-agent (browser) has its own stylesheet per se. This dictates how that browser styles each element by default. The Chrome browser styles the <h1> to <h6> elements using the following specifications. The default font is Times New Roman and em, or default font size, is 16px.

h1 { display: block; font-size: 2em; margin-block-start; 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } h2 { display: block; font-size: 1.5em; margin-block-start; 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } h3 { display: block; font-size: 1.17em; margin-block-start; 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } h4 { display: block; margin-block-start; 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } h5 { display: block; font-size: 0.83em; margin-block-start; 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } h6 { display: block; font-size: 0.67em; margin-block-start; 2.33em; margin-block-end: 2.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; }

Note that for the <h4> tag font-size: is missing, which means that the default of 1em holds.

4. Examples of the HTML h1 to h6 heading tags

Example 1 - Create a web page with an h1 element and title element

The following HTML code will create a web page with <title> element content that closely resembles the content in the <h1> element.

<html> <head> <title>How to use the h1 tag by FactorPad</title> </head> <body> <h1>How to use the h1 tag</h1> <p> It is advised to use only one <h1> tag in an HTML document and the text should closely resemble the <title> element. </p> <p> Both have different purposes. The contents of the <title> element show up at the top of the browser, and are used by search engines. The <h1> element contents will likely be the first sentence the user reads. Like a title. </p> </body> </html>
Example 2 - Create a web page that resembles an outline

The following HTML code will create a web page with heading tags placed as though they created an outline of the document, with proper nesting.

<html> <head> <title>SEO-friendly page title</title> </head> <body> <h1>User-friendly title</h1> <h2>How to write a web page</h2> <h3>Start with headings</h3> <h3>Fill in paragraphs later</h3> <h2>The title and h1 are related</h2> <h3>They can be worded differently</h3> <h3>They should be consistent</h3> <h2>Why does this work?</h2> <h3>Search engines rank pages by title</h3> <h3>Readers want a catchy opening</h3> </body> </html>

So this document shell can be filled with text after the author sets up the structure with heading elements.

Learning takes practice. Type these lines into a text file, save it with an .html extension and open it in a browser.

After that, start taking notes and writing in HTML to gain experience.


Other Related HTML Content

The <h1> to <h6> headings sit between paragraph elements, and that sits in the body element.


What's Next?

See what else you can learn for free at our YouTube Channel. Subscribe here.

  • For the complete HTML tag list, click Outline.
  • To learn about the <hr /> tag, click Back.
  • While we are working on new content the Next button is disabled.

Outline Back Next

~/ home  / tech  / html5  / reference  / html hr tag



 
 
Keywords:
html h1 tag
html heading tag
html h2 tag
h1 element
h1 tags seo
html h3 tag
h1 style
html h4 tag
html heading tag defaults
seo h1 tags best practice
html h5 tag
html title element
html h6 tag
h2 style
h2 element
html heading element defaults