BETAThis is a new service – your feedback will help us to improve it.

HTML attributes

Let's consider the HTML tag for an image.

<img src="http://placehold.it/80x80" alt="An image" />

You'll notice that this is a self-closing tag. That makes sense because images don't have text "inside" them in the same way a paragraph or heading would.

You'll also notice two attributes:

  • src, or source
  • alt, or alt-text

We use these attributes to specify the URL of the image file we want to display, and some alt-text that will be read out by a screen reader for visually impaired users.

Attributes have a name, an equals sign, and then a value inside double-quote marks. Don't forget the quote marks.

Here is another example of a tag with an attribute:

<a href="http://google.com">Click me</a>

This is an anchor tag, more commonly known as a hyperlink. Unlike the <img> tag, it is not self-closing. The href attribute holds the URL the link will open if clicked.

Some attributes are mandatory for a HTML tag to work, and others are optional.

  1. Try to display an image in Codepen. Make sure you specify some alt-text.
  2. What happens when the URL in the src attribute doesn't lead to a valid image file?

What does an attribute do?

Lessons last updated 12th July 2019. You can improve this lesson on Github.
Part of Building webpages
  1. Your first webpage
  2. Introducing HTML
  3. HTML attributes
  4. Classes and IDs
  5. Introducing CSS
  6. CSS selectors
  7. CSS specificity
  8. Creating layouts
  9. Responsive design
  10. Get confident with HTML and CSS
  11. Turn your prototypes into webpagesP