h1-h6 tag in html with examples

Home » HTML » HTML Tags » h1-h6 tag in html with examples

h1-h6 tag in html with examples

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The h1 to h6 tag is used for specifying headings.
There are 6 levels of headings (h1 - h6) with h1 the most important and h6 the least important.
Browsers typically render the various headings in different sizes with h1 being the largest and h6 being the smallest.
The h1-h6 tags are supported in all major browsers.

Example :

     <html>
     <head>
     <title>I</title>
     </head>
     <body>
     <h1>This is 20Fingers2Brains.</h1>
     <h2>This is 20Fingers2Brains.</h2>
     <h3>This is 20Fingers2Brains.</h3>
     <h4>This is 20Fingers2Brains.</h4>
     <h5>This is 20Fingers2Brains.</h5>
     <h6>This is 20Fingers2Brains.</h6>
     </body>
     </html>

Demo :

In the above example, we have rendered all heading tags from h1 to h6. The h1 renders with larger font and the font-size decreases from h1 to h6.

h1-h6 and Style :

<html>
<head>
<title>h3-h6 Style</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6
{
color:green;
font-size:30px;
margin-left:350px;
font-weight:bold
}
</style>
</head>
<body>
<h1>This is 20Fingers2Brains.</h1>
<h2>This is 20Fingers2Brains.</h2>
<h3>This is 20Fingers2Brains.</h3>
<h4>This is 20Fingers2Brains.</h4>
<h5>This is 20Fingers2Brains.</h5>
<h6>This is 20Fingers2Brains.</h6>
</body>
</html>

Demo :

In the above example, we have applied CSS to all heading elements rendered.

h1-h6 and Javascript :

<html>
<head><title>IJavascript2</title>
<style type="text/css">
h3
{
color:red;
font-weight:bold
}
</style>
<script type="text/javascript">
function h()
{
var eleh=document.createElement("h3");
var text=document.createTextNode("This is 99codingexamples.");
eleh.appendChild(text);
document.getElementById("h").appendChild(eleh);
}
</script>
</head>
<body>
<div id="h">
</div>
<input type="button" id="b1" value="Press" onclick="h()"/>
</body>
</html>

Demo :

In the above example, we have used javascript to create a h3 element and render it on UI. We have also applied CSS to it.