HTML 101: Adding Images and Videos to Your Webpages

How to add image or video in a webpage. If you have these questions on your HTML learning journey. Today is time, you can clear this things.

If you want to learn whole HTML, you can watch this video tutorial. This blog is a part of it.

These things are easy but as a complete beginner in HTML. You don’t know, how to add image or video. You can continue reading this blog.

Image in HTML

So, in today’s world. We see lots of images over the internet from Instagram to Facebook to any website, even this dev to website, you can see the banner of the blog. But how we add images in pages using HTML.

Its pretty simple. In HTML, you know use use different types of tags ignorer create the elements and all the tags you see in HTML mostly has <tag> ( opening tag ) and a </tag> ( closing tag ).

But for image, in HTML we have <img> tag and this doesn’t have any closing tag. Why ??

Because whatever tag you see with closing tag. Have some written text content inside.

But in case of images. We don’t want any text info, right ? That’s why, the image tag is a self closing tag.

And this is how, you use it.

<img src=“image.png” alt=“An alternate text if image file not found”>

So this is how you can add image in HTML. So let’s about about its 2 attributes.

src - “ src “ mean source. This attribute specify the image file path.
alt - it is use to add text, if the image file not found or can’t be load for some reason. Then “alt” text will show up.

And this is how you add images in HTML, But how can you add video. Its kind of similar. There are 2 ways by which you can add video in the site.

Video in HTML

First way is that you can use <video> tag and this is similar to <img> tag. Its a self closing tag.

<video src=“video.mp4” controls autoplay muted loop>

This is how you add video. But there you can see some new attribute, which is for video element.

controls - this shows the video controls, so you can play, pause and much more.
autoplay - It autoplay the video after the page loads.

But in chrome, you can’t simply make any video autoplay. Its against chrome policy. So to make the video autoplay. You have to mute it first.

muted - and to mute the video. This attribute helps.
loop - It used to play video on loop.

So these are some common attributes of video element that you can use.

The second way, by which you can add video is actually same as this.

<video controls autoplay loop muted>

    <source src=“video.mp4” type=“video/mp4”>
    <source src=“video.mkv” type=“video/mkv”>

    A text if no video is found.

</video>

In this method, you close the <video> tag to create some content inside it. This way you can add multiple video formats using <source> tag. By adding multiple sources, you can be sure that at least one file will load.

But in case if no video found. Then, the text at the end will show up.

So this is how, you add videos and images in HTML. There are lots of other stuffs too that you can do with HTML. If you are a beginner or just want to refresh the HTML concept. Well you can watch my HTML Tutorial for complete beginners

Thanks for reading this blog. If you find this helpful, you can like this post and subscribe my YouTube channel for support. In case you have any doubt, well you can ask me in the comments. I will be happy to answer.

Have a nice day 😎