HTML Heading

28 Jun, 2022
In this article, we will know HTML Heading, & its implementation through the examples. A 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 being the least.
<h1>is used for main heading. (Biggest in size)
<h2>is used for subheadings
if there are further sections under the subheadings then the <h3> elements is used. 
<h6> for the small heading (smallest one).
Browsers display the contents of headings in different sizes. The exact size at which each browser shows the heading can vary slightly. Users can also adjust the size of text in their browser. 
Syntax:
// the 'h' inside the tag should be in small case only.
<h1>Heading1</h1>
<h2>Heading2</h2>
.
.
.
<h6>Heading6</h6>
Importance of Heading:
Search Engines use headings for indexing the structure and organizing the 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: This example illustrates the HTML 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:
HTML Headings
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>         <h1>H1 Heading</h1>         <!-- With the help of Style attribute you can customize the size of the heading, As done below-->         <h1 style="font-size: 50px">H1 with new size.</h1>       <!-- Here font-size is the property by which  we can modify the heading. Here we kept it 50px i.e. 50 pixels --> </body> </html>
Output:
Styling the <h1> tag with different font-size
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 any end tag. It is basically used to separate content. Please refer to the HTML <hr> Tag article for more detailed information.
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:
HTML Heading with the horizontal line
Supported Browsers: 
Google Chrome 93.0
Microsoft Edge 93.0
Internet Explorer 11.0
Firefox 92.0
Opera 78.0
Safari 14.1
shubhamyadav4
bhaskargeeksforgeeks
dishaagrawal1
lucidcoder121
sweetyty
HTML-Basics
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?