One of the most versatile and widely used tags is the Horizontal Rule <HR>. This is another special tag that does not come as a set. It does not have an ending tag.
The HR is an easy way to create horizontal sections on your page. It creates a separator line that appears across the width of the screen.
See the example in action.
The HR tag has properties of :
The HR is a great tool to use as-is, but here is an example to show what these properties can do :
See the example in action.
The first HR has been changed. It is now thicker, shows at half the current screen size, flat, and aligned along the right side of the screen. As with all tag properties, you can use these in any combination. I have just included them all into one HR for the example.
If any of these properties are not declared, the default for HR are :
The HR is an easy way to create horizontal sections on your page. It creates a separator line that appears across the width of the screen.
|
<html> <head> <title> Welcome to David's web page. </title> </head> <body> <P> Hi there! Thanks for visiting my web page. There isn't much here right now, but come back soon and see the changes! </P> <hr> <b>This text is bold.</b> <br> <i>This text is italisized.</i> <br> <u>This text is underlined.</u> <br> This text is back to normal. <hr> <p> <b><i>This text is bold and italisized.</i></b> <br> <u><b>This text is underlined and bold.</b></u> </p> </body> </html> |
The HR tag has properties of :
| SIZE | Height or thickness of the HR (in pixels). |
| WIDTH | Width or length of the HR (in pixels or percentage of screen width). |
| NOSHADE | Creates a flat (non 3D) look. |
| ALIGN | Aligns the HR to the LEFT, RIGHT or CENTER of the screen. |
The HR is a great tool to use as-is, but here is an example to show what these properties can do :
|
<html> <head> <title> Welcome to David's web page. </title> </head> <body> <p> Hi there! Thanks for visiting my web page. There isn't much here right now, but come back soon and see the changes! </p> <hr size="10" width="50%" noshade align="right"> <b>This text is bold.</b> <br> <i>This text is italisized.</i> <br> <u>This text is underlined.</u> <br> This text is back to normal. <hr> <p> <b><i>This text is bold and italisized.</i></b> <br> <u><b>This text is underlined and bold.</b></u> </p> </body> </html> |
The first HR has been changed. It is now thicker, shows at half the current screen size, flat, and aligned along the right side of the screen. As with all tag properties, you can use these in any combination. I have just included them all into one HR for the example.
If any of these properties are not declared, the default for HR are :
| SIZE | 2 pixels. |
| WIDTH | 100% screen size. |
| NOSHADE | Not set. |
| ALIGN | Center. |
