www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons The HR Tag Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
Lesson 28
Lesson 29
Lesson 30
Lesson 31
Lesson 32
Lesson 33
Lesson 34
Lesson 35
Lesson 36
HR is short for Horizontal Rule. The use of HR tag is very common for dividing the content in sections. It places a horizontal line on a web page.

The <hr> tag is a stand alone tag, it does not have any closing tag.

By simply writing <hr> places a horizontal line like one below:

But what if you need to control the color and size of this line? Don't worry the HR tag also comes with a variety of different attributes that give you control over this tag.

Use this attribute to change the width of the horizontal rule. It can be assigned a value in pixels or a percentage of the page width. The default is 100% of the page width.

<hr width="50%">

<hr width="150">

By using this attribute the horizontal rule can be aligned to the left or right of the page. It can take the value of center, left or right. The default alignment is center. The alignment effect can only be noticed if the width of the HR is less than the page width.

<hr width="150" align="left">

<hr width="150" align="center">
<hr width="150" align="right">
By using this attribut the vertical size of the HR can be controlled. It can take a whole number as its value. The default size is 2.

<hr width="150" align="right" size="10">

You have complete control over the color of the HR. By using the color attribute of the HR tag, you can make the HR appear in any supporting color. A complete list of html colors can be found here. <hr color="pink">
If you don't like the default shaded appearance of the HR, the noshade attribute, without any value, can be used. This will make the HR appear as a solid color.

<hr size="15" noshade>

Next >>> Lesson No. 14: Adding Comments in HTML

Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.