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.

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

 

 

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:

• 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

JavaScript:

• Best way of using the JavaScript forEach method

Java:

• Best way of using Java arrays and arrayLists

Other materials:

• Best programming books you must read in 2021
• Programming games you can play to learn without effort