Web Development
GUIDE

Adding Images In HTML

Description: No web page is complete without an image or two to spice it up. While written content will always be the most important part of any page, images help to catch the eye and draw visitors in.

As with any part of HTML, to be able to add images you need to know the right tags to use. Remember that images are generally created as either jpg or gif files, so the appropriate one for your situation needs to be specified within the tag itself.

Let's say you want to add your business logo to your web page. You have saved this logo as ?logo.jpg?. Here is how the HTML should look if you are going to add that image to your web page:

<img src="logo.jpg">

That's all you need to do. It is a good idea, however, to add a description of that image into the tag. This is good for two reasons. Firstly it adds an extra dimension to your logo - you could make your company slogan appear if someone hovers their mouse over it, for example. Secondly it means that if your logo doesn't appear for any reason, your description will appear instead to clarify what should have appeared.

So let's say in the above example that you wanted to add the slogan ?We code websites every day? to your piece of HTML. Here is what you would do:

<img src="logo.jpg" alt="We code websites every day">

You can see that we've added an extra piece of code here - the alt attribute - to make sure the text appears when it needs to. This isn't a tag as it doesn't appear within < and > brackets. Instead it appears within a tag to help decide how that tag will act. Alt basically means alternate, which makes perfect sense when you look at what it does.

You can also refine your image by making it fit into a certain space that you have available. Measurements are worked out by determining how many pixels you want your image to be made from, in a simple ?six by eight' kind of sum.

So if we wanted our image above to be 200 pixels wide and 150 pixels high, here is what we would add to the above HTML:

<img src="logo.jpg" alt="We code websites every day" width="200" height="150">

It is important to note that image tags are one of the few exceptions in HTML where there isn't a closing tag.