HTML Headings

HTML Headings are defined by six levels from <h1> to <h6> tags. If you notice that the headings only have the digits (1-6) after “h” character. And the digits represent the headings from the highest-level to the lowest-level in sequence. It means <h1> is the most important heading and <h6> is the least important heading on the page.

Example Try this Code
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>

Default Style Sheet of Headings

By default, browser use almost same style sheets for the headings, only difference in font-size and margin.

The default style sheet of h1 ─

Default CSS style of HTML Headings

Accessing the User Agent Style Sheet

If you want to see the default style sheet or access the DevTools in Chrome or Firefox ─

  • Use Ctrl+Shift+I or Cmd+Opt+I (on Mac) to open the DevTools.
    ─ Or, click the Chrome Menu Chrome Menu Icon at the top-right of your browser window, then select More tools Developer tools.
  • Right-click on any element in the page and select Inspect (Chrome) or Inspect Element (Q) (Firefox) to see its default style sheet.
    ─ Or, use Ctrl+Shift+C, then select an element in the page to inspect it.
    ─ Or, click the Selection icon Select an Element Icon in Chrome DevTools Window once at the left-right of DevTools Window, then select an element in the page to inspect it.

I provided an animated image below to make it more easy to you.

How to Inspect an Element with Chrome DevTools

How to Inspect an Element with Chrome DevTools clicking Right-button.

Usage of HTML Headings

  • Don’t use the headings to make any text big or bold. Use <b> or <strong> tags to make any text bold and use custom CSS to make any text big.
  • Search engines use the headings to index the structure of the content of your web pages .
  • h1 should be main heading for a web page, followed by h2 headings, then the less important h3, and so on.
  • Use headings to show the document structure.

An Example Web Page

Here is an example, a web page should follow this structure ─

Example Try this Code
<h1>Heading h1</h1>
<p>Some text here...</p>

<h2>Heading h2</h2>
<p>Some text about heading h2...</p>

<h3>Heading h3</h3>
<p>Some text about Heading h3...</p>

<h3>Heading h3</h3>
<p>Some text about Heading h3...</p>

<h2>Heading h2</h2>
<p>Some text about heading h2...</p>
Tip: Use <h1> heading only once per page, you can use other headings for one or more times. h1 heading is the most important of a web page.