- 3.1 HTML Image Syntax
- The alt Attribute
- Image Size- Width and Height
- Images in Another Folder
- Images on Another Server
- Previous Section
- Next Section
3.1 HTML Image Syntax
In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does do not have a closing tag.
The src attribute specifies the URL(web address) of the image:
The alt Attribute
The alt attribute provides an alternate text for an image if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). If a browser cannot dins an image it will display the value of the alt attribute. The value of the alt attribute should describe the image
Note: The alt attribute is requires. A webpage will not validate correctly without it.
Image Size- Width and Height
You can use the width and height attributes to specify the width and height of an image. The width and height attributes always define the width and height of the image in pixels.
Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute.
Images on Another Server
Some web sites store their images on image servers. Actually you can access images from any web address in the world.
Example (students should download an image off the web):
<!DOCTYPE.html> <html> <head> <meta charset = "utf-8"> <title> Images</title> </head> <body> <img src = "example.png" width="200px" height="150px" alt="html"> <img src ="https://freenaturestock.s3.us-east-1.amazonaws.com/1676.jpg" width ="200px" height="120px" alt ="nature"> </body> </html>