The <img> tag is used to display images and animated gifs on a webpage. You can use the <img> tag to display images, icons, logos, and buttons, bullets, arrows and other graphic or navigation elements.
<img align="left" alt="alt text" title="title text" border="0" width="156" height="225" src="worker.jpg" />
The most important attribute of the <img> tag is the src attribute. The image
will be displayed on the page if you include only the src attribute in the <img>
tag. The src attribute tells the browser where to find the image file. It sets the address
of the image, which can be either absolute or relative. An absolute path
contains the domain name, directory and subdirectory names, and the image's file name. A
relative path contains only the path from the webpage to the image file. For example,
if the image file is in the same folder as the webpage, the relative path is just the file name.
The alt attribute is also an important attribute of the <img> tag. The alt attribute defines text to be displayed if the image cannot be loaded. The title attribute defines text to displayed in a tool tip popup when the user moves their mouse over the image. The alt and title attributes are very important for search engines and to provide information to speech synthesizers for the hearing impaired.
The border attribute is used to control the border around the image. Set the border
attribute to the desired thickness of the border in pixels. One of the most common uses of the
border attribute is to set border="0" to remove the border that appears when an
image is used in a link, as shown to the right. Note; in this case you might keep the border in
order to indicate that the image is a link, but if the image were a button, you could remove
the border.
The height and width attributes specify the dimensions of the image. If a height or width value is not provided, the image will be displayed full size in that dimension. If you don't want the image displayed full size, you can specify larger or smaller dimensions, however to maintain the images aspect ratio, you need to adjust each dimention by the same percentage. If you want the image displayed full size, you can leave the height and width attributes out, however this will cause the browser to take longer to display the image.
The align attribute is used to control the alignment of the image. Note the first image in this article has align="left", while the second image has align="right". Note how the text wraps around the image. If you don't like the layout of the text wrapping, with align="right" you can use the <br clear="right"> tag to clear the text wrapping. With align="left" you can use the <br clear="left"> tag to clear the text wrapping. Or you can use <br clear="all"> to clear any previous align setting.
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.
The hspace attribute is used to specify the amount of space to the left and right of the image, and the vspace attribute is used to specify the amount of space above and below the image.
The usemap attribute is used to specify a <map> that defines areas of the image that act like links so that when the user clicks on an area, the browser loads the target webpage or media file. The areas defined do not have to be the same size or shape. Shown below is example code for an image map. The code for the map containing the tags that define the areas must come first in the code before the img tag that loads the image that uses the map.
<map name="testmap"> <area shape="rect" coords="10,10,40,40" href="page1.htm"> <area shape="circle" coords="65,30,15" href="page2.htm"> <area shape="poly" coords="90,40,120,10,150,40,90,40"href="page3.htm"> </map> <img border="0" width="160" height="50" src="testmap.gif" usemap="#testmap">
More HTML Code:
• The Heading Tags
• Webpage DOCTYPE Declarations Explained
• HTML Numbered or Ordered List
• Using del and ins Tags to Mark Up Editing on HTML Page
• Changing the Size of an Image on Your Webpage
• Easiest HTML Calculator Eample Code
• Can Enterprise Applications Be Made Using HTML5?
• HTML5 Nav Element
• HTML title Tag
• The HTML Head Tag