HTML Headings

HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.

  • The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> elements are used to create headings in descending order of importance
  • Avoid skipping heading levels: always start from <h1>, next use <h2>
  • You should consider avoiding using <h1> more than once on a page.

Importance of Headings

  • HTML headings provide valuable information by highlighting important topics and the structure of the document.
  • Don't use headings to make text BIG or bold.
  • Use it only for highlighting the heading of your document and to show the document structure.
  • As search engines use headings to index the structure and content of your web pages so use it very wisely in your webpage.
  • Use <h1> headings as main headings, followed by <h2> headings, then the less important <h3> headings, and so on.

Example Explained

<h1>I'm most important heading</h1>
<h2>I keep 2nd position of importance</h2>
<h3>It's me h3, I'm important to</h3>
<h4>Hello this is h4, less important than h3</h4>
<h5>I'm happy! I'm important than h6</h5>
<h6>I'm least important! but I don't care</h6>



I'm most important heading

I keep 2nd position of importance

It's me h3, I'm important to

Hello this is h4, less important than h3

I'm happy! I'm important than h6
I'm least important! but I don't care

Headings Are Important

Each time you place a heading tag, your web browser built-in style sheets automatically create some empty space before and after each heading.

Search engines use the headings to index the structure and content of your web pages.

It is important to use headings to show the document structure.

Bigger Headings (h1)

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property

    <h1 style="font-size:60px;">Heading 1</h1>

Why we are using html headings?

There are several reasons for which we uses HTML headings, see below points:

  • We uses HTML Headings to make a proper hierarchy of HTML document. In simple words heading is used to provide importance to a text about which we are going to describe.
  • Heading is the most important text, about which you are describing whole sentence in a document.
  • Heading tell search engine, your text in HTML document is what about.
  • We don’t use heading to make text or font bold.
  • We do not use heading for bigger font.

Extra importance of h tags in seo

After HTML Tutorial when we start SEO Tutorial then we will understand why heading is a most important element in HTML document as SEO point of view. Actually search engines algorithms are design in such a way, they looks for heading and give them more important to create ranking of your web page world-wide. Heading makes your HTML document more understandable by search engine so that if someone is searching regarding your web page content, if there is heading in your web page then search engine will understand immediately and give result of your web-page in search query."

HTML Heading Details

According to importance level of heading, in HTML there are 6 types of heading and these level are created by providing a number from 1,2.. to 6 follows to <h> element for example <h1>, <h2>,..

  • HTML heading importance is decreasing in order of h1,h2,..
  • h1 is the most important heading in HTML document, so always try to write most important heading of your web page in <h1> tag
  • H6 is the least important heading in HTML document, it used rarely.
  • In terms of font-size, it’s decreasing towards h1 to h6, i.e. h1 is biggest and h6 is smallest in font-size.
  • The search engine provides more important to h1 heading and least to h6
  • headings in HTML creates a space from all sides, to manage this space we use style attribute of heading, and manage it by providing padding value. Don’t worry about it we will learn in a grate way in CSS Tutorial.
  • By default h element in HTML document take width 100%.

USE of Attributes with HTML Headings

We can use several attributes to modify HTML Heading element. Basically we uses style attribute to change looks of a HTML heading like text colour, padding, margin etc. Not only style there are so many attributes which can be used to modify HTML Heading like Title, Id, Class, Align, Lang and much more.

Let’s take a example how we can use attributes to modify HTML Heading in a proper way according to need.


<h4 style="color:green;" id="my_head">This is heading with attributes</h4>


This is heading with attributes

In this way we can use attributes with HTML Heading, but keep one thing in mind it always depends on us how to use attribute accroding needs, there are no fixed rules to use attributes so you have to use your own thinking and own Intelligence for efficient use. This was all about to HTML Headings.

HTML Heading Tag Reference

Tag Description
<head> A Container for all the head elements (title, scripts, style & meta information)
<h1> to <h6> Defines HTML headings
<hr> Defines a thematic change in the content


GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved