Wrap Text Around Images in HTML

To wrap text around images in is an essential skill to learn for nice looking HTML page layouts.

There are two common methods explained here for wrapping text around images in HTML: The image attribute method and the table alignment method. You can also use CSS to wrap text around images explained here >>.

The first method called the image attribute method is simplest way to quickly add an image with text wrap.

First you will need to decide on the location you want the image to appear in proximity to your text content. There are things to consider like the overall image size in relation to the length of a paragraph. In the example I have a short paragraph with small text, so for example purposes I will use an image to match the scale of this example. I have decided to place the image (at the beginning of the paragraph) -- the red X shows where I initially placed the image but I used the image attribute called align to make the image appear to the right. See example 1

Example 1: Image Attribute Method

Wrap Text Around Images in HTML - Image Attribute Method for Alignment

TIP: You can create your images with a 5 pixel border matching the page background to provide more predictable spacing between images and text or use the table alignment method explained below.

The code used to make this alignment happen was:

<img src="panda.gif" width="80" height="80" align="right">

You could also use the following depending on where you want images placed in relation to text. Here are other alignment options:

align="left"
align="right"
align="top"
align="middle"
align="bottom"
align="baseline"
align="texttop"
align="absmiddle"
align="absbottom"

Image Attribute Method for Alignment can potentially crowd your text and images: Example shows crowded layout

The Image Attribute Method may potentially crowd your text and images

Depending on the way text flows you may decide that you want a less crowded look or you might want to add a caption above and/or below the image. This can be achieved with the table alignment method. The steps for the table method are listed below.

Example 2: Table Alignment Method

Table Alignment Method

The table alignment method contains the image inside its own table at a set width that is the same as the image. The table as a whole is then set to align to the right as the example shows and given some cell padding for a defined border area. The cell padding is key to this approach and gives you flexibiity to create any spacing between text and images you want. The example HTML code is below using cell padding of "5" and table alignment to the right:

<table width="80" border="0" align="right" cellpadding="5" cellspacing="0">
<tr>
<td align="center" valign="top">Caption Area<br>
<img src="images1/panda.gif" width="80" height="80"><br>
Caption Area</td>
</tr>
</table>

Using this method allows you to also add a caption top and/or bottom of the image if you like.

TIP: Don't forget to add ALT attributes to your images! Images provide little use to people with text/speech browsers, browsers with images turned off, and can benefit you from the perspective of keyword density for search engine optimization. Make your images useful to all of your visitors by describing the specific purpose inside the ALT attribute.

Another method: Wrap Text Around Images Using CSS >>