Lesser Known Uses Of Better Known Attributes — Smashing Magazine

When A Familiar HTML Attribute Has A Second Job

Most developers reach for HTML attributes out of habit. The target attribute opens links in new tabs, disabled knocks out a form field, and title shows a tooltip. But a handful of these well-worn attributes have lesser-known roles that come in handy when you need them. Here are some of the most useful dual-purpose attributes worth having in your back pocket.

Using name To Group Accordions

The name attribute is typically found on form controls, grouping radio buttons so that only one can be selected at a time. The same attribute works on the details element. When you give multiple details elements the same name, only one can be open at any given time — opening one automatically closes the others.

This is a straightforward way to build an accordion without writing any JavaScript. The browser handles the exclusivity for you.

title Does More Than Tooltips

While title is a universal attribute associated mostly with tooltips, three elements give it special meaning beyond that default behavior.

On an input that uses a pattern attribute for regex-based validation, the title attribute serves double duty. It provides the tooltip text, but when the user's input fails to match the pattern, the title content is shown as the validation error message. If you are using pattern, you should always include a title to tell the user what format you're expecting.

For the rarely used dfn (definition) element, the title attribute must contain the term being defined. The element's text content can be an abbreviation or an alternative form of the term, while title should carry the full definition.

The abbr element has similar rules. If specified, the title attribute must contain the expansion of the abbreviation — and nothing else. The HTML spec puts that requirement in no uncertain terms.

Renumbering A List With value

The value attribute on an input is practically muscle memory. Less known is that value also works on an li inside an ol. Setting a numeric value renumbers that list item and all that follow it. This works for any ordered list type — numeric, alphabetical or Roman numerals — and the attribute only accepts integer values.

Timestamping Edits With datetime

The datetime attribute is commonly paired with time elements to provide a machine-readable version of the date or time in the element's text. But datetime is also valid on ins and del elements, which mark content that has been inserted or deleted. There, it records a machine-readable timestamp of when that change was made. The value is mainly intended for private use — say, for change tracking — rather than for display. Screen readers do not announce the datetime attribute in this context.

Pointing To The Reason With cite

When used on blockquote and q, the cite attribute carries the source URL of a quotation. The same attribute works on ins and del, where it should point to a URL for a document that explains why the change was made. As with datetime, this value is not announced by assistive technology.

multiple For More Than Selects

The multiple attribute is best known for turning a dropdown select into a multi-select list. But it has two more applications: adding multiple to a file input lets users choose more than one file, and adding it to an email input accepts multiple email addresses. When used on an email field, the addresses must be comma-separated.

Associating A Calculation With for

The for attribute is usually there to connect a label to a form field. It has another role on the output element. There, for holds an unordered, space-separated list of the IDs of the fields that contributed to the result of a calculation. Unlike the one-to-one relationship between a label and field, for on output can reference many fields at once.

Opening Form Results With target

The same target attribute used on links works on forms. Adding target="_blank" to form markup causes the response — the page the form submission lands on — to open in a new browser tab or window.

Disabling A Whole Form Section With fieldset

Instead of adding the disabled attribute to every field, you can add it to a wrapping fieldset element. This disables every descendant control inside the fieldset at once.

Attributes As CSS Selectors

Outside of HTML mechanics, attributes themselves can serve as CSS selectors. Using square brackets around the attribute name selects every element that carries that attribute. This is a separate topic in its own right, but a useful one to know about if you haven't already worked with attribute selectors.