Know The Basic Image HTML Tags

Just as the text formatting tags, there are defined HTML tags for formatting Images too. In HTML, images are defined with a special tag <img> and there are certain formats to display the same image known as attributes. Let’s know the basic image HTML Tags with a closer look.

Basic Image HTML Tags

<img src=”url”> – This is the basic syntax of defining and displaying an image, where the ‘src’ attribute stands for ‘source’, the value of which is the URL of the image you want to display.

<img src=”url” width=”220” height=”150”> – This is also the basic syntax of defining and displaying an image but with two more attributes, which sets the image size.

<img src=”name” align=right> – This syntax is used to define the image where the name of the image is provided in the ‘src’ attribute with your preferred alignment. You can substitute ‘right’ with ‘left’ to get a left alignment of the image.

<img src=”url” alt=”a description of the image in short”> – This is an important HTML image tagging known as ‘Alt Tag’. Here you can give a short description in the ‘alt’ attribute to tell the readers what actually is missing, in case if the image fails to load in their browser.

<a href=”link url”><img src=”url”></a> – This syntax is used to put a link to the image where the image itself acts as a link to some other page. Here, the ‘link url’ is the url of the page you want to link to with the image and the second ‘url’ is the actual location path of the image.

<img border=”1” src=”url”> – This syntax is used with the image tag to put border around the image. The number in the ‘border’ attribute sets the thickness of the border so that larger the number thicker is the border.

<img src=”url” hspace=12 vspace=12> – By this syntax you can set the spacing around the image, where the ‘hspace’ defines the horizontal space and the ‘vspace’ defines the vertical space. Also note that the numbers denoting the ‘hspace’ and the ‘vspace’ are actually the amount of pixels surrounding the image.

So, now if we put all the attributes together to define and display an image, it might look like the one below;

<a href=”img url”> <img border=”1” src=”url” width=”220” height=”150” align=right hspace=12 vspace=12></a>

This syntax displays an image of size 220 x 150 pixels with a link and having a border of 1 pixel wide, aligned on the right side of the page with a surrounding space of 12 pixels on all sides.

To know more about basic image HTML tags and try out some examples yourself, visit here.