Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
<h1> Tag in HTML

<h1> Tag in HTML

By Shirshak Maurya
4 mins read
Last updated: 4 May 2023
151 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

The <h1> tag in html represents the highest level of heading in the html document. Here highest level means that this heading should describe about the content of this web page. There are a total of six tags used for headings in html. These are <h1> to <h6> used to represent the different levels of headings, where the h1 tag in html is used to display the most important heading, here most important means that it should describe about the content of the html document. To read about HTML Tags click here.

Syntax

The h1 tag in html has a (<h1>) opening and (</h1>) closing tag, and the heading is written between these tags.

Example

This will be rendered as:

h1 tag in html by scaler topics

h1 tag in html

h1 tag in html is the most important heading

Attributes

There are no specific attributes applied to the h1 tag in html, Only global attributes are applied to the h1 tag in html.

Note: In HTML5 the align attribute is not supported, for this, we have to use CSS instead of align attribute.

Example of CSS syntax:

How to use <h1> tag in HTML?

  • The <h1> tag in html is the highest level of heading.
  • We should not use heading tags just to resize the text, we should use CSS font-size to resize the text.
  • We should use heading level starting from <h1> tag then <h2> and so on.
  • We should use only one h1 tag per page, it should describe the purpose of the html page.

Examples

  • The Six Different HTML Headings

There are six level of headings in html, <h1> to <h6>. <h1> being the most important heading.

This will be rendered as:

level 1 heading

level 2 heading

level 3 heading

level 4 heading

level 5 heading
level 6 heading

  • Set The Alignment Of Headings

We can set the alignment of the heading using CSS.

Example:

This will be rendered as:

Heading 1

Heading 2

Heading 3

Heading 4

  • Set The Background Color And Text Color Of Headings

We can set the background and text color of headings using CSS background-color and color property respectively. Example:

This will be rendered as:

Scaler Topics

Welcome to Scaler Topics

Happy Learning!

Accessibility Concerns

There are some accessibility concerns related to the headings in html that we should keep in mind while using the heading in HTML.

We should properly use the heading tag because not using it properly can cause confusion to the users, especially people who are using screen readers. A common navigation methodology the users of screen reading software use is to jump from headings levels to quickly figure out the contents of the document, and because of this it becomes very important for us to not skip the headings levels in html. If we skip a heading level it will create confusion for the user who is using screen reading software.

Improper Way

Proper Way

  • Labeling Section Content

Another common navigation methodology is to determine the layout of the html page and generate a list of sectioning content. Sectioning content can be defined using id and aria-labelledby attribute together.

Example:

Here in this example, the screen reading software will tell the user that there are two sections primary section and the footer section.

  • Nesting

Nested heading can be used in html to subsection the content of the html document. Generally, screen readers generate an ordered list of all headings defined on the html page, this can help the user quickly figure out the hierarchy of the html document.

Example:

In Nested headings, when we are closing a subsection then we may skip heading levels.

Browser Support

The list of browsers that support the <h1> tag is listed below:

  • Chrome
  • Edge
  • Firefox
  • IE
  • Safari
  • Opera
  • Webview android

Conclusion

  • There are six levels of headings in html, <h1> to <h6>.
  • <h1> is the highest level of heading in html.
  • h1 heading is rendered in large and bold text.
  • We should use only one h1 tag per page.