How to insert images into HTML code

by Andi Boggs May 7 | 2017

Nearly every single time you have a problem displaying an image file - it has to do with the image not being located in the right folder - the images folder of the root directory. At its most basic the html code used to insert an image looks like this:

<img src=“images/camels.jpg” alt=“Camel statue from China.” />

Camel statues from China inside an art museum
Bactrian camel statues from China at the SD Museum of Art. Photo: Andrea Boggs

The search box (src) links the html file to the image file which is in a folder called images.
Both the html files for your website and your images folder should be contained in the same directory called the root folder.
If the html file is in a subfolder of the root folder then you would put src=“../images/camels.jpg”. The ../ means the image folder is one directory up.

The alt text stands for alternative text and it is used by screen readers so that a description of the image can be read to blind people. Alt text in your image code is also required to validate your code as being error free according to world wide web standards.

Some additional attributes for the image html code are height, width, class, title, and align.

So your code could be as complicated as:

<img src=“images/camels.jpg” alt=“Camel statues from China inside the San Diego art museum.” title=“Camel statues in an art museum” height=“400” width=“600” align=“right” />

You would use a class attribute if you wanted to stylize the height and width of the code in CSS.
If you gave the image text a class of medium (class=“medium”) then you could use a CSS file
with the following class code:

.medium {
height: 350;
width: 500;
}