HTML Images Tutorial And Its Attributes

  • Post category:HTML
  • Post author:
  • Post last modified:August 30, 2021
  • Reading time:4 mins read
You are currently viewing HTML Images Tutorial And Its Attributes

Why Insert an Image In HTML?

Images make your document structure more clear and understandable. Also improves your document design and makes it more beautiful.

How To Insert Image?

With the <img> tag you can insert an image on your document. When you insert an image you must be defined the source of the image with the “src” Attribute.

<img src="mango.jpeg">

The alt Attribute

When you insert an image you must use the alt Attribute. It contains the alternative text of the image. If any reason image is missing the alt Attribute text will be shown there.

<img src="mango.jpeg" alt="images of a mango">

The alt Attribute also helps you improve in SEO.

Basic Style of an Image

When you insert an image on your document it shows in its 100% size. For a better look, you have to add some style resize the image.

You can use the style Attribute or use width and height attribute. And also you can write it style in <style> tag in head section or use the external CSS file.

Using style Attribute

<img src="mango.jpeg" alt="images of a mango" style="width:200px; height200px;">

Using width and height Attribute

<img src="mango.jpeg" alt="images of a mango" width="200px;" height="200px"> 

Using the <style> Tag

<style>
img{
  width:200px;
  height:200px;
}
</style>

You can also add style using the external CSS file

img{
  width:200px;
  height:200px;
}

Style Guide

If you properly know the ratio of the image then you can define both width and height attribute. Otherwise, if you don’t know the proper size of the image then declared the one value width or height of the image the other property will be adjusted automatically.

How To Define Image Source

Images on The Same Folder

<img src="mango.jpeg" alt="images of a mango">

Images on The One Level Down Folder

<img src="folder_name/mango.jpeg" alt="images of a mango">

Images on The One Level up Folder

<img src=".../folder_name/mango.jpeg" alt="images of a mango">

Images on Another Website

<img src="url_of_the_image" alt="images of a mango">

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply