Horizontal rules and Line breaks

There are two tags that can be used to control the layout of your page.

• Horizontal Rule <hr>
• Line break <br> -- inserts a end of line where it appear

Neither have a closing tag or associated text.

Their use is fairly straightforward.

Horizontal Rule <hr>

The <hr> has 4 attributes that may be associated with it.

• The size attribute to specify thickness of line in pixels (pixels are individual dots displayed on the screen).

  For example:

  <b>2 Pixels</b><br>
  <hr size=2>
  <b>4 Pixels</b><br>
  <hr size=4>
  <b>8 Pixels</b><br>
  <hr size=8>
  <b>16 Pixels</b><br>
  <hr size=16>
  

  Which looks like this:

  2 Pixels
  

  4 Pixels
  8 Pixels
  16 Pixels
  

• The align attribute can be with Horizontal Rule.
• The width attribute to specify width of line in pixels or percentage of screen width.

  For example:

  <b>100%</b>
  <hr width=100% align=left>
  <br><br>
  <b>75%</b>
  <hr width=75%  align=left> 
  <br><br>
  <b>50%</b>
  <hr width=50%  align=left>
  <br><br>
  <b>25%</b>
  <hr width=25% align=left>
  <br><br>
  <b>10%</b>
  <hr width=10%  align=left>
  

  Which looks like this:

  100%

  
  
  75%
  
  50%
  
  25%
  
  10%

• The noshade attribute to specify that a plain black line is to be drawn as opposed to (default) 3D shading. noshade has no value assigned to it.

  For example:

  <b>Default Shaded Horizontal Rule </b>
  <hr>
  <br><br>
  <b>No Shade Horizontal Rule </b>
  <hr  noshade>
  

  Which looks like this:

  Default Shaded Horizontal Rule

  
  
  No Shade Horizontal Rule

Putting the above together we can create so simple effects. For Example:

The HTML code to achieve this is relatively straightforward:

<HR WIDTH=40% ALIGN=CENTER>
<HR WIDTH=30% ALIGN=CENTER>
<HR WIDTH=20% ALIGN=CENTER> 
<HR WIDTH=10% ALIGN=CENTER>