HTML img syntax
<img src="https://bit.ly/3xuNPz2" alt="waterfall" width="250px" height="250px">
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.
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.
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
|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.|
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:
- HTML color codes
- How to create perfect HTML tables
- Best way to create HTML table with HTML and CSS
- How to create perfect CSS background images
- How to center an image in HTML?
- How to change background color in HTML?
- How to disable scrolling in HTML?
- How to change text color in HTML?
- How to link CSS to HTML?
- HTML comments
- HTML image tags