Inserting images in web pages is done by placing an
img tag in the HTML code. The
is an empty tag. Its
src attribute is used to reference an image file using a relative or absolute path. The syntax is shown below:
The following page shows how to use the
To add alternative text for an image, use the
<img src="logo.png" alt="Logo">
Alternative text is displayed...
- When the user's browser does not support images.
- As the image is downloading.
- When the user hovers over the image with the mouse (in some browsers).
Alternative text can also be used by screenreaders to describe an image for the visually impaired.
If an image depicts something complicated, such as a graph or chart, a long description of the image can be provided on a separate page.
longdesc attribute of the
<img> tag is used to point to that description. For example:
img element also takes
width attributes that set the dimensions
(in pixels) to use to display the image on the page. It is not good practice to "resize" the image using these attributes.
If you use these attributes, you should set the values to the actual height and width of the image. Using the
attributes lets the browser know how much space to allocate for the image without having to wait for the image itself to download. Use of these attributes
may promote faster rendering of the web page.
<img src="logo.png" alt="Logo" height="100" width="300">