Open In App

What are various heading elements used to add heading in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

An HTML heading tag is used to define the headings of a page. There are six levels of headings defined by HTML. These 6 heading elements are H1, H2, H3, H4, H5, and H6; with H1 being the highest level and H6 the least.

In this article, we will discuss various heading elements used to add a heading in HTML.

Syntax:

<h1> Contents... </h1>

Importance of Heading:

  • Search Engines use headings for indexing the structure and content of the webpage.
  • Headings are used for highlighting important topics.
  • They provide valuable information and tell us about the structure of the document.

Example 1: In this example, we will show different heading tags.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Heading Tags</title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>GeeksforGeeks</h2>
    <h3>GeeksforGeeks</h3>
    <h4>GeeksforGeeks</h4>
    <h5>GeeksforGeeks</h5>
    <h6>GeeksforGeeks</h6>
</body>
</html>


Output:

Example 2: This example explains the different HTML heading tags.

HTML




<!DOCTYPE html>
<html>
 
<body>
    <h1>Welcome to GeeksforGeeks</h1>
    <h2>A computer science portal for geeks</h2>
    <h5>Tutorial</h5>
    <h6>Geeks</h6>
</body>
</html>


Output:

Changing the size of HTML Headings: The default size of HTML headings can be changed using the style attribute.

Example: This example explains the HTML heading tags by specifying the size of the font.

HTML




<!DOCTYPE html>
<html>
 
<body>
    <!-- Style attribute is used here-->
    <h1 style="font-size: 50px">H1 with new size.</h1>
</body>
</html>


Output:

Horizontal rule: The <hr> tag which stands for the horizontal rule is used to define a thematic break in an HTML page. The <hr> tag is an empty tag, and it does not require an end tag. It is basically used to separate content. Please refer to the HTML <hr> tag article for further details.

Example: This example explains the HTML Headings with horizontal rules.

HTML




<!DOCTYPE html>
<html>
 
<body>
    <h1>Heading 1</h1>
    <p>I like HTML.</p>
   
    <!-- hr Tag is used here-->
    <hr />
    <h2>Heading 2</h2>
    <p>I like CSS.</p>
   
    <!-- hr Tag is used here-->
    <hr />
    <h2>Heading 3</h2>
    <p>I like Javascript.</p>
</body>
</html>


Output:



Last Updated : 17 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads