Insert imagesHow to insert images
into an HTML document.
Insert images from different
locationsHow to insert an image from another folder or another server.
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no
To display an image on a page, you need to use The source attribute. Src stands for "source". The
value of The source attribute is the URL of the image you want to display.
Syntax for defining an image:
The URL points to the location where the image is stored. An image named "study.png", located in
the "images" directory on "www.qctutorials.com" has the URL:
The browser displays the image where the <img> tag occurs in the document. If you put an
image tag between two paragraphs, the browser shows the first paragraph, then the image, and
then the second paragraph.
The required alt attribute specifies an alternate text for an image, if the image cannot be
The value of the alt attribute is an author-defined text:
The alt attribute provides alternative information for an image if a user for some reason cannot
view it (because of slow connection, an error in The source attribute, or if the user uses a
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
Hint: It is a good practice to specify both the height and width attributes for
an image. If these attributes are set, the space required for the image is reserved when the
page is loaded. However, without these attributes, the browser does not know the size of the
image. The effect will be that the page layout will change during loading (while the images
Note: If an HTML file contains ten images - eleven files are required to display the page
right. Loading images take time, so my best advice is: Use images carefully.
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the
image from a web server and inserts it into the page. Therefore, make sure that the images
actually stay in the same spot in relation to the web page, otherwise your visitors will get a
broken link icon. The broken link icon is shown if the browser cannot find the image.
aligning imagesHow to align
an image within the text.
Let the image floatHow to
let an image float to the left or right of a paragraph.
Make a hyperlink of an imageHow
to use an image as a link.
Create an image mapHow to create
an image map, with clickable regions. Each of the regions is a hyperlink.
Your Query was successfully sent!