Enterprise Software

HMTL blocks, lists, and preformatted text

Check out these HTML tips for working with blocks, lists, and preformatted text.

By Donald St. John

Put text in a block

If you want to indent a block of text on both sides, try the <BLOCKQUOTE> tag. (While the indentation isn't the same in all browsers, Navigator and Internet Explorer both indent the text 40 pixels on each side.) Just enclose the text you want indented in a pair of <BLOCKQUOTE> tags. Inside the blockquote, you can use standard <P> or <BR> formatting tags to control line breaks as well as text-control tags such as <I> and <B>. Here's a sample blockquote segment:

<BLOCKQUOTE>
Let us go then, you and I,<BR>
When the evening is spread out against the sky<BR>
Like a patient etherized upon a table.<BR>
<BR>
—T. S. Eliot, <I>The Love Song of J. Alfred Prufrock</I>
</BLOCKQUOTE>

The results look like this:

Let us go then, you and I,
When the evening is spread out against the sky
Like a patient etherized upon a table.

—T. S. Eliot, The Love Song of J. Alfred Prufrock

Put images in a block

Don't limit yourself to putting text inside a blockquote. You can put images inside blockquotes as well. You'll find it's an easy way to indent a graphic about 40 pixels. For instance, try this command:

<BLOCKQUOTE> <IMG SRC="image.gif"> </BLOCKQUOTE>

The results look like this:

You can also right-align images inside blockquotes by adding the ALIGN attribute to the <IMG> tag and giving it a value of RIGHT. However, this is not advisable because the two major browsers react in different ways. Navigator right-aligns the image inside the blockquote:

Navigator


Internet Explorer, meanwhile, pushes it outside of the blockquote:

Internet Explorer


A better, more consistent way to right-align images within a blocked-out space is to place the image inside a table with hidden borders. Right-aligned images show up inside tables in both Navigator and IE.

Nest blockquotes

You can also nest blockquotes inside one another to create larger indents. Nesting a pair of blockquotes creates indents of approximately 80 pixels on each side; nesting three blockquotes creates 120-pixel indents on each side; and so on. Look at this example:

<BLOCKQUOTE>
<BLOCKQUOTE>
You may write me down in history<BR>
With your bitter, twisted lies,<BR>
You may trod me in the very dirt<BR>
But still, like dust, I'll rise.<BR>
<BR>
—Maya Angelou, <I>Still I Rise</I>
</BLOCKQUOTE>
</BLOCKQUOTE>

You'll get this result:

You may write me down in history
With your bitter, twisted lies,
You may trod me in the very dirt
But still, like dust, I'll rise.

—Maya Angelou, Still I Rise

Make a new kind of list

When you learn HTML, you're taught that there are three kinds of lists: unordered lists, which are bulleted; ordered lists, which are numbered; and definition lists, which place a term flush left, then indent the definition on the next line.

But what if you want an indented list that's not bulleted or numbered? Just set the list up with the <UL> tag in the usual way, but don't include any <LI> tags. Add <BR> tags to separate the items in the list, like so:

<UL>
Item 1<BR>
Item 2<BR>
Item 3
</UL>

This gives you a nice indented list without bullets or numbers, like this:

    Item 1
    Item 2
    Item 3
Of course, this trick goes beyond lists—you can use it to achieve a quick indent for text or an image as well.

Note: This use of the <UL> tag is not in accordance with the W3C spec. While it works with the recent versions of Navigator and Internet Explorer, readers should be aware that it may be unsupported in other browsers.

Preformat text

Normally, HTML ignores non-HTML commands. But the <PRE> tag lets you insert preformatted text. The <PRE> tag recognizes hard returns and multiple spaces you type with the space bar, while the text itself appears in a monospaced font. The <PRE> tags give you more control over how the text will look in a browser. For instance, format a passage like so:

But what if you want an indented list that's not bulleted or numbered? Just set the list up with the <UL> tag in the usual way, but don't include any <LI> tags. Add <BR> tags to separate the items in the list, like so:

<PRE>

I saw the best minds of my generation destroyed by 
      madness, starving hysterical naked, 
dragging themselves through the negro streets at dawn 
      looking for an angry fix, 
angelheaded hipsters burning for the ancient heavenly 
      connection to the starry dynamo in the machin- 
      ery of night.

                            —Allen Ginsberg, <I>Howl</I>
</PRE>

You'll get this:

I saw the best minds of my generation destroyed by 
      madness, starving hysterical naked, 
dragging themselves through the negro streets at dawn 
      looking for an angry fix, 
angelheaded hipsters burning for the ancient heavenly 
      connection to the starry dynamo in the machin- 
      ery of night.

                            —Allen Ginsberg, Howl

Preformat forms

You can use the <PRE> tag in forms to get the little boxes to line up correctly. For instance, a form that has Name and Address boxes as its first two vertical fields might not look very good because Name has four letters, while Address has seven. If you try putting a text box after each word, the box after Address will jut out from the box after Name, like so:

Name
Address

However, you can use <PRE> tags to make everything come out even: simply add three spaces after Name and before the text box.

<PRE>
<FORM>
Name     <INPUT TYPE="text" SIZE="25">
Address <INPUT TYPE="text" SIZE="25">
</FORM>
</PRE>

The form will look like this:


Name Address
You can accomplish the same thing without using <PRE> tags by inserting nonbreaking spaces after Name to bump the text box over.

By Donald St. John, with additional material and advice from Cormac Foster, Mark Kaufman, Charity Kahn, and Matt Rotter.

Editor's Picks

Free Newsletters, In your Inbox