TRENDING TOPICS

×

HTML Headings

The HTML headings used to define in the six levels of the HTML web page. Actually, a heading element implies all the font changes, paragraph breaks before and after, and also any white space necessary to render the heading.

The heading elements are represented by h1, h2, h3, h4, h5, and h6. The h1 is the highest level (or most important to help in page SEO) 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 it 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>H1 is the most important heading.</h1>
<h2>H2 keeps 2nd position of importance.</h2>
<h3>It's me H3, H3 important too.</h3>
<h4>Hello this is H4, less important than H3.</h4>
<h5>I'm happy! H5 is important than H6.</h5>
<h6>H6 is least important!</h6>

Output

                                            

H1 is the most important heading.

H2 keeps 2nd position of importance.

It's me H3, H3 important too.

Hello this is H4, less important than H3.

I'm happy! H5 is important than H6.
H6 is least important!

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 and every HTML heading tag has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property.

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

Why we are using HTML headings?

There are several reasons for which you can use HTML headings, for more understanding see the below-mentioned points:

  • You can use HTML headings to make a proper hierarchy of HTML documents. In simple words, a heading is used to provide importance to a text about which we are going to describe.
  • The heading is the most important text, about which you are describing the whole sentence in a document.
  • The heading tells the search engine, your text in an HTML document is about.
  • The heading doesn’t use to make text or font bold.
  • You do not use heading for the bigger font.

Extra Importance of h tags in SEO

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

HTML Heading Details

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

  • The HTML heading importance is decreasing in order of h1,h2,...
  • H1 is the most important heading in an HTML document, so always try to write the most important heading of your web page in the <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 you use the style attribute of heading and manage it by providing padding value. Don’t worry about it you will learn in a great way in the CSS tutorial.
  • By default h element in an HTML document takes a width of 100%.

USE of Attributes with HTML Headings

You can use several attributes to modify the HTML heading element. Basically, you use style attribute to change looks of an 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 an example of how you can use attributes to modify HTML heading in a proper way according to need.

Example

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

Output

This is heading with attributes.

In this way, You can use attributes with HTML heading, but keep one thing in mind it always depends on us how to use attribute according to 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

Advertise With Us

We offer sponsored posts and guest posts with do-follow links, back-links, and other advertising services, To advertise email us at "advertise@gdatamart.com"

© 2021 GDATAMART.COM (All Rights Reserved)