In my post ‘How to wrap text around an image’ I mentioned other attributes you can use with the img (image) tag. Today, we will have a look at these.
Border - To add a border to an image simply include the border attribute as shown below:
<.img src=”yourimage.gif” border="1" />
This will create a border 1 pixel thick, but you can make this larger if you wish. Alternatively, you may not want a border at all, in which case simply use the value "0";
Height and width - It is a good idea to define the height and width of your image to ensure it displays correctly. Logically, you do this using the ‘height’ and ‘width’ attributes.
<.img src=”yourimage.gif” border="1" height="200" width="200" />
Alt and title - These can be used to add a description to your image, and are probably the most important attributes to use.
<.img src=”yourimage.gif” title=”myimage.gif, designed by Some Body” alt=”type a description of your image here” />
Although, ‘alt’ and ‘title’ appear to be one and the same (and some people do use them interchangeably) they are actually quite different, here’s why.
The text entered in the ‘alt’ attribute appears when the image is not displayed for some reason. This may be because the viewer has disabled images in their browser, or they may be a visually impaired person who uses a text to speech browser. Writing an accurate description of the content of the image will enable a visitor to see how relevant it is to the subject they are searching for, or give someone who can’t actually see your page a more rounded experience of visiting it - in the same way that visually impaired people sometimes use a narration service which adds a voice over to television programmes describing actions, landscapes etc. Don’t make this description too long, a nice, concise sentence is enough. For example, if you add a photograph of a red rose, the description could be ‘close up photo of a red rose in bloom’.
The ‘alt’ attribute is also visible to search engine bots, which can’t see images. So, if you blog about a visit to the Taj Mahal, and include a photo with the description ‘a photo of the Taj Mahal’ the bots will pick this up, and anyone (who for some reason) doesn’t know what the Taj Mahal looks like can visit your blog or site to find out.
The ‘title’ attribute, is used to provide extra information about the image itself, for example, it’s title, and the photographer or designer. Going back to the Taj Mahal example, you could use "Taj_Mahal.jpg, photographer Some Body, date 20/10/07". When a visitor holds their mouse cursor over your image, this information will appear in a little information box. Internet Explorer does the same with the ‘alt’ attribute, but this is non-compliant.
By the way, the ‘title’ attribute can be used with other tags, most commonly links.
One more thing, you may have noticed the there is a forward slash at the end of the image tags I have used. This is now the standard. HTML did not require image tags to be closed in this way, XHTML is now the standard and this requires all tags to be closed, but that is another post.
If you have any questions leave a comment below, and if you want to know more try the following links:
NB: The code samples used in this post all have a full stop/period after the opening bracket like so <. This is to ensure the code displays on the page and isn’t interpreted as HTML by your browser - in which case it would be invisible. Of course, this full stop should not be used in reality.
