Now that you know how to include both text and pictures on a web page, let's put them together. There are a few ways in HTML to make the two flow together smoothly, one of which is to use the image tag's align attribute.

Say you want a picture of your cat to appear right next to a short description of her. Here's one way to do that:

<p><img src="images/whitekitten.jpg">Here's a picture of my cat Snowball. She loves sitting in the sun and stretching out first thing in the morning. She wakes me up every day at 7am.</p>

Here's a picture of my cat Snowball. She loves sitting in the sun and stretching out first thing in the morning. She wakes me up every day at 7am.

Oops! That doesn't look quite right. This is why the align attribute is so useful. In the example below, the only thing I've changed is to add align="left" to the <img> tag. This tells the browser to put the picture on the left side of the page and then wrap the text around it.

Here's a picture of my cat Snowball. She loves sitting in the sun and stretching out first thing in the morning. She wakes me up every day at 7am.

That's much better! Other options for align are "right", "top", "bottom", and "middle". Try adding this attribute in the HTML Playground to see how the different options affect the image's placement.