HTML Tutorial: Wrapping Text Around Pictures

When you are writing a web page in HTML, the wrapping of text will oftentimes become an issue. For those not schooled in web design, it may seem difficult to force the text to wrap exactly how you wish – particularly around an image. However, wrapping text in HTML is actually quite easy once you know the principles.

The first aspect you should realize is that wrapping text has more to do with images than the actual text. The text just needs to be sized, the font needs to be selected, the color needs to be decided and the text will be ready to be wrapped. The IMG tag is where all the magic happens.

Within the IMG tag, the most powerful attribute for wrapping text is ALIGN. The variables for the ALIGN attribute are LEFT, RIGHT, TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, ABSBOTTOM and BASELINE. Depending on which variable you select, the picture will act a certain way to cause the text to be wrapped around it.

The first set of these variables controls the actual image. LEFT, RIGHT, TOP, MIDDLE and BOTTOM tells the text where to go in relation to the image. TEXTTOP, ABSMIDDLE, ABSBOTTOM and BASELINE are different because they instruct the image where to go in relation to the text.

Below you will see a sample of HTML for aligning an image to the right, along with the result.

Another tool to use when wrapping text are the attributes HSPACE and VSPACE. Each of these attributes requires a number, typically between 1 and 50. HSPACE stands for horizontal space and the inputted number represents how much space will be placed on each side of the image. VSPACE works similarly, in that the number represents how much vertical space should be above and below the image.

By mastering these attributes, you will be well on your way to learning how to wrap text in HTML. Eventually, mastering other techniques that use tables and style sheets will make this process even easier and more powerful, but this beginner course will give you enough text wrapping expertise to tackle any such obstacle.