October 22, 2011

Horizontal Rule Tag, <hr />

HR stands for horizontal rule. It is used to draw a horizontal line (a "horizontal rule") across the page. To see its property in action, key in the code given below on your text editor.

<title>hr Tag</title>

horizontal rule 1.<hr noshade="noshade" 
align="left" size="1px" width="300px" />

horizontal rule 2.<hr noshade="noshade" 
align="center" size="5px" width="200px"/>

horizontal rule 3.<hr noshade="noshade" 
align="right" size="10px" width="50%" />

horizontal rule 4.<hr align="left" 
size="10" width="50%" />


This code produces this page in Mozilla Firefox:
Click to enlarge
About the code:
  • The attribute align refers to horizontal alignment of the line; you may use the value left, center or right.
  • The attribute size describes the height of the line. The size is usually measured in pixels.
  • The attribute width is used to set the width of the line in per cent or in pixels.
  • The noshade attribute tells the browser that the rule should be rendered as flat instead of three dimensional.
TIP: The title is an attribute that is standard for most HTML elements. It specifies extra information about an element.
example code: <p title=”Short description of the element.”>…</p>
The information is most often displayed as a tooltip text when the mouse moves over the element. Try it using our previous examples.

NOTE: The strict version of HTML and XHTML requires web designers to use only class (to specify a class-name for an element), id (to specify a unique id for an element), style (to specify an inline style for an element) and title attributes. Instead of using align, width, size, noshade and other attributes, web designers require to use the cascading stylesheet and with the help of the class, id and style attributes in designing webpages.