START A COURSE

The HTML and CSS Blog:

The Image Tag: Insert a Picture in Your HTML

What You Learn in This HTML Lesson

In today’s HTML lesson, you’ll learn how to use the mighty image tag ( <img> ), which allows us to put all those lovely pictures on the Internet. You’ll learn about the image tag’s many fine attributes, which make it such a long and cumbersome tag to write out. I’ll simply list the tag’s attributes for easy reference, then I’ll teach you what each attribute is for and why it’s useful.

Insert a Picture In Your HTML

The <img> Tag

The HTML image tag

The HTML Image Tag

Ah, the image tag! From the millions of pictures on Tumblr to the “buy now” button that looks like a shopping cart, to the millions of kitties peeking out of ceilings, the image tag makes it possible. If it weren’t for this tag the world wide web would be a bunch of text. And we all know that people are so over text. So you’re going to want to put images here, there and everywhere. I’ll show you how.

<img>      HTML

<img />    XHTML (self-closed)

Wait, is that really all there is to the image tag? Just <img> ? Seriously? You’re wondering, “Isn’t it usually longer?” It’s all those attributes you’re thinking of. The img tag is one of those new coders often have to look up, because it has so many attributes. Some are optional, some are essential.

Let’s get into those attributes now. Here’s a quick summary of the image tag attributes.

Image Tag <img> Attributes

Let’s take this image for our example, via one of Reddit’s many rabbit holes.



Let’s break it down:

src="http://learnhtmlwithsong.com/blog/wp-content/uploads/2014/12/air-guitar-kangaroo.gif"

This is the path to the image.
alt="animated gif of kangaroo playing guitar"

The alternative text, what this is a picture of for folks who can’t see the image.
title="OF COURSE he plays the guitar upside down. It's Australia."

Visible hover text

Note: The following HTML attributes are visual, and could be replaced with CSS. It is recommended that you only use HTML for structure and content, and use CSS for controlling the appearance.

height="287"  (height in pixels)
width="280" (width in pixels)
border="0" (to remove a blue border from linked images)
align="center" (to center the image)
vspace="10" (to add 10 pixels of space vertically around the image)
hspace="5" (to add 10 pixels of space horizontally around the image)

Examples of Image Tag Attributes

The image tag has many attributes. Let’s have a look at how this tag might look:

Phew! That’s more like the img tag you remember, isn’t it?

Attributes can be in any order. So you could just as easily write it like this:

If you are following stricter XHTML coding standards, you might see a self-closing space and a slash at the end of the image tag:

HTML5 no longer requires self-closing empty tags, so I find it easier to skip that extra slash.

OK, you get the idea. Let’s get to know these attributes a little better.

Image Tag: Source Attribute

The source attribute

The source attribute indicates the path to your picture

The source attribute tells us the location of the image, so the web browser knows where to fetch it from. The  <img>  tag displays your image by following the path to the image file, using the “src” attribute.  The path that leads to your image can take several forms.

