We are independent & ad-supported. We may earn a commission for purchases made through our links.
Advertiser Disclosure
Our website is an independent, advertising-supported platform. We provide our content free of charge to our readers, and to keep it that way, we rely on revenue generated through advertisements and affiliate partnerships. This means that when you click on certain links on our site and make a purchase, we may earn a commission. Learn more.
How We Make Money
We sustain our operations through affiliate commissions and advertising. If you click on an affiliate link and make a purchase, we may receive a commission from the merchant at no additional cost to you. We also display advertisements on our website, which help generate revenue to support our work and keep our content free for readers. Our editorial team operates independently of our advertising and affiliate partnerships to ensure that our content remains unbiased and focused on providing you with the best information and recommendations based on thorough research and honest evaluations. To remain transparent, we’ve provided a list of our current affiliate partners here.
Software

Our Promise to you

Founded in 2002, our company has been a trusted resource for readers seeking informative and engaging content. Our dedication to quality remains unwavering—and will never change. We follow a strict editorial policy, ensuring that our content is authored by highly qualified professionals and edited by subject matter experts. This guarantees that everything we publish is objective, accurate, and trustworthy.

Over the years, we've refined our approach to cover a wide range of topics, providing readers with reliable and practical advice to enhance their knowledge and skills. That's why millions of readers turn to us each year. Join us in celebrating the joy of learning, guided by standards you can trust.

In HTML, what is an Image Tag?

By Victoria Blackburn
Updated: May 16, 2024
Views: 16,215
Share

When creating a web page using HTML, the image tag is used to insert a photo or graphic in a particular place on the page. There are many ways that images can be used on web pages, from adding interest to being used as a navigational tool or to provide information. There are also several different formats of images that can be used. No matter how or what image is being added to the web page, the image tag is always required.

To add an image, the image tag is included where you want the image to appear within your page. For instance, if an image were to be inserted after this paragraph, the image tag, or <img>, would be added to the HTML document after this paragraph. The tag <img> defines all images in HTML. It is referred to as an empty tag, as it contains attributes and has no closing tag. Attributes are options that are available for a specific HTML tag.

If only <img> were added to a HTML document, nothing would show as the attributes of the tag have not been included. The most important attribute for <img> is "src," which stands for source. The attribute src states where the image file is actually located, or it is the address for the image file. As the image is being used on a web page, the location of the image will be given as a URL. Within the HTML document, the image would look like: <img src="URL" />.

Specifically, the URL points to where the image is stored. For example, if an image of a computer with the filename computer.jpg were stored in the images folder on www.wisegeek.com, the URL would be replaced with: <img src="www.wisegeek.com/images/computer.jpg" />. When the browser opens the web page, it displays the image where the image tag is included.

The image tag has a number of other different attributes. They allow a user to adjust how the image looks on the page. The following attributes are commonly used for this tag: alt, border, size, and align.

The attribute alt stands for alternate text and it is shown if a browser is unable to display an image. Also, alternate text is read for those users who are visually challenged and choose to display text over images. For the example above, the alternate text could be stated as alt="image of a computer".

The border attribute adds a border to the image with the thickness depending on the number of pixels stated. This can be especially useful when the image background and the web site background are similar, and a clear distinction is desired. For example, border="10" will place a 10 pixel thick border around an image.

Size attributes are also important, as width and height can be used to specify the exact size of an image. These attributes need to be used very carefully, as changing them can affect the proportions or quality of the displayed image. Size attributes do not change the actual file, just how the browser displays it.

The attribute align specifies how the image is aligned compared to text on the page. There are several different choices for this attribute, including top, bottom, middle, left, right, absmiddle, absbottom, baseline and texttop. These tags also help determine how the text on the page aligns with the image.

Share
EasyTechJunkie is dedicated to providing accurate and trustworthy information. We carefully select reputable sources and employ a rigorous fact-checking process to maintain the highest standards. To learn more about our commitment to accuracy, read our editorial process.
Discussion Comments
By pastanaga — On Oct 04, 2014

If you are hoping to add images to forums or anywhere that will only accept a src rather than a file, the easiest way to do this is to get an account with an image hosting site and load your file up there. They will usually give you several options for sizes and allow you to copy the URL where the image is hosted, so that you can then use it where you need to.

The reason that forums will do this is because it takes a lot less memory to host a direction to a file rather than the file itself and this is something that you might want to consider if you're making your own blog as well.

By Fa5t3r — On Oct 03, 2014

@croydon - Just make sure you also use the alt text for what it is intended and accurately describe the image. Don't just throw in a lot of tag words, because, for one thing, search engines are usually sophisticated enough to figure out that kind of trick. For another, alt text is included so that people will be able to know what is being pictured if the picture is unavailable or they can't see it for whatever reason.

If you just load the image with a bunch of keywords without a coherent sentence you're shooting yourself in the foot if someone is genuinely trying to navigate your site.

By croydon — On Oct 03, 2014

If you're making a site for commercial reasons remember to use good, relevant text in your image tags as it will be used by search engines to identify the image. If someone decides to look at boots in Google image search, you will want your image to come up (if you're selling boots!).

Often if you're constructing a site through a third party, they will give you several opportunities to describe the image and you should use them wisely.

Share
https://www.easytechjunkie.com/in-html-what-is-an-image-tag.htm
Copy this link
EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.