Lesser Known Uses Of Better Known Attributes — Smashing Magazine

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?

<details name="office-kitchen">
  <summary>Refrigerator 1</summary>
  Lunches, condiments, yogurt et al.
</details>
<details name="office-kitchen">
  <summary>Refrigerator 2</summary>
  More Lunches, leftovers from client meeting, stray cans of off-brand soda et al.
</details>
<details name="office-kitchen">
  <summary>Refrigerator 3</summary>
  Cookie dough someone bought from somebody’s child’s fundraiser, expired milk, unidentifiable meat et al.
</details>

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.

<form method="post" action="#">
  <label>Who took my <em>well labeled</em> yogurt from the company fridge? I know it was you, Bob.<br>
    <input type="text" pattern="Bob [A-Za-z].+" title="There are many Bobs. The only question is which one it was. Please limit your answers to Bob and his/her last name.">
  </label><br>
  <button type="submit">Submit</submit>
</form>

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.

<p><dfn title="Office Yogurt Thief">OYG</dfn>’s are a pox on humanity. Stealing yogurts from the office fridge even when they are labeled.</p>

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: “The Lesser Known Uses Of Better Known Attributes — Smashing Magazine 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 <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with the problem.

value

The value attribute is well known for setting default values on inputs, 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).

<h1>Favorite Co-workers</h1>
<ol>
  <li>Tina</li>
  <li>Keesha</li>
  <li>Carlos</li>
  <li>Jamal</li>
  <li>Scott</li>
  <li value="37">Bob</li>
  <li>Bobbie</li>
  <li>Bobby</li>
  <li>"Rob"</li>
</ol>

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:

<time datetime="2024-12-09">Dec. 12, 2024</time>

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 <ins datetime="2024-11-17">suspected</ins> yogurt thief <del datetime="2024-11-17">, like Bob,</del> we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with <del datetime="2024-11-17">Bob</del> <ins datetime="2024-11-17">the problem</ins>.

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 <ins datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">suspected</ins> yogurt thief <del datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">, like Bob,</del> we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with <del datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">Bob</del> <ins datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">the problem</ins>.

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.

<form method="post" action="#">
  <label>Upload complaint forms (about Bob) <input type="file" multiple> </label><br>
  <label>Email all of Bob’s bosses: <input type="email" multiple></label><br>
  <button type="submit">Submit</submit>
</form>

Just be sure that the emails are comma-separated.

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.

<form method="post" action="#" id="comeuppance"> 
  <fieldset><legend>Defendant name</legend>
    <label>First Name: <input name="fname" type="text"></label>
    <label>Last Name: <input name="lname" type="text"></label>
  </fieldset>
  <label>Number of yogurts stolen (unlabeled): 
    <input name="numunlbld" id="numstolen-unlbld" type="number">
  </label> * 
  <label>Unlabeled Multiplier: 
    <input name="multiunlbld" id="multi-unlbld" type="number" value="0.5">
  </label> + 
  <label>Number of yogurts stolen (labeled): 
    <input name="numlbld" id="numstolen-lbld" type="number">
  </label> * 
  <label>Labeled Multiplier: 
    <input name="multilbld" id="multi-lbld" type="number" value="1.5">
  </label> = 
  <label>Suggested prison term (in years):
    <output id="answer" for="numstolen-unlbld numstolen-lbld multi-unlbld multi-lbld"></output>
  </label>
</form>

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.

<form method="post" action="#" id="comeuppance" target="_blank"> 
  [...]
</form>

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?

<form method="post" action="#" id="comeuppance"> 
  <fieldset disabled><legend>Defendant name</legend>
    <label>First Name: <input name="fname" type="text" value="Bob"></label>
    <label>Last Name: <input name="lname" type="text" value="McBobberson"></label>
  </fieldset>
  [...]
</form>

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.

<style>
  Lesser Known Uses Of Better Known Attributes — Smashing Magazine {
    background-color: red;
  }
</style>
<h1>List of <del>Suspects</del><ins>Co-workers</ins></h1>
<ol>
  <li>Fred</li>
  <li>Rhonda</li>
  <li>Philomina</li>
  <li>Cranford</li>
  <li>Scott</li>
  <li title="the guilty one">Bob</li>
  <li>Bobbie</li>
  <li>Bobby</li>
  <li>"Rob"</li>
</ol>

There’s actually a whole lot more you can do with attribute selectors, but that’s the topic of another article — literally.

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!?!?!?!?!)

(gg, yk)