HTML: Adding a Picture

The HTML tag to use for adding pictures is <img>. Within this tag you can use plenty of attributes as per below to further define properties of your image.

Remember: make sure your image files are in either of the following formats: GIF, JPEG, PNG or GIF.

TAG DESCRIPTION
<img> This tag element is used to add an image. Many attributes can be used when inputting an image, below are some examples:
  • src=”mypic.jpg” – the attribute "src" is used to alert the browser of the location of the image you want to display, this location can be a local folder or a website that holds the image.
  • alt=”this is a picture with me inside” – the text within this attribute gets displayed in case the browser has issues displaying the actual picture.
  • title=”my picture”– most browsers will display the information written in this property as a tool-tip when your website users hover their mouse cursor over an image.
  • longdesc=”this is a long description which goes on and on and on and on” – this attribute is to be used when an image is very complex (e.g. a chart) to provide a more lengthy description of the picture.
  • width=”400” / height=”300” – this attribute allow you to redefine an image’s dimensions.
<figure> If you want your image to display in a line of its own then you can use this tag and put your <img> picture inside of it. Within this tag you can also use the <figcaption> tag to provide a caption to your image.

 

write12Example

<img src="chart.png" width="450" height="150" alt="Chart showing the fruit consumption amongst under 15 year olds. Most children ate Pineapples, followed by Pears" longdesc="fruitconsumption.html"> </img>