Image and Video Tag in HTML

Last Updated on September 25, 2023 by Mayank Dham

HTML image tag allows us to add various features to our websites, one of which is the ability to add multimedia to our websites, such as images and videos. Using the html image and html video tags, we can add images and videos to our website. As we progress through this blog, we will learn about the HTML image tag and the HTML video tag.

What is HTML Image Tag?

The HTML image tag is one of the most used and important tags that is used by programmers or developers. As the name suggests this is used to add or embed images on a web page. This is one of the self-closing tags which means it does not require a closing tag to work. The HTML image code will look like as shown below:

< img src=" image.jpg " alt=" a picture of a mountain">

In the above HTML image code, the src will specify the URL of the image that needs to be displayed. It will tell the browser where should it look to get the file.
The alt attribute will display the result in case the image does not load properly so it will show the alternate text for the image. You can also use the alt attribute as a description of the image in words. This attribute is considered to be good mainly for SEO purposes.

The Importance of HTML Image Tag

The HTML image tag is very much important for developers as:

• It can enhance the visual appearance and the experience of the website.
• We can use the HTML Image tag to display logos, images, posters, photographs, and other visual content.
• We can also use images in the form of charts and diagrams that are used to convey information.

Attributes of HTML Image Tag

We have explained the attributes above but there are certain extra attributes that we can use with the HTML image tag. Some of them are discussed below:

• height: It will decide the height of the image that will be visible on the webpage in pixels.
• width: This will decide the width of the image that will be visible on the webpage in pixels.
• sizes: It will define the size of the image for different page layouts.
• loading: This will tell the browser whether it should load the image immediately with the websites or should wait until some of the conditions are met.

Example

Now we will discuss the example of an HTML image tag.

Code
< img src="./sample.png" alt="HTML Image" height="100px" width="120px" >

Output

Explanation
In the above code, we have an image of an HTML logo and have mentioned it in the alt tag, we have set the height and width of the image accordingly and specified the path in the src.

What is HTML Video Tag?

The HTML video tag was introduced in HTML 5. As the name suggests it is used for streaming video files like song clips, movie clips, promotion clips, etc. THe video tag can contain one or more than one source tag depending on the number of videos attached with it.
There are mainly three formats of videos supported currently by HTML video tags and they are:

• mp4
• webM

• ogg
  The HTML video tag will look like this:

  < video src="video.mp4" controls>

The src will define the source of the video that where should the browser must look to get the video.

Importance of HTML Video Tag

Some of the importance of the video tag is given below:

• The size of the video can be responsible for the optimization of the website as the large size of the video can lead to a reduction in the performance of the website.
• The videos will lead to the response design of the websites.
• The video size must change on every device based on its screen size.

Attributes of HTML Video Tags

We have explained the src attribute in the above part of this blog now we will look at some of the other attributes of the HTML Video Tags.

• Controls: This attribute will add the playback controls to the video player like play, pause, etc.
• Height: It will set the height of the frame where the video is visible on the webpage.
• Width: It will set the width of the frame where the video is visible on the webpage.
• Poster: It is used to set the thumbnail of the video player.

Example

In this blog section, we will discuss the example of an HTML video tag.
Code

< video width="320" height="240" controls>
    < source src="./pexels-mart-production-7565438-1080x1920-25fps.mp4" type="video/mp4">
    Your browser does not support the video tag.
  < /video>

Output

Explanation
In the above example, you can see that we have used a video tag and first we have set the height and width of the player that will be visible on the screen. We have also added the controls option and with this, we have the playback controls. The source will tell the browser where should it look to get the video.

Conclusion
We learned about the HTML image tag and the HTML video tag in this article. Along with this, we learned about the significance of both tags and the additional attributes that can be added to each tag. Finally, we went over an example of each tag, complete with code and explanation.

Frequently Asked Questions (FAQs)

Here are some of the frequently asked questions about image and video tag in HTML.

Q1. What is the purpose of the < img> tag in HTML?
The < img> tag is used in HTML to embed images or graphics into a web page. It allows you to display images on a webpage by specifying the image source using the src attribute.

Q2. How do I specify alternative text for an image using the < img> tag?
To provide alternative text for an image, you can use the alt attribute within the < img> tag. This text is displayed if the image cannot be loaded or for accessibility purposes, assisting users with visual impairments.

Q3. What is the < video> tag used for in HTML?
The < video> tag is used to embed videos or multimedia content on a web page. It allows you to include video files and specify playback controls, dimensions, and other attributes to control how the video is presented and played.

Q4. What video formats are supported by the < video> tag?
The supported video formats can vary depending on the web browser, but common formats include MP4 (H.264), WebM (VP8 and VP9), and Ogg (Theora). To ensure compatibility across different browsers, it’s a good practice to provide the video in multiple formats using theelement within the < video> tag.

Q5. How to control the playback of a video using HTML and the < video> tag?
You can control the video playback using various attributes and elements within the < video> tag. Some common attributes include controls to display playback controls (play, pause, volume, etc.), autoplay to start playback automatically, and loop to make the video repeat. Additionally, you can use JavaScript to implement custom playback controls and interactivity with the video element.