One very easy thing you can do to improve the look of your text is to emphasize important words by making them bold, or putting them in italics, or even both. (Or by changing their colour, but we'll cover that later). Like many others, these tags work in pairs, on and off. As you might have already guessed, <B>turns bold on; </B> turns it off. Similarly, <I>turns italics on; </I> turns it off.
You can also underline words using <U> and </U> if you want to, but it's not a particularly good idea, because people often expect underlined text to be a link and may get confused.
One good way to make your page easier to read is to break it up into lots of paragraphs. But you can't just press Return a couple of times like you would in a word processor, because HTML ignores multiple Returns. Instead you use the <P> tag. Unlike most of the tags we have looked at so far, this one usually hunts alone. Just put it at the end of each paragraph on it's own. (Occasionally you may see a page which puts <P> at the beginning of each paragraph and </P> at the end. MS Word's "Generate HTML" function does this a lot. It works, but it's quite unnecessary and most people just use <P> on it's own).
Sometimes you just want to move onto a new line, like this,
without starting a new paragraph. Use the <BR> tag instead of <P>. This is particularly useful for lists, and it is also used on its own, without an "off" tag.
It's important to note that you can't leave extra empty space on your page by just putting lots of <P> or <BR> tags in succession, because most browsers will ignore all but the first one. If you view it with Internet Explorer 5 it will look OK, but in any other browser (including earlier Internet Explorers) it won't display as you intended. If you just want a bit of extra white space somewhere, a quick workaround is to put (exactly like that, starting with an ampersand and finishing with a semi-colon) between your <P> or <BR> tags, which is a code which tells the browser to put a non-breaking space. As far as the browser is concerned it's text, so it's happy to have paragraph breaks before and after it, but of course a space is invisible on the screen, so the effect is an extra gap.
It is a good idea to put a Return in your HTML source code after you use a <BR> tag, though, and two Returns after a <P>. Although Returns make no difference to how your page will display in a browser, they do make your source code much easier to read and edit later on, and you are bound to want to change something.
If you are quoting something where the line endings are important, like poetry or lyrics, having to put <BR> at the end of each line is a bit of a nuisance, especially if you already have them typed out. There is an easy solution though, which is to quote it as pre-formatted text. Start preformatted text with the code <PRE>, type or paste in your text just as you would in a word processor, and then end it with </PRE>. Most browsers display pre-formatted text in a different font (typeface), the classic "typewriter" font usually known as Courier. You can see this in action on the Storm Warning lyrics page. As I already had all the lyrics typed out, it was much easier to quote them as pre-formatted text rather than go through adding <BR> or <P> at the end of each line.
Because <PRE> treats Returns like a word processor, you can also use it as another easy way to leave a few lines of empty space on your page, as at the end of this paragraph. Just type <PRE>, then as many Returns as you want, then </PRE>. Like this.
A useful extra you can throw in from time to time is a line across the screen, perhaps to separate links from the main text as I have on these pages. The tag for this is <HR>, and you can see it in action at the top and bottom of this page.
An important way to break text up a bit is to use headings. HTML provides an easy way of creating headings of various sizes. To make a heading, create a tag which says <Hn>, where n is a number between 1 and 6, one being the largest; type your heading; and finish it by creating the same tag again but with / in front of the H. So to create a size 1 heading, you would put :
<H1>My heading</H1>.
You don't need to put <P> before or after a heading, (although it doesn't matter if you do) because HTML already knows that headings go on a line on their own. If you look at the source code for this page, you will see that I have ignored my usual layout convention, and put the code for the following sample headings all on the same line - just to show that it works!
Heading tags have an optional attribute you can add, if you like, which changes the way the heading is displayed. (There are quite a few tags to which you can add attributes which modify their behaviour). Immediately after the number in the "on" tag, add a space and then "align=right" (without the quotes), and the heading will be placed flush against the right margin instead of the left one, like the one below (the tag for this one reads <H3 align=right>). The "off" tag doesn't change when you use an attribute with a tag, so this one still reads </H3>.
Of course, you may want to change the size of the text somewhere other than a heading. Or change the text colour, or even the typeface. You can do that with the <FONT> tag and it's various attributes, which is what we are going to do next.