How to create headings in HTML page?

HTML Web Development Front End Technology

Headings are the titles or the subtitles of the content that you want to display on the web page. Headings help us to get an idea on the content on the web page. Headings and subheadings represent the key concepts ideas and supporting ideas in the content of the web page. HTML have different level of heading tags.

Heading is defined with <h1> to <h6> tags. It is important to use headings to show the HTML document structure. <h1> headings should be used for main headings, followed by <h2> headings, then <h3>, and so on up to <h6>.

Syntax

Following is the syntax for heading tags. We use these tags inside the body tags to specify the title for the <p> tag inside the body.

<h1>Content of the heading1</h1>
<h2>Content of the heading2</h2>
<h3>Content of the heading3</h3>
<h4>Content of the heading4</h4>
<h5>Content of the heading5</h5>
<h6>Content of the heading6</h6>

Example

Below is the example program for the using a single heading tag.


<!DOCTYPE html>
<html>
<head>
   <title>Title of the page</title>
</head>
<body>
   <h1>HTML Articles - Heading1 tag</h1>
</body>
</html>

Example

Below is the example program for the using different heading tags.


<!DOCTYPE html>
<html>
<head>
   <title>Title of the page</title>
</head>
<body>
   <h1>HTML Articles - Heading1 tag</h1>
   <h2>HTML Articles - Heading2 tag</h2>
   <h3>HTML Articles - Heading3 tag</h3>
   <h4>HTML Articles - Heading4 tag</h4>
   <h5>HTML Articles - Heading5 tag</h5>
   <h6>HTML Articles - Heading6 tag</h6>
</body>
</html>

Following is the output for the different heading tags. As we see the font for the different heading tags in below output.

Changing the size of the heading

We can also change the size of the heading with the style attribute using the font-size property inside the heading tag.

Syntax

Following is the syntax for changing the font size of the heading tag.

<h1 style="font-size:40px;" >…</h1>

Example

Following is the example program for the resizing the heading tag.


<!DOCTYPE html>
<html>
<head>
   <title>Title of the page</title>
</head>
<body>
   <h1 style="font-size:40px;" >HTML Articles</h1>
   <h2>HTML Articles </h2>
</body>
</html>