Scaler
Academy
Data Science
AI/ML
DevOps
Neovarsity
IITR Degree Program
New
Skill Test
Search for Articles, Topics
<h1> Tag in HTML

<h1> Tag in HTML

By Shirshak Maurya
4 mins read
Last updated: 4 May 2023
153 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

Transform Your Career

Choose from our industry-leading programs designed for career success

NSDC Certified

Modern Software and AI Engineering Program

Master full-stack development with AI integration

12 MonthsDuration
AI-LedCurriculum
Career SupportSupport
GoogleAmazonPaytm+1000 more
Go to Program
NSDC Certified

Modern Data Science and ML with specialisation in AI

Advanced data science techniques with AI specialization

12 MonthsDuration
AI-LedCurriculum
Career SupportSupport
GoogleAmazonPaytm+1000 more
Go to Program
NSDC Certified

Advanced AIML with Specialisation in Agentic AI

Deep dive into AIML with focus on Agentic systems

12 MonthsDuration
AI-LedCurriculum
Career SupportSupport
GoogleAmazonPaytm+1000 more
Go to Program
NSDC Certified

DevOps, Cloud & AI Platform Engineering

Build and manage AI-powered cloud infrastructure

12 MonthsDuration
AI-LedCurriculum
Career SupportSupport
GoogleAmazonPaytm+1000 more
Go to Program
NSDC Certified

AI Engineering Advanced Certification by IIT-Roorkee

Premier AI engineering certification from IIT-Roorkee

3 MonthsDuration
AI-LedCurriculum
Career SupportSupport
Program highlights
Go to Program

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

  • Scaler Placement Report and Statistics

    ₹23L
    AVG CTC
    SCALER PLACEMENT PROOF

    Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.

    11,000+placements
    650+companies
    Verified data

    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

Scaler Placement Report and Statistics

₹23L
AVG CTC
SCALER PLACEMENT PROOF

Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.

11,000+placements
650+companies
Verified data

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.
Hiring Partners:
GoogleGoogleAmazonAmazonMicrosoftMicrosoftFlipkartFlipkartAdobeAdobe1200+ more