Images can enhance the design and appearance of a web page.
HTML Image Syntax
The HTML tag is used to embed an image in a page. Web.
Technically, images are not inserted into a web page; the images are linked to web pages. The tag creates a holding space for the referenced image.
The tag is empty, contains only attributes, and does not have a closing tag.
The tag has two required attributes:
- src: specifies the path to the image
- alt: specifies an alternative text for the image
The src attribute
The required src attribute specifies the path (URL) to the image.
Note: when a web page is loaded, it is the browser, at that moment, that obtains the image from a web server and inserts it into the page. So make sure that the image actually stays in the same place relative to the web page, otherwise your visitors will get a broken link icon. The broken link icon and alt text are displayed if the browser cannot find the image.
The alt attribute
The required alt attribute provides alternative text for an image, if the user for some reason cannot see it (because of a slow connection, an error in the src attribute, or if the user is using a screen reader).
The value of the alt attribute should describe the image:
If a browser cannot find an image, it will display the value of the alt attribute:
Image size: width and height
You can use the style attribute to specify the width and height of an image.
Alternatively, you can use the width and height attributes:
The width and height attributes always define the width and height of the image. image in pixels.
Width and height or style?
The width, height, and style attributes are all valid in HTML.
However, we suggest using the style . Prevents style sheets from resizing images:
Images in another folder
If you have your images in a subfolder, you must include the folder name in the src attribute :
Images on another server/website
Some websites point to an image on another server.
To point to an image on another server, you must specify an absolute (full) URL in the src: attribute:
Notes on external images: External images may be protected by copyright. If you do not get permission to use it, you may be violating copyright laws. Also, you cannot control external images; they can be removed or changed suddenly.
Animated Images
HTML allows animated GIFs:
Image as Link
To use an image as a link , place the tag inside the tag:
Floating Image
Use the CSS float property to let the image float left or right . to the left of a text:
Common Image Formats
These are the most common image file types, supported by all browsers (Chrome, Edge, Firefox, Safari, Opera):
Abbreviation File Format File Extension APNG Animated Portable Network Graphics .apng GIF Graphics Interchange Format .gif ICO Microsoft Icon .ico, .cur JPEG Joint Photographic Experts Group Image .jpg , .jpeg, .jfif, .pjpeg, .pjp PNG Portable Network Graphics .png SVG Scalable Vector Graphics .svg
Chapter Summary
- Use the HTML
element to define an image
- Use the HTML src attribute to define the URL of the image
- Use the HTML alt attribute to define an alternative text for an image, if it cannot be displayed
- Use the HTML width and height attributes or the CSS width and height properties to set the size of the image
- Use the CSS float property to drop make the image float left or right
HTML exercises
Test yourself with exercises
HTML image tags
Description of the tag Defines an image