HTML HEADINGS


A HTML heading can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags <h1></h1>,
it is displayed on the browser in the bold format and size of the text depends on the number of heading.

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.

Headings in HTML helps the search engine to understand and index the structure of a web page.

Tip: The main keyword of the whole content of a webpage should be displayed by h1 heading tag


Example:


<!DOCTYPE html>
<html>
<head>
<title> My First HTML Page </title>
</head>
<body>

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

</body>
</html>
Live Demo!


Output:

Heading no. 1

Heading no. 2

Heading no. 3

Heading no. 4

Heading no. 5
Heading no. 6


You can change the default size of the headings. Set the size of any heading with the CSS font property.


IMPORTANCE OF HEADINGS


  • HTML headings highlight important topics and the document structure, thus improving user engagement.
  • Use only one <h1> tag on any web page. The tag must describe what your page is about and also contain a keyword to improve rankings in Google.
  • Don't use headings to make your text look BIG or bold. Use them only for highlighting the heading of your document and to show the document structure.
  • Since search engines, such as Google, use headings to index the structure and content of the web pages so use them very wisely in your webpage.

These are different codes to display the way to use heading elements.


Example:


<!DOCTYPE html>
<html>
<head>
<title> My First HTML Page </title>
</head>
<body>

<h1> This is main heading of page </h1>
<p> h1 is most important heading, which is
used to display the keyword on page </p>
<h2> This is first sub-heading </h2>
<p> h2 describe the first sub heading
of the page </p>
<h3> This is Second sub-heading </h3>
<p> h3 describe the second sub heading
of the page. </p>
<p> We can use h1 to h6 tags to use the
different sub-heading with their paragraph
if required. </p>

</body>
</html>
Live Demo!


Output:

This is main heading of page

h1 is most important heading, which is used to display the keyword on page

This is first sub-heading

h2 describe the first sub heading of the page

This is Second sub-heading

h3 describe the second sub heading of the page.

We can use h1 to h6 tags to use the different sub-heading with their paragraph if required.