Controlling Text on your page

Even the most basic page is full of text, and one of the big strengths of HTML is the set of tags which were designed for presenting text. Remember that HTML was originally designed to describe academic papers. As a result, not only do you have the ability to put headings and subheadings on the page, but also to make lists or present pre-formatted text like sections of computer code.

The more you use these constructs, the easier it will be to customize the look of your page later. For the time being, we are not going to talk about tags or attributes for controlling appearance, just the structure of the document and how the browser flows text. Understanding the basic flow is important, as text flow behaves the same whether you are just writing it in a page body like this, or putting it inside a box in a more complicated page layout.

A couple of tips:

For maximum understanding of this page, try resizing the browser window and watching how the flow of text changes.
Also, look at the HTML source for the page to see how it's put together.

Part 1: Paragraphs and line breaks

The most commonly-used tag for content on an HTML page is the <P> tag, the Paragraph tag. In order to break your text up into paragraphs, you need the opening and closing tags. Your web browser ignores any breaks in the text in your HTML page, it only cares about the tags around the text:

<BODY>

Paragraph 1

Paragraph 2

Paragraph 3

</BODY>

ends up looking like this in the browser:

Paragraph1 Paragraph2 Paragraph3

Paragraphs

Note that if text is put in paragraphs, the paragraphs receive a certain amount of spacing between the paragraphs. This is determined by the browser. The following paragraphs demonstrate how this spacing is affected by the font size for the paragraph:

ipsum lorem factum octum nostrum pluribus wookie (the following paragraph is double spaced by putting an empty paragraph in between.)

ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie

octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octu

um lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie

octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookieipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum pluribus wookie ipsum lorem factum octum nostrum

octum nostrum pluribus wookie ipsum lorem ipsum lorem

This is normally-sized text just like at the beginning.

In other words, the paragraph space is inserted after the paragraph, and doesn't seem to change all that much based on the font size. This is something which can be frustrating for beginners, who want finer control over the text in their layout.

Note that the spacing between lines of text, however, is proportional to the font size. We'll talk later about how text flows when you mix different sized fonts on a line of text.

Paragraph alignment

Besides the spacing between paragraphs, which isn't all that flexible, we also have the ability to change the justification/alignment of the paragraph, which as you'll see below, can help your page layout.

Left-justifed	This is the default alignment for most text tags. Note how extraordinarily large words are broken up for determining the page wrap: justificationalismistic subterranianationalism holographicalgasmic. This is a "ragged right" block of text.
Right-justified	This layout is especially great in tables and for forms, you can see even in this table how it clarifies the layout. Again, you can see that extraordinarily large words are broken up for determining the page wrap: justificationalismistic subterranianationalism holographicalgasmic. This is a ragged left block of text.
centered	Centered text always sounds a lot better in theory than it looks in real-world web page layouts. It should be used only for emphasis, as it can be unexpectedly fatiguing to read. Remember that your eyes have to find the beginning of each new line, since the line breaks at different places depending on the length of the words in each line. Do not do a whole page like this -- it makes for a weak layout, and is the calling card for millions of beginning web sites (along with the use of 5 or more font colors and rainbow seperator bars). Use center alignment for text that needs emphasis, like the headings of a table or the caption for a graphic.
Justified	Justified text can give you much more of a printed-page look and feel, particularly when used with serif fonts such as Times, Times New Roman, or Georgia. Your browser will generally be pretty smart about when to pad the space between lines and when not to.

Line Breaks and spaces.

Of course, there is a way to force a new line in the middle of a paragraph, using the <BR> tag, or Line Break tag. Lines separated using this tag are spaced with the line spacing for that particular font size.

Line one is very short
Line two is also, and much closer than the next paragraph.

Line 3 is on a new paragraph,

By breaking twice, I've enforced "double-spacing."

Note that with a smaller font,
the new line follows the smaller font spacing.

Other ways to have text on the page.

Not all text on your page needs to be enclosed in a paragraph. In fact, you'll find that when you put text in boxes, the trailing spaces that a paragraph enforces will sometimes leave you with unwanted space.

Text can also be enclosed in a <DIV> tag. The DIV tag has many powerful features we'll discuss later, but for now, the important thing is that you can control the text justification

This line of text is placed inside a div tag:

So is this following line.

This text immediately after the second div is a normal paragraph. Notice the spacing before and after the paragraph.

DIVs can be justified with the same alignment attributes (example: align="left") as paragraphs:

Left justify (default)

Right justify

Center

Justify on both sides of the box.

As I've said before, though -- DIVs are a much more powerful tool than this, as you can see in the HTML around the table above. Divs can enclose other HTML content, including one or more paragraphs. In fact, this is the preferred way to set the alignment of a block of text, because you only have to change the alignment in the one DIV tag rather than in each paragraph of the text.

Note, however, if you enclose a paragraph in a div, the vertical spacing around the paragraph is the same as if it weren't in the DIV.

The DIV is conceptually more like an invisible 'box' around the content.
As you can see, it also honors the line breaks.

We'll find a lot more interesting ways to use the DIV tag later -- While Dreamweaver uses them just for setting text alignments inside table cells, DIV tags are also the preferred method of implementing HTML 'layers', which allow for very flexible layout options as well as the ability to add interesting effects and interactivity to your page.

Indentation

The indentation of a paragraph of text can be controlled many ways, depending on where text is used. This paragraph, directly in the HTML file body, doesn't really have any indentation, though one can set the left margin and margin width for the whole page.

This paragraph, is indented using the <blockquote> tag. In Dreamweaver, this tag is written whenever you push the button for paragraph indentation. The default behavior of the tag (which we'll learn how to change later) will cause the browser to indent on both the left and right sides. Note that the text inherits the default left justification -- ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie

Paragraph spacing inside the block quote is the same as outside.

The block quote tag can be placed inside other block quotes.

The use of the 'cite' qualifier does something, but I can't really tell in the browser what it does. ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie

Here's a second block quote, further indenting the text: ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie

Another paragraph -- if you are typing this stuff in dreamweaver, you can use the left indent button to close the lower level blockquote and jump back to the next level up.

Of course, you can also use the normal paragraph or div tags for setting non-default justification. ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum bork bork nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octumbork bork bork bork borknostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie

This paragraph is a second indent (nested block quote), and is also right-justified. Note the way that the text flows now. ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie or or ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel

Use of the 'justify' alignment is especially effective for blockquote text: ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum

See? nostrel cookie ipsum upsy daisy lorem wookie octum bork nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsum lorem wookie bork octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie ipsu bork bork bork lorem wookie octum nostrum nostrel cookie ipsum lorem wookie octum nostrum nostrel cookie

When designing your page, if you use constructs such as Blockquote and the list tags described on this page, you'll have a springboard for changing your document look and feel without a lot of additional coding. You can also see that indentation is also a very effective tool for emphasizing or organizing text without resorting to a lot of font colors or other gaudy tricks.

Perhaps the biggest benefit of using these kinds of tags is that the browser does the work of making the display look good, which results in a page which will look good no matter which browser you use, or what native fonts or font sizes are present on the user's computer.