Skip to HeaderSkip to PostSkip to Footer

HTML Headings

HTML Headings - The following is a summary of the HTML headings tag/element.

What are HTML Headings?

HTML Headings or <h1>, <h2>, <h3>, <h4>, <h5>, <h6> is an HTML element that functions to display document headings on web pages.

HTML Headings only have 6 types of starting tags namely <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Apart from these six tags, it is not a valid HTML heading.

Elements such as <h7> or <h8> will still be displayed by the browser but do not place any emphasis on the screen reader that the element those are headings.

Screen readers and web crawlers read HTML Headings in priority order with <h1> as the most important, then <h2> and so on until <h6> is the heading with the least priority.

Tips: Using HTML Headings helps search engine crawlers to determine which article title and which subtitle. So, it's good to optimize the use of HTML Heading in web/blog content.

Default Stylesheet

HTML Element Default Stylesheet Pixel Height
  • Font Size: 2em
  • Font Weight: bolder
32 px
  • Font Size: 1.5em
  • Font Weight: bolder
24 px
  • Font Size: 1.17em
  • Font Weight: bolder
18.72 px
  • Font Size: 1em
  • Font Weight: bolder
16 px
  • Font Size: .83em
  • Font Weight: bolder
13.28 px
  • Font Size: .67em
  • Font Weight: bolder
10.72 px

Attributes and Functions

Attribute Function Value Example
class Contains class selector for CSS Styling. class-selector <h1 class='heading1'>Title of the Article</h1>
id Contains the unique code id selector for CSS Styling and element targeting. id-selector <h1 id='heading1'>Title of the Article</h1>
style Contains CSS styling code for images. CSS Value <h1 style='font-size:3rem'>Title of the Article</h1>

Example of Implementation

The following code is a sample code that will be implemented as an example.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Note: The sizes that appear in the results section are already affected by CSS Styling, so they don't appear as default.


  • Use HTML Headings in order of priority. Skipping usage on documents is not recommended.


That's a little summary of HTML Headings that I can share. If something is missing, unclear, or wrong, please let me know or just ask through the comments column below. Hopefully useful and see you in my other posts.

Headings really help content readers understand every part of the content on the webpage.Ninura


Our Projects