In today’s modern digital world, images are everything. The <img> tag has everything you need to display images on your site. Much like the <a> anchor element, <img> also contains an attribute.

The attribute features information for your computer regarding the source, height, width and alt text of the image.

Styling and Formats

You can also define borders and other styles around the image using the class attribute. However, we shall cover this in a later tutorial.

The file types generally used for image files online are: .jpg, .png, and (less and less) .gif.

Alt text is important to ensure that your site is ranked correctly on search sites and also for visually impaired visitors to your site.

The <img> tag normally is written as follows:

<img src="yourimage.jpg" alt="Describe the image" height="X" width="X">

Let’s try it out.

Create Your Own Image With An Alt Text

Don’t be afraid to play around with the test code – it’s a great way to have fun while learning.

Save an image (.jpg, .png, .gif format) of your choice in the same folder where you’ve saved index.html and page2.html. Call this image “testpic.jpg.”

On a new line in your HTML editor enter the following code:

<img src="testpic.jpg" alt="This is a test image" height="42" width="42">

Hit save and preview the index.html page in your browser.