Skip to content
Related Articles

Related Articles

Improve Article

HTML Heading

  • Difficulty Level : Basic
  • Last Updated : 17 Sep, 2021
Geek Week

Example: 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:

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

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.

Syntax:

<h1></h1>
<h3></h3>
<h6></h6>

Example: 

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:

HTML




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

Output : 
 



The Horizontal rule in HTML: 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:

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 : 
 

The head element in HTML: The <head> tag in HTML is used to define the head portion of the document which contains information related to the document. The HTML head element acts as a container for metadata. Metadata is the data about the HTML document which is not displayed. The head element has nothing to do with headings. The <head> tag contains other head elements such as <title>, <meta>, <link>, <style> <link> etc. The head element is placed between the “HTML” tag and the <body> tag. Please refer to the HTML <head> Tag article for details.

Example:

HTML




<!DOCTYPE html>
<html>
<!-- head element starts here-->
  
<head>
    <title>Basics of HTML</title>
    <meta charset="UTF-8" /> 
</head>
<!-- head element ends here-->
  
<body>
    <p>I like HTML.</p>
  
    <p>HTML is easy to learn.</p>
  
</body>
  
</html>

Output:

Supported Browsers: 

  • Google Chrome 93.0
  • Microsoft Edge 93.0
  • Internet Explorer 11.0
  • Firefox 92.0
  • Opera 78.0
  • Safari 14.1

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :