Text Layout

TEXT LAYOUT

The browser arranges the text on the screen only according to the HTML codes and ignores everything else. So it doesn't matter if you type your text like this:

Now is the winter of our discontent made glorious summer by this son of York

Or this:

Now is the winter of our discontent made glorious summer by this son of York

Or this:

Now is the winter of our discontent made glorious summer by this son of York

The browser will always display it like this:

Now is the winter of our discontent made glorious summer by this son of York

If you want a new line to start, you must use the line break tag:

Now is the winter of our discontent Made glorious summer by this sun of York; And all the clouds that lour'd upon our house In the deep bosom of the ocean buried.

This displays as:

Now is the winter of our discontent
Made glorious summer by this sun of York;
And all the clouds that lour'd upon our house
In the deep bosom of the ocean buried.

You could also type it this way and get the same results:

Now is the winter of our discontent Made glorious summer by this sun of York; And all the clouds that lour'd upon our house In the deep bosom of the ocean buried.

You can use several tags in a row if you want to skip several lines. Technically, you're not supposed to, but most browsers will accept it anyway.

Note that is one of the few HTML tags that stands by itself and does not get closed with a tag.

Paragraphs

The paragraph tag will start a new line and skip a line:

Now is the winter of our discontent Made glorious summer by this sun of York; And all the clouds that lour'd upon our house In the deep bosom of the ocean buried.

This displays as:

Now is the winter of our discontent
Made glorious summer by this sun of York;
And all the clouds that lour'd upon our house
In the deep bosom of the ocean buried.

The tag at the end of each paragraph is optional unless you are also using the ALIGN= command to justify the text in a paragraph (but note that this command will work only in a few browsers):

Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures

Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures

Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures.

Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures.

Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures.

is the default, so you don't have to include it if left justification is what you want.

Blockquote

The <BLOCKQUOTE> tag will indent the text on both sides:

Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. <BLOCKQUOTE>Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures.</BLOCKQUOTE> Grim-visag'd war hath smooth'd his wrinkled front, and now, instead of mounting barbed steeds to fright the souls of fearful adversaries, he capers nimbly in a lady's chamber to the lascivious pleasing of a lute.

Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried.

Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures.

Grim-visag'd war hath smooth'd his wrinkled front, and now, instead of mounting barbed steeds to fright the souls of fearful adversaries, he capers nimbly in a lady's chamber to the lascivious pleasing of a lute.

Centering Text

You can use the tag to center text, or you can use the <CENTER> tag

<CENTER>Now is the winter of our discontent</CENTER>

Now is the winter of our discontent

Horizontal Rules

You can use the <HR> tag to create a dividing line between sections of text:

<HR>

In some of the newer browsers, you can specify the number of pixels wide the horizontal rule will be using the WIDTH command:

In some of the newer browsers, you specify the number of pixels high the horizontal rule will be using the SIZE command:

In some of the newer browsers, you can control the position of the horizontal rule using the ALIGN command:

<HR width=300 align=center> (optional)

The horizontal rule was intended to be used on the default gray background where it will appear to be a beveled line "carved" onto the page. On a colored or graphic background, it may not look as nice. Also note that there is no </HR> tag.

Preformatted Text

The <PRE> tag will cause the text to be displayed exactly as you type it:

<PRE>Now is the winter of our discontent Made glorious summer by this sun of York; And all the clouds that lour'd upon our house In the deep bosom of the ocean buried. </PRE>

Now is the winter of our discontent
   Made glorious summer by this sun of York;
      And all the clouds that lour'd upon our house
         In the deep bosom of the ocean buried.

The <PRE> tag makes it easy to arrange the text on the page, but the results often look kind of sloppy. Depending on the effect you want, there are usually better ways to achieve it, such as tables, lists, and various other HTML tricks. In other words, avoid the <PRE> tag unless there seems to be no other reasonable choice. (My Suffolk County Demographics page is an example of where I chose to use it. I suppose that I could have presented it in more advanced HTML, but then it would have taken a few hours longer to finish it.)

Also notice that the <PRE> tag also displays the text as a nonproportional (fixed) font instead of the default proportional font just as the <TT>, <CODE>, and <KBD> tags do, but those tags do not affect the text layout the way <PRE> tag does.

Previous Section

Table of Contents

Next Section

HTML by Robert Delaney
rdelaney@aurora.liunet.edu