At EasyTechJunkie, we're committed to delivering accurate, trustworthy information. Our expert-authored content is rigorously fact-checked and sourced from credible authorities. Discover how we uphold the highest standards in providing you with reliable knowledge.
In HTML, what is an Image Tag?
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.
AS FEATURED ON:
AS FEATURED ON:
-
![An image tag contains the information showing where an image will be displayed on a web page.]()
By: Stephen VanHornAn image tag contains the information showing where an image will be displayed on a web page.
Discussion Comments
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.
@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.
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.
Post your comments