There are two simple ways to have text automatically wrap around an image placed on a website. One involves a quick bit of code in the line of HTML that references the image, and the other method involves a little CSS.

HTML Method

Let's start with the HTML. In your HTML document you should have a container, whether a table or division, that holds a paragraph of text. Immediately above this text will be the markup for your image. For example:

<img src="image.png">
<p>Lorem ipsum dolor sit amet...

This code renders the image named image.jpg above the text. What we want to do is align it to the right side of the paragraph so it sits within the text. We do this by specifying an align value within the <img> tags.

<img src="image.png" align=left>
<p>Lorem ipsum dolor sit amet...

And now our image will show up like this in the text:

The CSS Method

For those who understand CSS, this method is a little more reliable. The implementation is similar, but it involves including a line in the <style> tags in the head of the HTML file.

First, we're going to define a style class for images, with a title we come up with.  How about "wrap"? Now we just give it the property float with the value right:

img.wrap {float: right}

Now, just as in the HTML example above, we'll adjust the <img> tag accordingly by specifying the class value wrap:

<img class="wrap" src="image.png">

Now, instead of the image appearing on the left, the image will appear on the right with the text wrapping around it:

That's all there is to it! You can define different class names with CSS so that you can have different images align in various positions on your page.

Why CSS?

Well, the HTML method is perfectly reliable, but we mention the CSS method because it's more versatile for style-related formatting on your webpage. For example, let's say you have a website where you publish a lot of articles with images, so you use text wrapping a lot. What if you decide you want to change the style of the text wrap, like adding or removing a border around the image, changing its position within the article, or other design considerations? If you've used the HTML version, you'll need to go through every article and change each <img> tag individually. If you've used the CSS method, all you need to do is change the CSS code, and all the text wrapping will change simultaneously. So you may want to consider becoming familiar with CSS if this sounds useful to you.