HTML Headings | <h1> to <h6> tags

HTML Headings

HTML headings are defined with <h1> to <h6> tags. There are total six level of heading tags in HTML.

Level one heading is <h1> tag. This is the most important heading among all.

Next important heading is <h2> tag. Then comes <h3> and so on.

<h6> tag defines the least important heading in the HTML document.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

The output shows in a web browser:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Heading Size

They are also different in size. <h1> is the largest heading in size among them. <h6> is the smallest one.

Their size gets smaller gradually with the increase of heading number i.e. <h2> is the second largest then comes <h3>.

Every browser automatically adds some white space (margin) before and after the headings.

You can also change the default heading size. To give a custom size to a heading, you have to use a HTML attribute called style.

Use the CSS font-size property to give your suitable size.

<h2 style="font-size:30px;">Heading 2</h2>
<h2>Heading 2</h2>

The output shows in a web browser:

Heading 2

Heading 2

Learn more about HTML attributes, our tutorial – HTML Attributes

HTML <head> Element

Many people get confused about this tag because of its name. However, the truth is, it has nothing to do with HTML headings.

<head> element contains the Meta information of the document.

Basically, page title, meta, CSS links etc goes inside this element. Information of this element does not show up in the web browser.

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>Page title</title>
   <meta charset="UTF-8">
</head>
<body>

   ...

</body>
</html>

Importance of HTML Headings

  • HTML headings provide useful information by highlighting important topics and the structure of the html document.
  • As search engines use HTML headings to index the content of a web page. It plays very important role in case of Google ranking. Therefore, you should use it wisely.
  • HTML headings make a web page user friendly. It becomes very easy to find out information for a visitor.
  • Headings give a structured and decent look of your web page.

Usage of HTML Headings

  • Don’t use headings to make a text big or bold. Use it only for highlighting the content of your document and to create the document structure.
  • Avoid skipping HTML headings level. Use <h1> heading as main heading, followed by <h2> headings, and then other less important headings.
  • An HTML document generally should have exactly one <h1> element as the main heading. Don’t use more than one <h1> element in a single web page.
  • HTML headings are very important for search engine ranking. So, use your keywords inside the headings.

Time to practice:

OUTPUT