HTML Headings

Next Page Previous Page

Html headings define document heading in our webpage it starts from the most important heading <h1> to the least important heading <h6> in the document. Let’s understand better with an example.

Supporting Browsers :

  • Chrome.
  • Internet Explorer.
  • Firefox.
  • Opera.
  • Safari.

 

<!DOCTYPE html>
<html>
<head>
<title>HTML Headings</title>
</head>
<body>
<h1>Our Heading 1</h1>
<h2>Our Heading 2</h2>
<h3>Our Heading 3</h3>
<h4>Our Heading 4</h4>
<h5>Our Heading 5</h5>
<h6>Our Heading 6</h6>
</body>
</html>

 

Example: HTML Headings in nested Elements.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Headings</title>
	</head>
	<body>
		<h1>Our Heading 1</h1>
		<h2>Our Heading 2</h2>
		<h3> Our Heading 3</h3>
		<h4>Our Heading 4</h4>
		<p> This is a paragraph heading.
		<h5>Our Heading 5</h5>
		</p>
		<h6>Heading 6</h6>
	</body>
</html>

The above heading output looks plain and boring. Let's go out of the box and create some cool headings from h1 to h6 and make our headings catch, as they are supposed to be.

Step 1: Creating a Header using the h1 tag

Example: <h1> is the most important heading in html.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Heading </title>
		<style>
		.header{
		padding: 30px;
		text-align: center;
		color : yellow;
		background : gray;
		height : 100px;
		}
		</style>
		<div class="header">
		<h1> HTML Header</h1>
		<p>The Most Important Heading in HTML.</p>
		</div>
	</head>
	<body>
	</body>
</html>

Step 2: Creating body content using h2

Example: < h2> is the second most important heading in HTML

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Heading </title>
		<style>
		.header{
		padding: 30px;
		text-align: center;
		color : yellow;
		background : gray;
		height : 100px;
		}
		.body{
		color : green;
		background : white;
		}
		h2{
		color : black;
		}
		</style>
		<div class="header">
		<h1> HTML Header</h1>
		<p>The Most Important Heading in HTML.</p>
		</div>
	</head>
	<body>
		<div class="body">
		<h2> HTML Body: </h2>
		<pre><i>
		Html headings define document heading in our webpage,
		it starts from the most important heading h1 to the least important heading h6 tags in the document.
		Let’s understand better with an example.
		</i></pre>
		</div>
	</body></html>

Step 3: Creating footer using <h3>

Example: <h3> is the thirst most important heading of HTML.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Heading </title>
		<style>
		.header{
		padding: 30px;
		text-align: center;
		color : yellow;
		background : gray;
		height : 100px;
		}
		.body{
		color : green;
		background : white;
		}
		h2{
		color : black;
		}
		.footer{
		   position:absolute;                 
		      bottom:0;
			  text-align: center;
			  background: gray;
			  color:yellow;
			  width: 100%;
		}
		.rest{
		color : blue;
		text-align : center;
		}
		</style>
		<div class="header">
		<h1> HTML Header</h1>
		<p>The Most Important Heading in HTML.</p>
		</div>
	</head>
	<body>
		<div class="body">
		<h2> HTML Body: </h2>
		<pre><i>
		Html headings define document heading in our webpage,
		it starts from the most important heading h1 to the least important heading h6 tags in the document.
		Let’s understand better with an example.
		</i></pre>
		</div>
		<div class="rest">
		<h1>Here I am using rest of the headings in html.<h1>
		<h4> here is h4 the fourth most important heading in html. </h4>
		<h5> herre is h5 the fifth most important heading in html. </</h5>
		<h6> here is h6 the least important heading in html. </</h6>
		</div>
		<div class="footer">
		<h3>HTML Footer!<h3>
		</div>
	</body>
</html>

 

Next Page Previous Page

Treding Tutorial

Popular Tutorials

to Learn now