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.
- Try to display an image in Codepen. Make sure you specify some alt-text.
- What happens when the URL in the src attribute doesn't lead to a valid image file?
Part of Building webpages
- Your first webpage
- Introducing HTML
- HTML attributes
- Classes and IDs
- Introducing CSS
- CSS selectors
- CSS specificity
- Creating layouts
- Responsive design
- Get confident with HTML and CSS
- Turn your prototypes into webpagesP