Basic HTML: Image Tags and alt Attributes

Once you’ve created the basic structure of your web page and added some text in paragraphs and headers you’ll probably want to spice things up with an image or two, and maybe a few links to your favourite websites.

Images

Images are used one web pages for two primary reasons: 1) to illustrate an example or show something relevant to the text of the web page, and 2) to make the web page look pretty. Although in the name of semantics, images used purely to improve the presentation of a page should be referenced via CSS (which we’ll learn about later), it is important to get the most basic way of adding an image right first.

To display an image, we use the <img> tag. Like <p> for paragraphs, <img> is easy to remember because it’s a shortened version of “image”. So that the browser knows which image we want to display, we can specify the path to the image with the src attribute. Confused? Read on..

What’s a path?

The “path”, in website terms, is the location of the file you’re working with. There are two types of path: relative, and absolute.

An absolute path is the full path from the very bottom directory of your webserver. This is mostly used in scripting/web programming and if you’re using freewebs (which doesn’t support the likes of PHP on free accounts) probably won’t be important to you. On a paid host, most absolute paths start with /home/username/public_html/ (where username is the name of your account).

The relative path, which is more commonly used in HTML, is the path to the file relative to the folder you’re in. If you’re in the main/root directory in which your index.htm resides, and have an images folder with a file called “me.jpg” inside, the path to that file would be images/me.jpg

What is an attribute?

An attribute is typically a property of an object. In HTML, an attribute is used to specify a property in an element (tag) to control its behaviour. Attributes are included inside of the tag, separated from the tag name with a space, with the value of the attribute inside quotation marks. It all sounds more complicated than it really is!

As you may have guessed, the “src” attribute is short for “source”, i.e. the source of the image. Going back to our example of a relative path, let’s assume you have the image (images/me.jpg) mentioned. You’d display that image like so:

<img src="images/me.jpg">

(If you’re following this tutorial in Freewebs, now would be a good time to create a folder. Using the File Manager tool, click ‘add a folder’ and call it images.)

Because we haven’t actually uploaded an image called me.jpg yet, nothing will display on your web page (or a red cross, if you’re using Internet Explorer). Sometimes even when images are online, they don’t display — either because of server problems, browser settings or preferences — or a person is visually impaired and cannot see the image. To ensure a complete browsing experience, it is good practise to provide a text equivalent in case of that scenario, and we can do that with the alt attribute.

Note: alt is not a tag

You may have heard about alt before, often incorrectly called the “alt tag”. alt is not a tag, it is an attribute. It in no way behaves like a tag so there is no reason to call it such. Back to our image…

When specifying an alt attribute, it is worth bearing in mind that it is an alternative to the image. If the image is purely decorational, some sort of graphical flourish or drop shadow for example, the page is likely to remain usable without alternative text and therefore the alt attribute should remain blank. However, in the case of “me.jpg” we’re referencing a picture of you and so a brief description is best. For example:

<img src="images/me.jpg" alt="my school picture, wearing a red jumper">

Now that we’ve got the hang of alt attributes and our <img> tag, we can upload a picture named “me.jpg” to our images folder and see the result:

first web page with pic