(X)HTML Guide, Part 8: Images

Table of Contents

Embedding Images

To embed, or insert, an image into an (X)HTML document, you must use the img element. Additionally, you need the src and alt attributes to point to the URL of the image and provide alternate text (text that displays when the image cannot load), respectively. If you omit these attributes, your XHTML page will be invalid. Finally, the optional title attribute gives the image a title and roll-over text.

Unlike most elements, the <img> element doesn't require an end tag, but instead requires a self-closing tag, like so: 
<img src="delibirdbutton.PNG" 
alt="AobaruNet" 
title="AobaruNet" />

Using Images As Links

Images can also be used as links. Simply put the image code between the <a> and </a> tags.

<a href="http://www.aobarunet.eeveeshq.com">
<img src="delibirdbutton.PNG" 
alt="AobaruNet"
title="AobaruNet" />
</a>
AobaruNet

Changing Image Height and Width

By default, the height and width of your image is its acutal height and width. However, you can adjust the height and width (in pixels) of your image with the height and width attributes.

<img src="delibirdbutton.PNG"
alt="AobaruNet"
title="AobaruNet"
height="41"
width="98" />
AobaruNet