You place an image on a webpage using the <img src="imagename" /> tag. An img tag creates an inline box. This means the the browser renders the image along with any other inline elements (like text) from left to right, top to bottom.
This is some text. This is some text. This is some text. This is some text. This is some text.
By default the baseline of the image is placed on the same baseline as the text. However you can set the align attribute to "bottom", "middle" or "top" to change where the baseline of the image will be located relative to the baseline of the text.
align attribute:
align="bottom" - default
align="top"
align="middle"
align="left"
align="right"
This is some text. This is some text. This is some text.
<img align="middle" src="cherry.jpg" />
This is some text. This is some text. This is some text. This is some text. This is some text.
<img align="top" src="cherry.jpg" />
As you can see from the examples above, if you set the align attribute to "middle" or "top", it causes some space between the lines of text. If this is undesirable, you might use some other layout elements, such as placing the image and the text inside table cells.
This is some text. This is some text. This is some text. This is some text. This is some text.
<img align="left" src="cherry.jpg" />
This is some text. This is some text. This is some text. This is some text.This is some text.
<img align="right" src="cherry.jpg" />
As you can see in the examples above, if you set the align attribute to "left" or "right", it causes text to wrap next to the image. This can cause a problem when text that you don't want to wrap continues to wrap. To stop the text from wrapping, use a break tag (<br>) with its clear attribute set to the same value as the <img> tags align attribute. An example is shown below.
<br clear="left" />
Or you can use <br clear="all" /> to clear any previous align setting.
hspace and vspace attribute
This is some text. This is some text. This is some text. This is some text. This is some text.
<img hspace="100" src="cherry.jpg" />
The hspace attribute is used to specify the amount of space (in pixels) to the left and right of the image. As you can see in the example above (at least in my browser), the hspace attribute performs a line-break before creating the left-side space.
This is some text. This is some text. This is some text. This is some text. This is some text.
The vspace attribute is used to specify the amount of space (in pixels) above and below the image. As you can see in the example above (at least in my browser), the vspace attribute performs a line-break when the space left in the browser cannot accommodate the size of the image.
Note that the W3C (World Wide Web Consortium), the organization that sets the standards for html, in all their committee wisdom, prefers you to use the incompatibility plagued CSS (Cascading Style Sheets) for page layout. So the attributes mentioned in this article are deprecated in HTML 4.01, "deprecated" meaning not recommended because they may not work in future browsers.
The attributes mentioned in this article are not required to work at all in HTML 5 compatible browsers. So if you intend to use them, make sure you put the HTML 4 DOCTYPE statement at the top of your webpage, as shown below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The DOCTYPE statement informs the browser on how to interpret your code.
More HTML Code:
• HTML Special Characters - Character Entities
• Line Breaks in HTML
• HTML5 Nav Element
• How to Debug HTML
• Webpage DOCTYPE Declarations Explained
• Aligning an Image on Your Web Page
• The Heading Tags
• HTML SPAN Basics
• How to Make a Table Scroll
• HTML Table Basics