HTML Image

Images are essential for a website. Images are added to a website for making it more meaningful in content and attractive to look upon. An appropriate image will enhance the text specified. HTML Image tag  <IMG> </IMG> is used to insert images in a webpage. The images can also work as hyperlinks with HTML Anchor tag.  

Features of HTML Image tag

  • HTML image tag is primarily a paired tag. It works even if the end tag </IMG> is omitted.
  • The images will appear in line with the text automatically getting arranged around the embedded image.
  • The image to be displayed must be uploaded in the memory space of the website. Its name and path must be specified in the Source (SRC) attribute. It is preferred that a dedicated folder stores the images of a website to have properly organized website resources.
  • Any image format can be added in a web page. The preferred ones are JPEG, GIF, PNG, TIFF etc.
  • The images can be resized within a page by specifying its WIDTH and HEIGHT attributes.
  • Images can be embedded by specifying the relative path or absolute path on the image.

Attributes of HTML Image

SRC

SRC attribute is used to define the path of the image stored in a specified  folder.

ALT

ALT stands for Alternate Text.  ALT attribute is used to display a text if the image is not available. The image may not be available due to any reason. The image might have been deleted or moved mistakenly or it has not been named correctly in the SRC attribute.

ALIGN

The images are associated with the paragraphs of text or the container element of the image. The images can be aligned using the ALIGN attribute to define the final look of the image with respect to the text. ALIGN attribute take any one value from LEFT, RIGHT, TOP, BOTTOM or MIDDLE. By default image will be aligned to left.

DIR

DIR defines the direction of the non aligned image. Possible values are LTR for left to right or RTL for right to left.

ID

This attribute is used to give identification to an image element created with <IMG></IMG> tag. The ID must be an alphanumeric string. The ID value for each element of web page must be unique. This ID is used in a script to manipulate the image with interaction of the user.

CLASS

This attribute is used to associate an image with a class defined in a style sheet associated with the page or website. The style sheet element specifies the consistent style for multiple elements in a web page.

STYLE

Style attribute is used to add additional styling to an image. You can set styles in a string with CSS element and value pairs separated by semicolons.

TITLE

Title attribute is used to set tooltip text for an image. When the user rests the mouse cursor on the image, a value assigned to TITLE attribute appears in a small outlined box.

BORDER

Border is the outline around the image to define its boundary. BORDER attributes take an integer value in pixels to define the width of the line created as border of the image.

HEIGHT

The HEIGHT attribute of the HTML image tag is used to define the height of the image in pixels or the % of the container element. If your image is of bigger size you can set the height of the image within the web page code. The height of the original image will remain intact.

WIDTH

The WIDTH attribute of the HTML image tag is used to define the width of the image in pixels or the % of the container element. If your image is of bigger size you can set the width of the image within the web page. The width of the original image will remain intact.

HSPACE

HSPACE is Horizontal space. This attribute accepts integer value as count of pixels to give space on the left and the right side of the image.

VSPACE

HSPACE is vertical space. This attribute accepts integer value as count of pixels to give white space on the top and the bottom of the image.

Example of HTML Image 

<TITLE> Welcome to CSVeda.com </TITLE>
<HTML>
<BODY bgcolor="Yellow">
<H3 ALIGN="CENTER">Using Images in a Website</H3>

<P>Left<IMG src="flower.jpg" HEIGHT="20%" WIDTH="20%" ALIGN="LEFT" ALT="Flower"></IMG></P>
<P>Right<IMG src="flower.jpg" HEIGHT="20%" WIDTH="20%" ALIGN="RIGHT" ALT="Flower"></IMG></P>
<P>Middle<IMG src="flower.jpg" HEIGHT="20%" WIDTH="20%" ALIGN="MIDDLE" ALT="Flower"></IMG></P>
<P>With Border<IMG src="flower.jpg" HEIGHT="20%" WIDTH="20%" BORDER="10px" ALT="Flower"></IMG></P>
<P>WIth Vertical and Horizontal Space<IMG src="flower.jpg" HEIGHT="20%" WIDTH="20%" HSPACE="20px"  VSPACE="20px" ALT="Flower"></IMG></P>
</BODY>
</HTML>
HTML Image output