In the previous post, we have learned how to add lists, quotations, and comments to an HTML page. In this post, we will learn how to add images and videos to an HTML page.

Images:

Images are used to display the information graphically. To add images, we use the <img> tag. The “src” attribute is used to define the source/URL of the image. The “alt” attribute is used to add alternate text for the image. The alternate text is shown when the image is not loaded due to any reason. The width and height attributes are used to define the width and height of the image. See the following code example.

<img src="demo.jpg" alt="This is a demo image" width="350" height="300"/>

Please make sure that you have placed an image named “demo.jpg” inside the folder where you have your “index.html” file.

Videos:

We use the <video> tag to add videos to an HTML page. The width and height attributes can be used to adjust the width and height of the video. The “controls” attribute can be used to decide whether to show video controls or not. The <source> tag is added inside the <video> tag to define the source/URL of the video. The type attribute of the source tag is used to define the type of the video e.g. “video/mp4”. The text was written before the </video> tag i.e. ” Your browser does not support HTML videos ” and is displayed when the browser of the user doesn’t support HTML videos. See the following code example:

<video width="350" controls>
        <source src="demo.mp4" type="video/mp4"/>
        Your browser does not support HTML videos
</video>

Please make sure that you have placed a video named “demo.mp4” inside the folder where you have your “index.html” file.

Video Tutorial:

Got Stuck? Any Questions?

In case of any questions, please feel free to ask in the comments section. Thanks