HTML Image Tags

Another commonly used HTML tag places images on your website.

If you're using a content management system, like WordPress, you can easily upload images to your website and automatically insert HTML tags for them into your content. Despite that fact, it is still good to know how this tag works so you can make your own custom changes to it or even use it outside of WordPress.

The HTML code below generates an image:

<img src="https://ryanstevensonplugins.com/wp-content/uploads/2013/06/techie-master-class-350x350.png" border-"0" width="250" height="250" />

IMG is the HTML tag name to display an image.

SRC is a tag attribute that designates the website URL of the image file to display, with that URL enclosed in quotes. This tag attribute is required to display an image.

BORDER is another tag attribute. The value is a number of pixels for the width of the border surrounding the image. 0 is used as a value to disable the image border, although this border can still be set and/or altered using CSS (will be covered in the next lesson). This is an optional tag attribute.

WIDTH and HEIGHT are also optional tag attributes here. If you notice the URL of the image that is specified in the example code, you might notice that the image is labeled as being 350x350 (this is just a label that I have assigned to the URL to help me identify the size easily). If I left off the WIDTH and HEIGHT attributes, the image would be displayed at full size, but these attributes alter the display size. I picked 250 by 250 for the values of these attributes, which will shrink the image slightly. You can also make images larger than their original size in this manner, but too much of an increase will result in low resolution graphics that will likely look poor on your live site.

Notice that I maintained the same ratio from the original width/height to the new width/height. This is important if you want to avoid distorting the image when it is resized. As an example, if you had an image that was 400 pixels wide by 200 pixels tall and wanted to display it on your site at half the normal size, you would want to use 200 for the width and 100 for the height to maintain the same ratio.

The image tag is a self-closing tag. Note the extra space at the end of the HTML for the example image tag. After that extra space, there is a forward slash and then the closing greater than symbol for the end of the tag: />