The HTML <img> tag adds an image to a web page. Use the src attribute to specify the location of the image you want to bed. The alt attribute is often used to display text in place of an image if the image cannot load.
When the web was first invented, web pages could only display text. However, the ability to add an image to a web page was quickly added. Since then, images have become an important part of most pages on the web. From logos to photographs, images are everywhere on the internet.
This tutorial will discuss how to use the <img> tag to work with HTML Images as a web developer. We’ll also talk about a few of the main attributes you can use with the <img> tag.
HTML Image Tag
The HTML <img> tag adds an image onto a web document. Use the src attribute to specify the location of the image you want to embed. This can be a file on your computer or a URL to another file. The alt attribute lets you specify alternative text that appears if the image cannot load.
Here’s the syntax for the HTML <img> tag:
<img src="house.png">
The <img> tag has no closing tag. Instead, the tag ends with “/>”. This denotes that the <img> tag does not need a separate closing tag. The <img> tag is supported in all browsers.
HTML assumes that the folder storing your HTML file is the same folder that stores any image to which you refer. This behavior can be ignored by specifying an exact file path or URL where an image can be found.
In the above syntax, our <img> will reference the file house.png. This file is in the same folder as the HTML file with which we are working.
However, if we were storing our image files in another folder—called pictures, for example—we would use this code:
<img src="pictures/house.png">
If we want to embed an image from an external source, we can use an absolute URL. Here’s an example of an <img> tag referencing an external image:
<img src="https://www.example.org/pictures/house.png">
That said, it is usually best to reference an image from a local file whenever possible. This is because referencing an external image makes the browser do more work than when it retrieves an image from a local file.
HTML Image Example
Let’s explore an example of the HTML <img> tag in action. Suppose we are building a website for a local coffee house, The Golden Roast. The Golden Roast wants an image of a cup of coffee to appear on their homepage.
The file they gave us to add to the web page is called coffee.png. The folder that stores our HTML page also stores this image. To add this image to our site, we can use the following code:
<body> <h1>The Golden Roast</h1> <img src="coffee.png"> </body>
Our code returns:
Let’s break down our code. First, we used a <body> tag, which stores the main elements of our web page. Then, we used an <h1> tag to define a heading on our page. The text of this heading is: The Golden Roast.
On the next line, we used an img element to add an image—called coffee.png—to our code. This image is contained within the same folder as our HTML file. As a result, we didn’t need to point to a folder using the src attribute. We just specified the name of the file.
Image HTML: Alternative Text
Adding alternative text is an important part of working with images in HTML. Alternative text, represented by the attribute alt, is a textual description of an image.
There are a number of reasons why you should specify an alt attribute when working with images. Alt text:
- Describes an intended but nonexistent image. Alt text is useful if the image cannot be found—for example, because that file does not exist in the folder you specify.
- Describes an intended but slowly-loading image. If the web page visitor has a slow connection, there may be a delay in loading the image.
- Improves accessibility. If the visitor is using a screen reader, having alt text will allow them to hear a description of the image.
Alt text ensures that if an image cannot be rendered for whatever reason, the web page will still present some text to the user. If you do not specify alt text and an image is broken, a broken image icon will appear.
HTML Alternative Text Example
Suppose we want to add an alt attribute to the image in our coffee house example above. The alt text we want to specify is Roasting coffee, surrounded by coffee beans on a light brown wooden table. We can add this alt text using the following code:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" alt="Roasting coffee, surrounded by coffee beans on a light brown wooden table."> </body>
Now, suppose that someone moves our coffee.png file to another folder. As a result, our web page can no longer find the file. This will cause our alt text to appear on the web page because the image cannot be found. Here’s an example of what a visitor will see on our web page in this case:
When you’re adding an alt attribute, try to keep it brief, and use it to describe the image itself. In our coffee example, we described what the image of the coffee contains. We would not want to repeat text that is already on the page because that would be confusing to users.
HTML Image: Title
You can use the title attribute to provide additional information about an image. When used, the title attribute provides a tooltip that appears when a user hovers over an image with the mouse.
The title attribute can be useful if you want to add a tooltip to an image. However, the title attribute does not have screen reader support, and it is not visible on mobile devices (which have no mouse).
Suppose we want to add a title attribute with the value A cup of coffee on a table to our image from earlier. We can use the following code to do so:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" alt="Roasting coffee, surrounded by coffee beans on a light brown wooden table." title="A cup of coffee on a table"> </body>
When we hover over the image with our cursor, the contents of the title tag appear.
HTML Image Size: Width and Height
You can use the image width and height attributes to specify the width and height of an image, respectively.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Let’s return to our coffee house example. Suppose we want our coffee image to be 400 pixels wide by 400 pixels long. We don’t want this image to take up too much space on the web page. We could use the following code to specify these parameters:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" width="400" height="400"> </body>
Our code returns:
As you can see, our image in this example is smaller than the one from earlier. In our first example, our image was 500×500. Now, our image is 400×400. This is because we specified both a height and width attribute and set each to 400.
HTML Image: Positioning the Image
When you’re working with an image, you may decide that you want it to float to the left or right of the page. Float refers to the horizontal alignment—left or right—of the image on the page. That’s where the CSS float attribute comes in.
Suppose we want our coffee image from earlier to appear on the right side of the page. We can make this happen using the following code:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" width="400" height="400" style="float:right;"> </body>
Our code returns:
We used the float:right; attribute within a style attribute. This lets us specify that our image should float to the right of our page.
Conclusion
You can use the <img> HTML tag to place an image on a web page. Images can be rendered from a local file or folder or from an external source.
This tutorial discussed how to work with the <img> tag in HTML. We also talked about how to use a few of the attributes offered by the HTML <img> tag. Now you’re equipped with the knowledge you need to start using images in HTML like a pro!
Do you want to learn more about HTML? Check out our How to Learn HTML guide for expert tips and a list of online courses and learning resources.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
