Lesson 8:HTML-HR(Horzontal Rule or Line)

The <HR> element in html create an horizontal line or rule across the screen. <HR> is called an empty tag, although it have four attribute to change default way the rule appears on screen. This tag is called an empty tag because there is not ending tag or closing tag. Look at the simple use of html tag in this example.

<html>
<head>
<title>
Horzontal rule tag example
</title>
</head>
<body>
Free online html tutorials
<hr>
</body>
</html>

Output of this html document on browser(Internet explorer) look like this.

image

This is the default behavior of html hr tag now in next section we will discuss the attributes with examples

 

HR align attribute

The align attribute of <hr> tag defines the starting position of line, tag can be left aligned which is default value,right and center. Let’s take a simple example to clear understanding of <hr> attribute tag.

<html>
<head>
<title>
Horzontal rule tag example
</title>
</head>
<body>
<h1 align=”center”>Free online html tutorials</h1>
<hr align=”center” width=50%>
<h1 align=”right”>Html horzontal rule tag</h1>
<hr align=”right” width=”50%”>
</body>
</html>

For now just focus on align attribute, first hr tag align attribute value is set to center and second hr align attribute value is set to right.The impact of these attribute change the default style as shown in image below.

image

HR size attribute

HR size attribute defines the thickness of line. Size attribute value can be set equal to any number, which represents number of pixels on screen. The default value of horizontal rule or line equals to 2 or 3 pixels it can be changed by using size attribute.

Look at the example to explore the use of <HR> size attribute tag.

<html>
<head>
<title>
Horizontal rule tag example
</title>
</head>
<body>
I am of size 10 pixels
<hr size=”10″>
I am of size 20 pixels
<hr size=”20″>
<h1 align=”center” >Free online html tutorials</h1>
<hr align=”center” width=50% size=”10″>
<h1 align=”right”>Html horizontal rule tag</h1>
<hr align=”right” width=”50%” size=”5″>
</body>
</html>

The output of this html document on browser is shown below.

image

HR width attribute

<HR> width attribute set the length of line. Value can be set in pixels and percentage, but it would be better to use the percentage as a unit because systems have different pixels settings. Percentage will take the total screen length equal to 100% by changing percentage it can reduce and increase the length of horizontal rule.

<html>
<head>
<title>
Horizontal rule tag example
</title>
</head>
<body>
My width(length) is 40 pixels.
<hr width=”40″ align=”left”>
My width(length) is 40 percent.
<hr width=”40%” align=”left”>
<h1 align=”center” >Free online html tutorials</h1>
<hr align=”center” width=50% size=”10″ width=”70%”>
<h1 align=”right”>Html horizontal rule tag</h1>
<hr align=”right” width=”50%” size=”5″>
</body>

</html>

The output of this html document is shown below.

image

HR shade attribute

Many browser shade the horizontal bar with black,white,dark gray or light gray pixels to remove the shading effect “noshade” attribute is placed inside the <HR> tag.

<html>
<head>
<title>
Horizontal rule tag example
</title>
</head>
<body>
No shade is applied.
<hr width=”80%” noshade align=”left”>
No shade is not applied.
<hr width=”40%” align=”left”>
</body>
</html>

Output of the example

image

I hope you will enjoy this detailed tutorials, thanks for giving your time for reading this tutorial. Keep in touch with soopertutorials.com to get deep knowledge of html.

Be Sociable, Share!

Leave a Reply