In HTML, you can add images to your web page using the <img>
tag. The <img>
tag is an empty tag, which means it does not have a closing tag. Instead, you can specify the image source and other attributes using the tag’s attributes.
Here’s an example of how to add an image to a web page:
<img src="image.jpg" alt="A beautiful landscape">
In this example, we have used the src
attribute to specify the source of the image. The alt
attribute provides alternative text for the image, which is used by screen readers and can also be displayed if the image cannot be loaded for some reason.
You can also specify the size and alignment of the image using the width
, height
, and align
attributes. Here’s an example:
<img src="image.jpg" alt="A beautiful landscape" width="500" height="300" align="left">
In this example, we have used the width
and height
attributes to set the dimensions of the image. The align
attribute specifies the alignment of the image within the surrounding text.
You can also add a caption to an image using the <figure>
and <figcaption>
tags. Here’s an example:
<figure>
<img src="image.jpg" alt="A beautiful landscape">
<figcaption>A beautiful landscape</figcaption>
</figure>
In this example, we have used the <figure>
tag to group the image and its caption. The <figcaption>
tag is used to provide a caption for the image.
When adding images to your web page, it’s important to optimize the image file size for faster loading times. You can use image editing software to resize and compress your images before uploading them to your web server.
The src
attribute is used in HTML to specify the source file (URL) of an image, audio, video, or other media that is to be embedded in a web page.
The syntax for using the src
attribute is as follows:
<source-element src="URL">
Here, source-element
refers to the specific HTML element (e.g. <img>
, <audio>
, <video>
) that you are using to embed the media file in your web page. The src
attribute is then used to specify the URL or file path of the media file that you want to embed.
For example, if you wanted to embed an image of a cute kitten in your web page, you would use the following code:
<img src="https://www.example.com/images/kitten.jpg" alt="A cute kitten">
Here, the src
attribute specifies the URL of the image file, which is located at https://www.example.com/images/kitten.jpg
. The alt
attribute provides alternative text for the image, which is displayed if the image cannot be loaded for some reason.
Note that the src
attribute is required for any media element that you wish to embed in your web page. If you omit the src
attribute, the media element will not be displayed or played on the web page.