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.
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="bottom" - default
<img align="middle" src="cherry.jpg" />
<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.
<img align="left" src="cherry.jpg" />
<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
<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.
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.
Learn more at amazon.com
More HTML Code:
• Use an Image as a Form Submit Button
• HTML Bulleted or Unordered List
• XHTML Basics
• HTML Editors
• The Heading Tags
• Using col and colgroup to Apply Attributes to a Table Column
• Changing the Size of an Image on Your Webpage
• HTML abbr and acronym Tag
• Form Input Labels
• Block and Inline HTML Elements