HTML HEADINGS

❮ Prev Next ❯

HTML headings are used for giving headlines to the web page.There are six levels of HTML heading and are defined with <h1> to <h6>.

<h1> is the most important heading element and content written in this element has the biggest size whereas <h6> is least important and has smallest content size among all heading elements.

HTML headings

First level heading <h1>

Second level heading <h2>

Third level heading <h3>

Fourth level heading <h4>

Fifth level heading <h5>

Sixth level heading <h6>

Note: Browser makes the content enclosed in heading tag bold. Don't use heading tag just for making content bold it is used by search engine.(see below)

Here is an Example:

<h1>First level (h1)<h1/>
<h2>second level (h2)<h2/>
<h3>Third level (h3)<h3/>
<h4>Fourth level (h4)<h4/>
<h5>Fifth level (h5)<h5/>
<h6>Sixth level (h6)<h6/>

Try It

Importance of heading

HTML headings are used for indexing structure and contents of web pages by search engine.Users unknowingly use heading elements for making content bigger and bold which is not recommended.

Heading tags should only be used in indexing web pages.You can provide <h1> as main heading, <h2> as second important heading and so on up to <h6>.

Heading Style

We can add style (CSS) to headings and can make elements colorful,bigger,smaller etc.

<h1 style="font-size:30px;">font-size of h1 changed to 20px(default size of h1 is 32px).</h1>

We can also add class,Id,attribute to these elements.Here is an example of color to heading element.

<h3 style="color:green;">color of h3 tag changed to brown.</h3>

Here is a working example of heading style.

<!DOCTYPE html>
<html>

<head>
  <title> Title of page </title>
</head>

<body>
  <h1 style="font-size:30px;">font-size of h1 changed to 20px(default size of h1 is 32px)</h1>
  <h2 style="color:green;">color of h2 tag changed to brown</h2>
</body>

</html>

Try It

Output:

font-size of h1 changed to 20px(default size of h1 is 32px)

color of h3 tag changed to brown

❮ Prev Next ❯