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 dont know, how to add image or video. You can continue reading this blog.

Image in HTML

So, in todays 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 doesnt 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 dont want any text info, right ? Thats 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 lets 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 cant 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 cant 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