Text in HTML

Spaces, Line Breaks, and Paragraphs

HTML ignores any multiple spaces, tabs, or Returns which you type into your text file (look at the HTML source for this page). This is confusing for beginners since it is not what they expect.

You can use the paragraph tag <P> to start a new paragraph. This puts in a blank space above the paragraph and begins the text on a new line. Although you can get away without the ending tag </P>, it is good form to use it. By the way...I've had to use special "tricks" to get the tags to show up in this paragraph (I'll tell you about that later).

Here is another new paragraph. I've already typed several line breaks in my text editor in this paragraph, but they don't show up in the browser display

Another paragraph.

And Another.

The width of the user's browser window determines where the lines of text will break by default. Try resizing the browser window.

You CAN force HTML to break your line of text by using the <BR> tag. I'll use one right here:
This causes the text to start on a new line, but does not put extra space above the line as the paragraph tag does.

Another paragraph. I'll put
break
tags
between
all
of
these
words.

Wow. That previous paragraph was all on one line in the text editor.

The moral of this story is that you must tell HTML specifically WHERE to start paragraphs or put in line breaks using tags. The NICE thing about this "feature": You can type spaces, tabs, and Returns anywhere you like in your HTML text if it makes it easier to read in the text editor, and it won't affect the HTML display.

Work-arounds:

You CAN work around some of the limitations on multiple spaces and Returns. For example, to display multiple spaces in a row on your web page, you can use the &nbsp; "escape sequence" to put in a non-breaking space. You can put as many of these in a row as you wish:

Here are six &nbsp; in a row:      And then more text.

You can display several blanks lines in your web page by placing several <BR> tags in a row. I'll put six of them here:





Multiple <P> tags in a row DO NOT cause multiple blank lines to appear in most browsers, as I'll show by placing six in a row after this paragraph.


Alignment Attributes

The ALIGN attribute can be used in a paragraph tag to control the alignment of the lines in the paragraph. The choices are "left" (the default), "right", and "center". There is no "justify" option (but it can be done with the more advanced HTML of Style Sheets).

Here is a centered paragraph. The starting tag for this paragraph is <P ALIGN="center">.

Here is a right-aligned paragraph. The starting tag for this paragraph is <P ALIGN="right">.


Heading Tags

One way to emphasize lines of text in HTML is to the use the <Hn> . . . </Hn> (heading) tags. The "n" can be a number from 1 to 6.

<H1> makes the largest text, while <H6> makes the smallest.

All of the Heading tags also make the affected text appear BOLD. Here are some example lines:

This is Heading 1 size

This is Heading 2 size

This is Heading 3 size

This is Heading 4 size

This is Heading 5 size
This is Heading 6 size

NOTE! The <Hn> tags are BLOCK ELEMENTS in the HTML text. This means there will always be space placed above and below any text formatted between the <Hn> and </Hn> tags. (The paragraph tag also is a block element.)

Therefore, you can't use Heading tags to change the size of text within a line...only to set the size for the whole line. To change text sizes within a paragraph, heading, or other block element, use the <FONT> tag (see below).

The Heading tags can use the ALIGN attribute in the same way the Paragraph tag can:

Here is a Centered H2 Line


Bold, Italics, Underline, etc.

You can emphasize text in certain ways by enclosing it between tags. Here are some example of the tags and the effects they produce:

<B> . . . </B> Bold text

<I> . . . </I> Italics text

<U> . . . </U> Underlined text

<TT> . . . </TT> TeleType text (displayed in default mono-spaced font)

<EM> . . . </EM> Emphasized text (usually shows as italics)

<STRONG> . . . </STRONG> Strong text (usually shows as bold)

A common mistake is to forget the closing tag (or forget the slash in the closing tag). Then, the rest of your text from that point on would be all bold or italics or whatever.

Tags such as <B> and <I> are Physical formatting tags (they specify the actual physical formatting desired). The <STRONG> and <EM> tags are Logical formatting tags (they specify the general formatting effect desired, but the details of the display are left up to the browser settings). HTML purists may prefer the Logical tags, but most people use the Physical tags.


