An introduction to HTML attributes
Posted 9th July 2020 in Development and HTML
So now you know what HTML elements and tags are. The next bit of HTML anatomy I’d like to introduce you to are attributes.
An attribute lives on an element’s opening tag and usually involves a key and a value. Let me show you:
class is the key and
boxout is the value.
If the value is a single word we can simplify this to:
But I prefer to keep things consistent, so I always use straight double quotes (
") so that every attribute is easily identifiable.
You can also use straight single quotes (
'), but hardly anyone does, so if you’re sharing a codebase or might ever work with anyone else in the future you’ll probably want to go with what’s standard practice and use double quotes.
If we use quotes, our values can include more than one thing, which is common with classes:
<div class="boxout highlight some-other-thing and-another">
It’s worth mentioning two things here:
- multiple classes are added not by using many
classattributes, but many values in a single
classattribute (if you were to use multiple
classattributes, the browser uses the last one and ignores the ones that came before)
- attribute values are separated using spaces; hyphens (
-), underscores (
_), etc. all count as part of a word
Of course, we’re not limited to just one attribute per tag – we can use multiple! Just separate them with spaces:
<div id="boxout" class="boxout">
There are lots that I prefer not to list here as they:
- should be used with caution (like
- would need a blog post all of their own (e.g.
- are best avoided (like
- can be problematic for accessibility (like
And there are a million more (well, maybe not quite a million) that are used in conjunction with specific elements, for example:
height=""are used with an
requiredand lots more are specific to
for=""to associate a form
Did you spot the odd ones out in that last list? That’s right: I didn’t put values (
reversed. That’s because they’re what’s known as boolean attributes.
That’s when an attribute represents a toggle – if it exists, it’s true; if it doesn’t, it’s false:
Here, we’re telling the form not to validate any of its inputs – let the user put a phone number in the email field, or leave the name input empty; we’ll validate it all on the backend.
Of course, we can also write it without quotes:
We can even get daft:
bananas isn’t a real value, but it shows that if a boolean attribute exists, it returns ‘true’. In fact we can go one step further, like the
reversed examples above:
Because the attribute exists, it’s counted as being true. In order to make the form validate on the frontend in this example, we’d simply omit the
novalidate attribute. Again, if it’s there, it’s true, if it’s not, it’s false.
And this is where my consistency goes out the window! I don’t use the
="true" value with booleans, preferring to leave the ‘naked’ key on there.
So what are attributes for?
As you’ve seen, an attribute extends a simple element. They can:
- be used as a unique identifier, like an
- be used to apply styling, like a
- be used to alter or refine the semantics, like
- disable default browser behaviour, like
- enable built-in browser behaviour, like
- reference other files, like
- enhance accessibility (things like the
alt=""text to describe images)
- change the semantics of elements (
- improve (or break, if you’re not careful!) things for visually impaired users with ARIA
- help touch screen users with
- associate two elements (
id=""on form fields)
…and lots more besides.