Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags


What are h1 to h6 tags in HTML?

Hassaan Waqar

Headings are represented in HTML using heading elements. These range from h1-h6. Each heading is bold and has a different font size starting from h1 being the largest and h6 being the smallest.

Headings are used to separate portions of a webpage to improve navigation for the user. Headings of various fonts can allow us to use different headings for components such as titles, subtitles, sub-headings, and captions.


The syntax of the heading elements is as follows:

<h1> This is Heading 1 </h1>

We begin by opening the tags using the <> sign. In between, we write the name of the element. It can range from h1 to h6 in our case. We then close the tags by using the </> sign. Once again, we will place the name of our tag in between <> and after the / symbol. Any text written between these tags will appear as a heading. All other heading elements can be written in a similar manner:

<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>


The following code snippet outputs each of the headings:

  • HTML

We can also use CSS within the heading tags in order to style each heading. The syntax below shows how it can be done:

<h1 style = attribute:value"> Heading </h1>

Inside the heading tags, we can add the style command that allows an attribute and its value.

Attributes refer to characteristics of the heading. These include background-color, color, text-align font-size etc.

A value is assigned to each attribute.

The code snippet below style each heading differently:

background-color changes the background color of the heading.

text-align positions the heading to either right, left, or center of the screen (as specified).

color changes the font color of the heading.

  • HTML




Hassaan Waqar
Copyright ©2022 Educative, Inc. All rights reserved

View all Courses

Keep Exploring