Lesson 5: Headings Tags in HTML

Web pages  contains series of contents line or pages, its very difficult for the user to differentiate different section of the contents because all the text formatting is same. HTML support hot feature of heading, there are six heading element <H1></H1>….<H6></H6>.

By using different level of tags document creator can show different section within the same web page. The way headings are displayed depends on the browser used to read the document. The heading tag automatically break the line and provide some formatting.

Lets use the six different levels of headings in HTML document.

<html>
<head>
<title>
Headings
</title>
</head>
<body>
<H1>Welcome to sooper tutorials</H1>
<H2>Welcome to sooper tutorials</H2>
<H3>Welcome to sooper tutorials</H3>
<H4>Welcome to sooper tutorials</H4>
<H5>Welcome to sooper tutorials</H5>
<H6>Welcome to sooper tutorials</H6>
</body>
</html>

Just put the following html code in notepad and save it with the filename(heading.htm), you can use another file name. The result of this document when read by the browser shown in the figure below.

image

Heading also have the feature of alignment, headings can aligned according to your choice. There are three types of heading alignment attribute values that can be set left,right and center. Headings are left align by default, right and center can be used to change the default alignment of the headings.

<html>
<head>
<title>
Headings
</title>
</head>
<body>
<H1 align=center>Welcome to sooper tutorials</H1>
<H2 align=right>Welcome to sooper tutorials</H2>
<H3>Welcome to sooper tutorials</H3>
<H4>Welcome to sooper tutorials</H4>
<H5>Welcome to sooper tutorials</H5>
<H6>Welcome to sooper tutorials</H6>
</body>
</html>

Previous code is updated by adding align attribute in first two headings. The output of the HTML code is shown in the figure below.

image

 

I hope this tutorial will make you understand the concept and usage of HTML headings. To learn more read our more HTML tutorials have a good time.

Be Sociable, Share!

Leave a Reply