HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

HTML headings are defined with the h1 to h6 tags. Each tag represents a different level of content in the document.

In html, h1 tag defines the most important heading and h6 tag defines the least important heading . Also, h1 headings are displayed in largest font, whereas h6 headings are displayed in smallest font.

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>

Output

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Note: Browsers automatically add some margin (white space around heading) before and after a heading.

It is also used for headings sizes, heading align center, heading font size, heading alignment, heading styles

Headings Are Important

Headings are used by search engines (like google, yahoo, bing and etc) to index the structure and content of your web pages.

Users frequently skim a page based on its headings. It is important to use headings to display the structure of the document. Therefore, while creating the heading should be carefully optimized to increase user engagement.

For main headings, use h1 headings, followed by h2 sub-headings, then the less important h3 sub-subheadings, and so on.

Please keep in mind that HTML headings should only be used for headings. Headings should not be used to make text BIG or BOLD.

It is also used for why headings and subheadings are important, why are headings important for accessibility, why are table headings important

Bigger Headings

There is a standard size for each HTML heading.

These sizes are fixed and you cannot change them through HTML.

However, we can use CSS to change the size of any HTML heading.

The CSS font-size property can be used to specify the size of any heading using the style attribute from HTML.

<h1>This is the default size of the H1 tag.</h1>
<h1 style="font-size:60px;">This is the modified size of the H1 tag.</h1>

Output

This is the default size of the H1 tag.

This is the modified size of the H1 tag.


It is also used for biggest heading tag in html, why we use h1 tag in html, uses of h1 tag, h1 tag size