HTML images – HTML img tag

  • Reading time:12 mins read

HTML img syntax

<img src="https://bit.ly/3xuNPz2" 
alt="waterfall" width="250px" height="250px">

 

HTML img tags

 

HTML How to Add Image – the <img> tag 

If you want to display images on your website, you need to include an image embed tag in the HTML code. By using various attributes, we can change the size of the images. In this article, we will discuss these attributes, along with editable examples.

Fun fact: the images are technically not pasted to the website, they are linked. The <img> tag creates a place for the image.

The <img> tag is a self-closing tag, so it does not have a closing tag, nor any elements between two tags. Instead, it contains attributes that are written inside the tag.

HTML image link – img src, alt

There are two mandatory attributes to add, one is the source of the image, i.e. where the browser will find the image to paste it from. This can be specified with the src attribute.

It is important that the image is uploaded to some hosting site on the internet as the browser cannot access the image directly from the computer.

<img src="https://bit.ly/3xuNPz2">

 

 

The other attribute you need to specify when inserting an image is alt text—short for alternative text—that appears on the screen if the browser cannot reach the inserted image, for example, because it has been deleted from the storage where it was uploaded. The alt text can be specified with the alt attribute, written in the img tag.

 

 

Another important feature of alt text is that for blind and visually impaired users, the reading software will read out the alt text behind the displayed images on the page.

HTML image sizing – width and height

Image sizes can be set in HTML using the width and height attributes, specifying the size of the image in pixel points.

<img src="https://bit.ly/3CBurUT"
alt="waterfall" width=”250px” height=”250px">

Another option is to specify width and height with the style attribute.

This has the advantage that CSS formatting will not affect the size of the image.

<img src="https://bit.ly/3CBurUT" alt="waterfall" 
style="width:250px;height:250px;">

 

 

HTML image centering

On a website, images can be centred vertically or horizontally. There are several ways to do this, each of which we have described and explained in detail in our separate article on HTML image centring.

Enlarging images in HTML

Images can be enlarged or reduced in HTML by setting the width and height parameters. This is described in detail above in the “HTML image sizing” section.

HTML image positioning

In HTML, we can align the image to the right, centre, or left using the align attribute, and we can also position it vertically on the page. You can read more about this in our article, HTML – Centering an image.

HTML image layout

If you insert an image in your HTML code, by default it will appear on the same line as the first line of the following text, like this:

 

 

If you want to avoid this to get the text to appear below the image, you simply need to place the text below it in a new paragraph <p>, or any block type element, like this:

 

Insert image next to text in HTML

You can insert the image next to the text using the CSS float property.

 

<img src="https://pbs.twimg.com/profile_images/1195269024738885633/DSqqyRNr_400x400.jpg" 
alt="Programmer cat" 
width="250" height="300" hspace="20" 
style="float:left" >

 

In the example, we floated the image to the left of the text, using float:left. The hspace attribute was needed because if the distance between the edge of the image and the text is not specified, they will stick together. In this case, we specified the distance to be 20 pixels.

 

 

Attributes that can be written inside the <img> tag

 

attribute description
alt Alternate text
crossorigin Allows you to configure how the browser handles cross-origin images (images from external sources). 
height Specifies the height of the image
ismap Defines an image as a server-side interactive image (image-map).
loading Determines whether the browser loads the image immediately or only if certain conditions are met.
longdesc Provides a URL with a detailed description of the image.
referrerpolicy Specifies which reference information to use when retrieving the image.
sizes Defines image sizes for different screen layouts.
src Specifies the path of the image.
srcset Provides a list of image files to display in different situations.
usemap Defines the image as a client-side interactive image (image map).
width Specifies the width of the image.

 

Summary

If you’d like to see more programming tutorials, check out our Youtube channel, where we have plenty of video tutorials in English.

In our Programming Tutorials series, you’ll find useful materials which will help you improve your programming skills and speed up the learning process.

HTML and CSS:

JavaScript:

Java:

Other materials:

Learn to code and change your career!

100% ONLINE

IDEAL FOR BEGINNERS

SUPPORTIVE COMMUNITY

SELF-PACED LEARNING

Not sure if programming is for you? With CodeBerry you’ll like it.