The list of attributes available in HTML is long and well-documented. Even if you haven’t memorized them (and there’s totally nothing wrong with an author… er… random person off the street, who has), there are a bunch of places where HTML attributes you’re familiar with will have different or more specific jobs. Let’s take a look.

`name`

You may have heard of the `name` attribute, giving a name/label to information sent through a form. And more specifically you may have used it to bring together a set of radio buttons, but you can also use it with the `details` element to have only one of a set of accordions open at a time.

Like if you have more than one refrigerator in the office at work, any respectable person would only open one door at a time. Right, Bob?

```

Refrigerator 1
Lunches, condiments, yogurt et al.

Refrigerator 2
More Lunches, leftovers from client meeting, stray cans of off-brand soda et al.

Refrigerator 3
Cookie dough someone bought from somebody’s child’s fundraiser, expired milk, unidentifiable meat et al.

```

See the Pen [Name \[forked\]](https://codepen.io/smashingmag/pen/pvzWbmR) by [Undead Institute](https://codepen.io/undeadinstitute).

`title`

You’ve probably heard of the universal attribute `title`. It’s typically thought of as the built-in tooltip text, but three elements have special semantics for the title attribute: `input` and the rarely used gems, the definition (`dfn`) element, and the abbreviation (`abbr`) element.

If you’re using a `pattern` attribute on an `input` to provide some regex-based error correction, then you should definitely tell the user how to meet the criteria you’re using. The `title` attribute can be used both as a tooltip and as the message shown when the user doesn’t meet that criteria.

```

Who took my well labeled yogurt from the company fridge? I know it was you, Bob.




Submit

```

See the Pen [Title - Input \[forked\]](https://codepen.io/smashingmag/pen/OPLxXeJ) by [Undead Institute](https://codepen.io/undeadinstitute).

For a `dfn` element, if you use the `title` attribute, then it has to include the term being defined. `dfn` should still have text in it, but it can be an abbreviation or a different form of the term.

```

OYG’s are a pox on humanity. Stealing yogurts from the office fridge even when they are labeled.

```

See the Pen [Title - dfn \[forked\]](https://codepen.io/smashingmag/pen/ZYzXOdJ) by [Undead Institute](https://codepen.io/undeadinstitute).

A `title` on an `abbr` element not only sets the tooltip but explicitly has the expansion of the abbreviation or acronym. As it says in [the spec](https://html.spec.whatwg.org/#the-abbr-element): "The \[title\] attribute, if specified, must contain an expansion of the abbreviation, and nothing else." That’s the specification’s equivalent of threatening a mafia hit if you aren’t careful with your `title` attributes. You have been warned, Bob.

```
When dealing with a suspected yogurt thief, we must create a HRSTFYT to deal with the problem.

```

See the Pen [Title - abbr \[forked\]](https://codepen.io/smashingmag/pen/ogvGLrQ) by [Undead Institute](https://codepen.io/undeadinstitute).

`value`

The `value` attribute is well known for setting default values on `input`s, but you can also use it on a list item (`li`) within an ordered list (`ol`) to change the number of that item and all that follow it. It only takes integers, but you can use it no matter what type of ordered list you use (numeric, alphabetical, or Roman numerals).

```

Favorite Co-workers

1. Tina


2. Keesha


3. Carlos


4. Jamal


5. Scott


6. Bob


7. Bobbie


8. Bobby


9. "Rob"

```

See the Pen [Value \[forked\]](https://codepen.io/smashingmag/pen/WbeZxVx) by [Undead Institute](https://codepen.io/undeadinstitute).

`datetime`

You might have used a `datetime` attribute on a `time` element to provide a machine-readable format of the time and/or date represented in the `time` element’s text:

```
Dec. 12, 2024

```

The same attribute can also be used with the `ins` and `del` elements (used for notating an addition/insertion and deletion of content, respectively). The `datetime` attribute on `ins` and `del` provides a machine-readable date (and optionally a time) for when the change was made. You can show it to the visitor if you like, but it’s mainly intended for private use.

Check out the edits of the original version of an earlier example:

```
When dealing with a suspected yogurt thief , like Bob, we must create a HRSTFYT to deal with Bob the problem.

```

See the Pen [Datetime \[forked\]](https://codepen.io/smashingmag/pen/VYZMjog) by [Undead Institute](https://codepen.io/undeadinstitute).

As an added note, screenreaders do _not_ announce the `datetime` attribute in this context.

`cite`

Sticking with our oft-neglected friends `ins` and `del`, the `cite` attribute that you use on `blockquote` and `q` elements to provide a URL of the source of the quotation can also be used on `ins` and `del` to provide the URL of a document explaining the changes.

```
When dealing with a suspected yogurt thief , like Bob, we must create a HRSTFYT to deal with Bob the problem.

```

See the Pen [Cite \[forked\]](https://codepen.io/smashingmag/pen/QwLqKLK) by [Undead Institute](https://codepen.io/undeadinstitute).

Again, these dates are not announced in assistive tech, like screen readers.

`multiple`

You probably know the `multiple` attribute as that more-than-meets-the-eye attribute that transforms a dropdown menu into a multi-select box, like a co-worker who lets you choose two donuts from the box. (I’m lookin’ at you, Tina.) But it has two other uses as well. You can add it to both a file `input` and an `email` input to accept multiple files and emails, respectively.

```

Upload complaint forms (about Bob)

Email all of Bob’s bosses:

Submit

```

Just be sure that the emails are comma-separated.

See the Pen [Multiple \[forked\]](https://codepen.io/smashingmag/pen/JoPrRPB) by [Undead Institute](https://codepen.io/undeadinstitute).

`for`

In your travels across the internet, you’ve probably come across the `for` attribute when it’s used to associate a `label` element with a form field (`input`, `select`, `textarea`, etc.), but you can also use it to explicitly associate the elements of a calculation with an `output` element.

Unlike a `label`\-`input` relationship, which is a one-to-one relationship (i.e., one label for one field), the `for` attribute used on an `output` can hold an unordered, space-separated list of IDs of the fields that contributed to the calculation.

```

Defendant name
First Name:
Last Name:

Number of yogurts stolen (unlabeled):

*
Unlabeled Multiplier:

+
Number of yogurts stolen (labeled):

*
Labeled Multiplier:

=
Suggested prison term (in years):

```

See the Pen [For \[forked\]](https://codepen.io/smashingmag/pen/pvzWEoe) by [Undead Institute](https://codepen.io/undeadinstitute).

`target`

Just like you can use a `target` attribute to open a link in a new tab/window, you can use the same `target` attribute and value `_blank` to have a `form` open the response in a new tab/window.

```

[...]

```

`disabled`

You may have used the `disabled` attribute to knock out an individual form field, but you can also use it to disable every descendant of a `fieldset` element.

No matter what HR says and its innocent-until-proven-guilty ethos, we all know Bob did it. Don’t we?

```

Defendant name
First Name:
Last Name:

[...]

```

See the Pen [Disabled \[forked\]](https://codepen.io/smashingmag/pen/emOGdme) by [Undead Institute](https://codepen.io/undeadinstitute).

Attribute Selectors

While not technically an HTML tip, attributes can also be used as selectors in CSS. You put square brackets around the attribute name and you’ll select all elements that contain that attribute.

```

[title] {
background-color: red;
}

List of SuspectsCo-workers

1. Fred


2. Rhonda


3. Philomina


4. Cranford


5. Scott


6. Bob


7. Bobbie


8. Bobby


9. "Rob"

```

See the Pen [Attribute Selector \[forked\]](https://codepen.io/smashingmag/pen/OPLxRVV) by [Undead Institute](https://codepen.io/undeadinstitute).

There’s actually a whole lot more you can do with attribute selectors, but that’s the topic of another article — [literally](https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css/).

Wrapping Up

Okay, now that we’ve learned some trivia we can use to properly prosecute Bob’s office and yogurtorial transgressions, do you have a favorite HTML attribute I didn’t discuss? Show off your personal life-of-the-party energy in the comments. (And, yes, cool people have a favorite HTML attribute… really cool people… right? Right?? Right!?!?!?!?!)