The Image

Images add a lot to a Web page. Here's a picture of me with a black eye:


The image, like the line break and the horizontal rule, is one of the few elements of HTML which does not adhere to the container model. It just sits by itself and does its thing.

Here's the code that puts my picture on this page:

<IMG SRC="blackeye1.jpg" ALT="me">

The <IMG> tag specifies that an image should be inserted into the document. The image itself is a separate file, external to the document. The <IMG> tag merely points to this file.

You'll notice that the above tag has been expanded to include the SRC and ALT attributes. Both of these attributes are required. The SRC attribute specifies the image file to be included, while the ALT attribute specifies alternate text to be displayed if the image is missing. Alternate text is also important for people using text-only browsers, for people using aural and braille browsers, and for people who have turned off image-loading in their browser.

In this case, the SRC attribute is set to a value of "blackeye1.jpg", which is the name of my image file. The ALT attribute is set to a value of "me", which is the text that will be displayed to people who don't get the image. (Internet Explorer also displays this text as a 'tooltip' when the mouse is over the image.)

Note that it's good practice to enclose attribute values in quotation marks. This is not strictly required for all attribute values, but it's easier (and safer) to do it all the time, rather than try to remember when it's required and when it's not.

Images are inline elements, not block elements! This means that your images can be inserted directly into the flow of text like this * star if that's what you want.

| Introduction to HTML | Tutorials |