Computers 4 you!: HTML Line Formatting

HTML Line Formatting

This page describes ways HTML is used to manage lines such as starting a new line on an HTML page or drawing lines on the HTML page. There are several methods of managing lines which are:

BR - Line break. Start a new line.
HR - Used to draw lines across the page

The HTML BR element

An example of use of the BR element

The BR element has no ending tag. Here are two lines as they may be written without using a <br> tag.

This is line 1.
This is line 2.

This is what you would see:

This is line 1. This is line 2.

Here are the same two lines as they are written with a <br> tag.

This is line 1.<br>
This is line 2.

This is what you would see:

This is line 1.
This is line 2.

The HR element

HR Element Attributes

The HR element has no ending tag.

SIZE=7 - (Depreciated). Sets the thickness or size of the line in pixels.
ALIGN="RIGHT" - (Depreciated). Sets the alignment of the line on the page to LEFT, RIGHT, or CENTER. The default is CENTER. The alignment is without purpose if the line width is 100%.
WIDTH="50%" - (Depreciated). Sets the width of the line across the page as a % or in pixels. The default is 100%.
COLOR="green"; - (Depreciated). Sets the color of the line. It may be expressed as one of the words, red, blue, green, etcetera, but may also be expressed in the #RRGGBB color format.
NOSHADE - (Depreciated). A boolean value to set the line to a solid line.

An example using the HTML HR element

Here is how the <hr> tag appears as HTML code:

Above the line.
<hr>
Below the line.

Here is how it looks:

Above the line.

Below the line.

The line, above, is set according to the defaults or the style sheet associated with this HTML document. To change its characteristics, I only need to change the style sheet. Note: Attempting to change the line characteristics using depreciated attributes such as ALIGN, WIDTH, or COLOR will not override values set by the style sheet. Only the use of the STYLE attribute will override those values.

Here's a colored line in HTML code (The top coding example uses HTML 3.2 without embedded style commands and the bottom coding uses HTML 4.01 with embedded style commands:

Here's how it looks:

Here's another colored line in HTML code (The second line uses style commands to set attributes rather than directly using some of the older attributes that are being depreciated):

Here's how it looks:

Here's a line in white:

Shucks! The background.