| <img src=”image.jpg” alt=”Flowers”> |
The <img> tag in HTML is utilized for embedding images within a webpage.
Rather than being physically inserted, images are externally linked to the webpage, with the <img> tag serving as a placeholder for the specified image.
Notably, the <img> tag is a self-closing element, consisting solely of attributes and lacking an end tag.
| <img src=”url“ alt=”alternatetext“> |
The essential ‘src‘ attribute determines the image’s path or URL.
Keep in mind, it is during the webpage loading process that the browser retrieves the image from a server to display it on the page. Hence, it’s crucial to maintain the image’s location consistent relative to the webpage to prevent the appearance of a broken link symbol to your visitors. If the browser fails to locate the image, it will display a broken link icon along with the ‘alt’ text, which serves as an alternative description.
| <img src=”your image source/image.jpg” alt=”image name”> |
When an image cannot be located by a browser, it will show the text specified in the ‘alt’ attribute instead.
The required alt attribute provides alternate text for an image if the user cannot view it for some reason, such as a slow connection, an error in the src attribute, or the use of a screen reader.
The alt attribute’s value should describe the image:
| <img src=”img_chania.jpg” alt=”Flowers in Chania”> |
| <img src=”wrongname.gif” alt=”Flowers in Chania”> |
| Tip: A screen reader is a software program that interprets the HTML code, enabling users to “listen” to the content. Screen readers are particularly helpful for individuals who are visually impaired or have learning disabilities. |
The ‘style‘ attribute can be employed to define the dimensions of an image, including its width and height.
| <img src=”image.jpg” alt=”your image” style=”width:500px;height:600px;”> |
The width, height, and style attributes are all valid in HTML.
However, we recommend using the style attribute as it prevents stylesheets from altering the size of images.
|
<!DOCTYPE html>
|
When your images are located in a sub-folder, it’s necessary to include the folder name in the src attribute.
| <img src=”/images/image.gif” alt=”image Icon” style=”width:128px;height:128px;”> |
To link to an image hosted on a different server, you need to use a complete URL in the ‘src’ attribute, known as an absolute URL.
| <img src=”https://code7school.com/images/image.jpg” alt=”code7school”> |
Important Information : Considerations for using external images: Such images may be protected by copyright, and using them without authorization could infringe on copyright laws. Moreover, you have no control over external images; they could be deleted or altered without notice.
Animated Images
HTML supports animated GIFs.
| <img src=”programming.gif” alt=”Computer Man” style=”width:48px;height:48px;”> |
For an image to act as a link, place the <img> tag within the <a> tag.
|
<a href=”https://code7school.com/”> |
Utilize the CSS float property to position the image to the left or right of text.
| <p><img src=”smiley.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”> The image will float to the right of the text.</p> <p><img src=”smiley.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”> The image will float to the left of the text.</p> |
<img> tag in HTML to insert an image.