Flowing Text Around Images

The <img> tag is an "inline" tag meaning it doesn't automatically cause a line break like the <p> or <blockquote> tags. This means you can put an image one one side of the page or the other and text will flow around the image by default. We can use the ALIGN attribute (or no attribute) to position our image to the left or right. Text will automatically flow around it.

See the coffee cup to the left? I put that there by placing an <img> tag at the start of this paragraph. Here's what the code looks like:

<p><img src="coffee.gif"> See the coffee cup to the left? . . .

Notice that the bottom of the cup is aligned with the bottom of the first line of text. This is the effect you get when you don't use an ALIGN attribute. This is a simple inline image.

Now lets "float" the image to the left by adding an ALIGN attribute. This will have a different effect:

Here's and example of using ALIGN="left" in the <img> tag. See how the text now aligns with the top of the image. Actually, the text is rendered and then the image is "floated" left. This makes for a magazine-type look and feel. Foating images along with a paragraph of description is popular among catalog sites, too.

<p><img src="coffee.gif" align="left"> Here's an example . . .

Putting The Image To The Right

To put images to the right of the text we just use the ALIGN="right" attribute in our <img> tag. This floats the image to the right margin as opposed to the left one. The text flows the the same way as in the ALIGN="left" example. Next, we'll learn how to make margins around the image so the text doesn't but up against it.

The code to align an image to the right is much like aligning to the left:

<p><img src="coffee.gif" align="right"> To put images to the right . . .

All we had to do was use "right" for the value of ALIGN instead of "left". You cannot use the "center" value. We'll discuss centering images later in this lesson.

Making Margins Around Your Image

Although not too apparent with my coffee cup graphic, the text is actually butting up right next to the edge of the image. This is most apparent in the ALIGN="left" example. See how close the text is to the handle of the mug?

In many cases we need to add some whitespace between the image and the text flowing around it. There are two attributes that will do this for us: VSPACE and HSPACE. Here's an example of the effect.

This text does not but up against the coffee cup's handle. I've added twenty pixels of horizontal space using HSPACE. I've also added 5 pixels of vertical space with VSPACE. This space makes a nice offset that emphasizes the image and makes the text clearer. Most ALIGNed images use some HSPACE and VSPACE. This whitespace around an image is referred to as a "gutter".

Compare this text with the spaced text above. See how much closer this text is to the coffee cup. In some cases this can really blur the text near the image.

The code for adding VSPACE and HSACE is simple. The value for both is a number of pixels. The first example above is coded:

<p><img src="coffee.gif" align="left" vspace=5 hspace=20>

The above gives us a 5 pixel margin above and below the image and 20 pixels of space on both sides.

Preventing Text Flowing Around Images

Now we come across the problem of not having text flow around an image at all. Say we want an image aligned to the left, but no text flowing around it. We want the text below the image as in the example below.

Here's the text below the image. Notice that it does not flow around the image at all.

To get a line break between the image and the text, we use the <br> tag just like we did to make line breaks in text. For images we use a special <br> tag that uses the CLEAR attribute. The CLEAR attribute "clears" the left, right, or both margins (sides) of the image. Here's how I made the break shown above:

<p><img src="coffee.gif" align="left"><br clear="all">

Here's the text below the image. . .</p>

It's the <br clear="all"> that causes the break. There are three values for CLEAR: "left", "right", "all". The "left" and "right" values clear the left and right margins of the image respectively. The "all" value for CLEAR clears both margins. The "all" value is generally the most used.

Centering Images

The <img> tag's ALIGN value does not support a value of "center". To center an image we must use extra tags around the image tag. In older versions of HTML this was done with the <center> tag:

<center>
<img src="coffee.gif">
</center>

This would center the coffee cup like this:

The <center> tag has been deprecated. This means that future browsers may not support the tag. The <center> tag is not part of current HTML. It's a holdover from past versions of HTML. The current preferred method to center items like images is to use the <div> tag and the ALIGN attribute:

<div align="center">
<img src="coffee.gif">
</div>

Using <div align="center"> does the exact same thing as the <center> tag. Oh, and, don't expect browsers to quit supporting the <center> anytime soon. It's just a good general idea to use the <div> tag for centering. As we'll see in advanced work, the <div> tag is handy for all sorts of things.

Text will not flow around centered images. It takes advanced page layout techniques to place text to either side of a centered image.

To Next Beginning HTML Lesson

Back To Beginning HTML Index