To enhance the appearance of your web pages it is quite important to consider the layout, otherwise the pages can look very cramped and "bunched-up". We need a few tags which will divide up the page and spread out the information

Line Break <BR>
We have already met the <BR> tag when we were looking at how HTML works. It is, you will recall, one of the tags that doesn't take an end tag. It is, in typewriter parlance, a carriage return and line feed which forces your browser to start a new line. When you write some text without using any <BR> tags the text will scroll nicely across your browser window, forming a new line when required. However, if you were to reduce the width of your browser (or, maybe, look at the same page on a different browser) you would see the line breaks in a different position. Using the <BR> tag ensures there will be line breaks where you want them.

Line Break including Graphics <BR CLEAR="ALL">
We have met this tag before too. It performs the same funtion as the <BR> tag but, in addition, forces the new line to be below any graphics that may be in the same area of the page. If you use just the <BR> tag, then the new line will be below the previous one but could be alongside a graphic. For example:

This is an example of just
using the <BR> tag after the word " just".....
....and this is an example of
using the <BR CLEAR="ALL"> tag after the word "of".

Paragraph<P>
This is probably the most-used tag! It does what it says on the tin - forces the browser to start a new paragraph so, basically, it is a <BR> tag with an additional line feed. Officially (and this is a sign of good coding) you are supposed to use the </P> tag to indicate the end of each paragraph, but your browser won't complain if you omit it. No need for an extended version here, it affects everything: text, pictures &etc.

The <P> tag can also be modified to align to the Left, Right or Centre. These commands are as set out below and should also be followed by </P> although a new <P> tag will overrule them.

<P ALIGN="LEFT">
This is not really used much as it is the default setting!

<P ALIGN="CENTER">
Surprise, surprise! This one aligns the text in the centre of the page.

This one <P ALIGN="RIGHT">
aligns the text on the right of the page.

This one <P ALIGN="JUSTIFY">
aligns the text on both the left and the right sides of the page. Obviously it is only worth using when the line of text is more than enougth to fill one page width! If I carry on writing blah blah blah you will see that both the left and the right margins are justified.

<BLOCKQUOTE>
We have already discussed this in the chapter on Text Appearance. It is a very useful Layout Control for a website, especially on one that does not use frames. It follows the rules and requires </BLOCKQUOTE> to close it.

Horizontal Rule <HR>
You might think there is not much to be done with a simple line across a page, but you'd be wrong! This is a most versatile tag as I shall demonstrate:

Here is a straightforward <HR> instruction which rules off with a horizontal line filling the width of the browser and has some space above and below:

Here is the unshaded <HR NOSHADE> version:

Here <HR WIDTH="100"> it is set to a certain width, in this case 100 pixels:

Here <HR WIDTH="50%"> it is set to a percentage of the screen (or the frame if one is used), 50% in this example:

As well as width, we can control the height with <HR SIZE=" ? ">. In this example, <HR SIZE="10"> it is set to 10 pixels:

Finally, we can give it a colour! <HR COLOR="RED"> will, surprisingly enough, produce a red line:

You, however, may well think it looks better as a solid colour <HR NOSHADE COLOR="RED">: