Telegram Group Join Now

How to add Image in HTML

The <img> tag in Html | Add Image In HTML

Hey friends, today I’ll teach how to Images in HTML. The most simple, easy, and common method to add images in HTML is through the <img> tag. Img actually stands for Image.

However, I honestly find the <img> tag really interesting. This is because usually HTML tags have a start tag and close tag but the <img> tag does not have a close title.

Okay, now that you’ve understood about <img> tag, let’s see how to link it to your image file path.

src attribute

<html>
  <head>
      <link rel="stylesheet" type="text/css" href="style.css">
  </head>
<body>
   <img src="https://1.bp.blogspot.com/-0PSY8oWAlAE/YQqjTM34buI/AAAAAAAAAE4/qEZSlzdfppoTMvK4XknFGmcU53Fw2bXVgCLcBGAsYHQ/w400-h225/InShot_20210804_191532666.jpg">
</body>
</html>

Inside it, our <img> tag, add the src attribute. Src stands for source. So below is a simple example of how to combine img and src together into an HTML image.

I understand that when you see the example above, you might feel like the image is too large and you want to have some control on the image size.

5+ HTML CSS Projects With Source Code

We can do it with basic inline CSS. Don’t get shocked when you hear that we need to use CSS, because it’s a super simple job.

Styling HTML Image Size

We can style the image size by using the style attribute and adding simple CSS inside it. Check out the code below.

<html>
  <head>
      <link rel="stylesheet" type="text/css" href="style.css">
  </head>
<body>
    <img src="https://1.bp.blogspot.com/-0PSY8oWAlAE/YQqjTM34buI/AAAAAAAAAE4/qEZSlzdfppoTMvK4XknFGmcU53Fw2bXVgCLcBGAsYHQ/w400-h225/InShot_20210804_191532666.jpg" style="width:50%;height:60px;">
</body>
</html>

Output…

And that’s it! You can now add images to your HTML Code to make it better.

Create A Travel Website Using HTML & CSS

comment down below any doubts or suggestions you have. I hope this post was useful and thanks to Code With Random for giving me the chance to write here I hope to see you all in future posts. Goodbye!

Thank You!

Written by: @codingporium

How to add Image in HTML? Tag in HTML

Telegram Group Join Now

How to add Image in HTML

The <img> tag in Html | Add Image In HTML

src attribute

Inside it, our <img> tag, add the src attribute. Src stands for source. So below is a simple example of how to combine img and src together into an HTML image.

Telegram Group Join Now

Leave a Comment Cancel reply