Lists: Ordered, Unordered, Definition.

Below is an Ordered List. Please note that:

  1. The items in the list get numbered automatically.
  2. The items in the list get indented automatically.
  3. You surround the list with <OL> . . . </OL> tags
  4. Lists are "block elements" so you get space above and below.
  5. You surround each list item with <LI> . . . </LI> tags
  6. You could start numbering with any number using the START="n" attribute.

Below is an Unordered List. Please note that:

You can also nest lists within other lists, to get effects such as:

  1. Come home
  2. Eat supper
  3. Watch the late news
  4. Get ready for bed:
  5. Go to sleep
  6. Have nice dreams

Definition Lists are lists of terms and their definitions. The whole Definition List is surrounded by <DL> . . . </DL> tags. Each definition term is marked off with <DT> . . . </DT> tags. Each definition is marked off with <DD> . . . </DD> tags. Here is an example:

HTML
HyperText Markup Language.
HTTP
HyperText Transfer Protocol.
Browser
A program which displays web pages.

More Work-arounds:

Basic HTML does not give you a way to indent just the left edge of a paragraph. HTML authors often use "cheats" to get around that:

Notice that this paragraph is indented on the left edge. This is because I used <DL><DD> . . . </DD></DL> tags around the text. This works...but it is not considered "proper" use of HTML. But people do such things anyway if they want the formatting. HTML purists would have a cow, of course.

Blockquote

There is a block element in HTML which allows you to set off text by indenting BOTH sides of the block. The <BLOCKQUOTE> . . . </BLOCKQUOTE> tags cause a 1/2-inch indent on both the left and right sides. For this paragraph, I actually used a BLOCKQUOTE within a BLOCKQUOTE to get a bigger indent. You can't indent on just one side, however, which is why people sometime resort to the "cheat" described above for indenting only the left edge.

Preformatted Text (the <PRE> . . . </PRE> tags)

This text is between "preformatted text" tags.  It will appear 
in a mono-spaced font with all of the spaces     and line breaks 
exactly as I typed them in the text editor.

It's like typing on an old fashioned typewriter.  This does allow 
you to do things such as typing in tabular data using spaces to 
line up the columns:

     PET'S NAME           TYPE           COLOR
     Fido                 Dog            Brown
     Jingle               Cat            Grey
     Rebel                Bird           Blue

But there are better, fancier ways to make tables in HTML (we will learn later). The Preformatted tag is a block element.

That's the end of the preformatted text. You CAN stick tags inside the preformatted text to make words bold, underlined, etc.


The <FONT> . . . </FONT> tags

You can enclose text within <FONT> . . . </FONT> tags to change its size, color, and type-face (font). The FONT tag uses attributes as shown here:

<FONT SIZE="n" COLOR="color" FACE="face name list">

The COLOR attribute can have an HTML color name (such as "blue"...see text book for list) or an HTML color number such as "#0000FF" (which is also blue).

The FACE attribute can have a list of fonts or font categories which can be used to display the font (assuming the user has that font installed!) such as "Arial, Helvetica, sans-serif".

The SIZE attribute can have the values 1 to 7 (or such relative values as -1 or +3).

You only need to include the attribute(s) that you want to change (you don't need to put in all three).

This is font size 1
This is font size 2
This is font size 3 (Size 3 is the default size text)
This is font size 4
This is font size 5
This is font size 6
This is font size 7


Displaying Special Characters

You sometimes run into problems displaying certain chacters in HTML. For example, in order to show you tags in this text, such as <BODY> . . . </BODY>, I couldn't just type them in...because the browser would interpret them as tags to be used in formatting this document! So, I had to replace certain characters (the less-than and greater-than brackets around the tags) with special character codes.

For example, to display the tag <BODY> I had to type:

&lt;BODY&gt;

And, in fact, to show the ampersand (&) "escape character" in that previous line, I had to use the &amp; sequence.

You can use this feature to put in special characters that you can't type from your keyboard, such as the copyright symbol: © with the &copy; sequence. See the reference textbook for a list of special codes.


Copyright © 2000 by Dr. Thomas E. Beach