HTML Image
Example
Norwegian Mountain Trip
Online Example
Insert Image from Different Location
(More examples can be found at the bottom of this page.)
HTML Images - Image Tag (<img>) and Source Attribute (Src)
In HTML, images are defined by the <img> tag.
The <img> tag is empty, meaning it contains only attributes and no closing tag.
To display an image on the page, you need to use the source attribute (src). The src attribute stands for "source". The value of the source attribute is the URL address of the image.
The syntax for defining an image is:
The URL refers to the location where the image is stored. If an image named "pulpit.jpg" is located in the images directory of www.tutorialpro.org, its URL would be http://www.tutorialpro.org/images/pulpit.jpg.
The browser displays the image at the location where the image tag appears. If you place the image tag between two paragraphs, the browser will first display the first paragraph, then the image, and finally the second paragraph.
HTML Images - Alt Attribute
The alt attribute is used to define a备用 text for an image.
The value of the alt attribute is user-defined.
When the browser cannot load the image, the alt attribute informs the reader of the information they have lost. The browser will display this alternative text instead of the image. It is a good practice to add the alt attribute to all images on your page, as it helps to display information better and is useful for people using text-only browsers.
HTML Images - Setting Image Height and Width
The height and width attributes are used to set the height and width of an image.
The default unit for attribute values is pixels:
Tip: It is a good habit to specify the height and width of an image. If the image specifies its dimensions, it will retain the specified size when the page loads. If the image size is not specified, the overall layout of the HTML page may be disrupted when the page is loaded.
Basic Notes - Useful Tips:
Note: If an HTML file contains ten images, then to display this page correctly, eleven files need to be loaded. Loading images takes time, so our advice is to use images sparingly.
Note: When loading a page, pay attention to the path of the image inserted into the page. If the position of the image is not set correctly, the browser will not be able to load the image, and the image tag will display a broken image.
More Examples
HTML Image Tags
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area within an image map |