Who uses alt tags on images? They're just decorations, right?
- Seconds before disaster

One of the most important HTML elements is the hyperlink. You are probably already familiar with hyperlinks - they allow you to link web pages, documents or other resources from your page. If the link is clicked, the linked page is typically opened in your browser for you to see.

Here is how you can create a hyperlink:

<a href="https://example.com">Example</a>

This creates a link with the text "Example" that links the resource mentioned in the href attribute (which in this case is "https://example.com"). By default the text becomes blue and underlined. If you click the text, the web browser opens the page located at https://example.com.

Note that HTML elements can also be made into links by simply nesting them. For example:

<a href="https://example.com">
  <h1>Example</h1>
</a>

Images

To show an image, you can use the <img> element:

<img src="cat.jpg" alt="A cute cat" />

Notice that the img element is a self-closing HTML element, since it doesn't contain any content. Instead of <img></img> we write <img />.

The src attribute contains the path to the image you want to show. The alt attribute holds a textual replacement for the image and is necessary in case the image can't be shown. Try misspelling the filename on purpose and you will see the textual replacement.

In practice the textual replacement is useful if, for example:

  • there is a network error and the image can't be fetched
  • the user is using a screen reader (in this case the textual replacement may be read out loud to him)
  • the browser doesn't support the image type
  • the user has turned off images to reduce data transfer

Additionally search engines will usually look at the alt attributes of images when processing your web page.

You should therefore always include the alt attribute for every image you serve.

The alt attribute is a typical example of semantically correct HTML. Sure, your page will usually look right even if you don't use it, but the user experience for some users will be much worse.

You can use the fact that HTML elements can be made into links to create image links:

<a href="https://example.com">
  <img src="example.png" alt="An example image" />
</a>

This will show a clickable image - if the image is clicked, the browser will open https://example.com.