HTML Headings with Examples

To define the Title of the WebPage  HTML Heading is used. It describes the structure of the HTML page following the Heading tag. Let us understand  HTML Headings in detail.

     HTML Heading features 

  • HTML Heading tags are used to display the HTML document.
  • HTML Headings highlights the content of the element For better understanding.
  • HTML Headings help in Search Engine Optimization.
  • HTML Heading is case sensitive.
  • Most important HTML Heading is used on top of the page.
  • HTML Heading tags have default sizes.
  • HTML Heading tags change is done by style sheets.

      Syntax of HTML Tag

              <h1> content </h1>

                      :

                      :

                      :

              <h6> content </h6>

  • Headings tags start from the opening bracket and lowercase h then the number used to highlight an element and the closing bracket  <hn>  with some content in between and ends with the opening bracket and backslash with lowercase h and closing bracket </hn>.

    Example of HTML Heading

     Eg.1 Default Heading :

    <!DOCTYPE html>
<html>
 <body>
    <h1>C</h1>
   <h2>O</h2>
   <h3>D</h3>
   <h4>E</h4>
   <h5>D</h5>
   <h6>EC</h6>
 </body>
 </html>

       

       Output : 

     Eg.2 Heading used with line Break tag :

    <body>
    <h1>welcome to codedec</h1>
   <hr>
    <h2>my third assignment</h2>
   <hr>
    <h2> conclusion </h2>
 
</body>
 </html>

      Output :  

    Eg.3 Heading used with Nested Element :

    <!DOCTYPE html> 
<html> 
<head> 
   <title>html Heading </title> 
</head> 
<body> 
    <h1>most important heading. </h1> 
     <p>introduction to codedec </p> 
    <h2> second important heading</h2> 
     <p>programs in codedec page. </p> 
    <h3>This heading </h3>   
  </body> 
</html>

     

      Output : 

 Eg.4 Heading used with Style Attribute : 

<!DOCTYPE html> 
<html> 

<body> 

  <h1 style="font-size:85px;">Changed heading size.</h1> 

</body> 

</html>

 

  Output :

 

 Eg.5 Header tag: 

<!DOCTYPE html>
<html>
  <head>
    <title>welcome to codedec</title>
  </head>
  <body>
    <p>head contains meta attribute</p>
    <p>contains data about data </p>
  </body>
</html>

  Output :