The path that points to the location of the image can be relative to the html page, (for example: src=“folder-name/image-name.jpg” ) or absolute, pointing to an image online. (for example: src=“http://learnhtmlwithsong.com/blog/wp-content/uploads/2015/04/picture-name.jpg” ).

Let’s back up a second: I want to remind you that everything on the web exists on a computer somewhere (that’s the server). Just like you can load a picture from your own computer, every picture you look at online is being delivered to you from some other computer. The src attribute tells your web browser where to find that image. There are two ways of doing this.

The Absolute versus Relative Path

The absolute path is what you get when you right-click on an image and choose “copy image location.” Easy-peasy, right? Yup, that’s why people do it so often. An absolute path indicates the picture location on your web server, including the full web site address, and any folders the picture is inside of. For example:

The relative path is what you get when you tell the browser how to get there from your current page to the location of the picture, including the folder names you may browse into. Instead of a full web address (http://www…) it’s a path to the picture that is relative to your page location. It’s more like you’re telling your broswer, “Oh, that old picture? It’s just up the street from where we are standing right now. Go up one block and turn right at the images folder, and you’ll find it right there.”

Either kind of path works just fine, as long as it is accurate. For now what you need to know is that the src is the source of the image. Without it, your browser doesn’t know where to load the image from.

Image Tag: Alternative Text Attribute

The alternative text description makes your image accessible

The alternative text description makes your image accessible

The alt attribute is essential, as it provides a text description for screen readers, allowing accessibility for those with vision difficulties. And I might add, your most important reader is blinder than Stevie Wonder. That’s right, Google (and all search engines), can’t see your pictures. So if you want your search engine to know what’s going on in that picture of yours, you’d better write out some alternative text. Well-written, thoughtful, alternative text messages help your site become accessible to all people, and will improve searching.

Alternative text can be difficult to write well. For example, the file name may not be important, so don’t use non-descriptive labels like: alt=”slide1.jpg”. Sometimes the literal description of the picture is not the same thing as the message being conveyed with the image. A description like “two women” might not mean as much as “San Francisco General Hospital nurses strike for better working conditions” or “Two women were the first to marry in San Francisco today.” Keep thinking about the message you are trying to communicate through the picture.

The alt attribute allows you to create a text description for each picture

The alt attribute allows you to create a text description for each picture

Image Tag: Title Attribute

This attribute is considered optional. If you wish you can add a visual text label that only appears if the web visitor points at the image. Some folks like to repeat the alternative text description as a visible title, too, to allow people to hear or see the exact same content.

Image Tag: Height and Width Attributes

The width and height attributes allocate space for the image in the browser window.

Hey, did you know including height and width attributes improves the appearance of your page download? It allows the visitor to see all the text on a page quickly even if the images are taking time to download.

In some cases, you may want to skip the width and height attribute if you are creating a responsive design and wish the images to scale when the column changes size when viewed on various device sizes.

LaeCharles Lawrence Jr. sings about the Image tag

LaeCharles Lawrence Jr. sings about the Image tag

Border Attribute

The border attribute isn’t strictly necessary. Often web coders want to use this img attribute  when using images as links (by placing the <a> tag around the image). Often we want to make an image into a link, but we don’t want to border to show up at all. The default is to add a blue border around linked images, but border=”0″ will eliminate the border.

The best practice is to specify that the border is 0 in your CSS stylesheet and remove the border attribute using CSS. You should be using HTML to define structure and content, and CSS (Cascading Style Sheets) to control formatting and visual presentation. Using CSS will take care of the border for every single image in the entire website, a big time saver!

You could add the following rule to your CSS stylesheet to remove borders from all images with links:

Align Attribute

The align attribute wraps content, if the image is aligned to the left or right.

For example, aligning an image to the left or right would allow the paragraph after the picture to wrap around the image.

Here’s how that would look:


Cloud, the Micro-manager

Cloud, the Micro-manager

My cat, Cloud, is very particular about the house and notices when anything changes at all. He supervised the decorating of this year’s Christmas tree with great interest. He is a micro-manager.


To align an image to the center of the window/container, wrap it in a block level tag, such as a <div> or <p> tag:

The align=”center” attribute will only take effect on a block-level tag, not an inline tag.

The <img> tag is an inline tag, not a block-level tag. You can tell because more than one photo will be arranged horizontally by default. Block level tags stack vertically into separate paragraphs (separate “blocks”). For more information on the difference between inline tags and block level tags, read our lesson on Block-Level vs. Inline tags.

A Note About CSS

The CSS markup language handles the visual appearance of your web pages, allowing you to change the appearance of tags and control layout, colors, and fonts. HTML is intended to specify your content and the structure of the page. Some attributes in the HTML language can be removed and replaced with CSS rules. This is true of visual attributes, such as border, align, width and height. This lesson includes the visual HTML attributes, but you can learn about making your site more efficient by using CSS to control border, align, width and height.

Note that the Source (src) and Alternative Text Description (alt) Attributes are not visual, they are part of your content, so they are never replaced by CSS.

The HTML image tag

The HTML image tag is powerful

LaeCharles Lawrence, Jr – HTML Image Tag

Want to review the concepts in this lesson? Check out our music video for the HTML image tag, starring LaeCharles Lawrence, Jr.

Images are Powerful

Understanding the code behind pages will make you a better designer. Now that you know how to add images to your HTML, take some time to notice how much of the Internet is made of images. When you see a web page you love, think about how the images chosen are integral to that design. From giant “hero” images splashed across sites to the subtle patterns in backgrounds to every avatar and thumbnail, images are everywhere.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.