Lesson 8:HTML-HR(Horzontal Rule or Line)
- Thursday, February 5, 2009, 7:50
- Programming
- 1,946 views
- Add a comment
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.
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.
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.
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.
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
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.
(No Ratings Yet)
Loading ...About the Author
Adam has written 403 stories on this site.
Related Tutorials & Articles
HTML is capable to embed images in a webpage; it can be done by using html tag <img>. Image tag is not a container tag means there is no closing tag but it has several attributes. Tag Syntax <img src=”picpath” height=”10” width=”20” alt=”image description” align=> Src Src attribute of image tag defines source of image, src is always set...Read more
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...Read more
When writing a report or article, you divided the text into section called paragraphs. Paragraph is the continuous break commonly used for better representation for the reader. To start new paragraph you need to insert a blank line and start the new line with tab, that can be done by using(<BR>)line break but still you...Read more
As discussed in Lesson 3, contents in the body portion of html document are unformatted. In lesson 3 we applied line break from notepad but it does not work. This tutorial will teach you how to apply line breaks in html document. <BR> is not the container tag its a single tag used for line break....Read more
Font tag in html is used for formatting the text. Font tag comprise three attributes font size, face and color, you can play with these attributes to change the looks of your site text. Font Size This attribute can increase and decrease the font size, smallest value of size attribute can be set as 1 and the...Read more
Write a Comment
Gravatars are small images that can show your personality. You can get your gravatar for free today!
