Those HTML Attributes You Never Use — Smashing Magazine

Attributes Worth a Second Look

HTML’s lesser-used attributes often hide surprisingly practical features. Some of them smooth out mobile interactions, others give you styling or semantics control you might have assumed required JavaScript. Here is a handful worth knowing about.

Guiding the Virtual Keyboard With enterkeyhint

The enterkeyhint global attribute applies to form controls and elements with contenteditable="true". It tells a mobile device’s virtual keyboard what label and behavior to put on the enter key.

<input type="text" enterkeyhint="done">

The attribute accepts one of seven values: enter, done, go, next, previous, search, and send. The right hint can clarify what happens when a user taps that key—whether they are submitting a form, moving to another field, or finishing a task.

On iOS, the on-screen key’s text and color change to match the value. Other devices may render the hints differently. Keep in mind the attribute only accepts those seven values; anything else falls back to the device’s default enter key label.

Stylesheet Alternatives Via the title Attribute

Firefox includes a “Page Style” menu that normally shows two options: “Basic Page Style” and “No Style.” That menu also surfaces alternate stylesheets—if you mark them up correctly.

To register a stylesheet as an alternative, add both a title attribute and rel="alternate" to the <link> element:

<link href="main.css" rel="stylesheet" title="Default">
<link href="contrast.css" rel="alternate stylesheet" title="High Contrast">
<link href="readable.css" rel="alternate stylesheet" title="Readable">

With this setup, the default stylesheet applies automatically. The alternate sheets appear in Firefox’s Page Style menu, where you can select them manually.

The feature works in Firefox, but Chromium-based browsers do not surface these choices natively. MDN notes that extensions can add the capability, though finding an actively maintained one is difficult.

cite on Quotes

The <blockquote> element accepts a cite attribute that points to the source of the quoted content:

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#attr-cite">
      A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.
</blockquote>

The attribute bundles the quotation with its origin. The HTML spec notes that citation links are “primarily intended for private use (e.g., by server-side scripts collecting statistics about a site’s use of quotations), not for readers,” so browsers won’t necessarily make them clickable. The same cite attribute works on the inline <q> element.

Richer Ordered Lists

Ordered lists support several attributes that change how numbering behaves:

• reversed numbers items from high to low;
• start sets the initial number;
• type picks numbers, letters, or Roman numerals;
• value overrides the number on a specific list item.

Notably, reversed changes only the numerals, not the order of the items themselves.

<ol reversed>
    <li>List item...</li>
    <li>List item...</li>
    <li>List item...</li>
</ol>

An interactive demo with a toggle lets you see this behavior in practice—the list order stays fixed while the numbering flips.

The other attributes combine cleanly. The type attribute accepts one of five single-character values: a, A, i, I, or 1.

<ol reversed start="20" type="1">
    <li>Typee: A Peep at Polynesian Life (1846)</li>
    <li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
    <li>Mardi: and a Voyage Thither (1849)</li>
    <li>Redburn: His First Voyage (1849)</li>
    <li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
    <li>Moby-Dick; or, The Whale (1851)</li>
    <li>Pierre; or, The Ambiguities (1852)</li>
    <li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>

The download Attribute on Links

The download attribute on an <a> element tells the browser to fetch the linked resource and save it instead of navigating to it.

<a href="https://www.smashingmagazine.com/example.pdf" download>Download File</a>

Used without a value, it prompts a download of the linked file. Supplying a value gives the browser a suggested filename for the saved resource.

<a href="https://www.smashingmagazine.com/example.pdf" download="my-download.pdf">Download File</a>

Combined with JavaScript, the attribute can also generate downloadable files from user-created content.

decoding for Images

Relatively new to the spec, the decoding attribute on <img> gives the browser a hint about when to decode the image. It does not change load time, but it can affect when the image’s content becomes visible.

<img src="https://www.smashingmagazine.com/images/example.png" alt="Example">

Three values are available:

• sync decodes synchronously, the browser’s typical approach;
• async decodes asynchronously so other content isn’t delayed;
• auto is the default, leaving the choice to the browser.

Lazy Loading for <iframe>

The loading attribute, familiar from image elements, also applies to <iframe>:

<iframe src="https://www.smashingmagazine.com/page.html" width="300" height="250">

Its values are eager, the default behavior, and lazy, which defers loading until the iframe approaches the viewport. The one caveat: Firefox does not support loading on iframes, though it does on images.

Associating Fields With Any Form

Form controls don’t have to live inside their <form> parent. The form attribute on an input ties it to a form elsewhere in the document using that form’s id:

<form id="myForm" action="/form.php">
  <input id="name">
  <button type="submit">
</form>

<input type="email" form="myForm">

In this example, the email input outside the <form> element references myForm via the form attribute. The technique works for any form control, including the submit button. The attribute’s name is admittedly easy to confuse with the <form> element itself, but it is handy for layouts that break the usual nesting pattern.

Documenting Edits With cite and datetime

The <del> and <ins> elements also take cite and datetime attributes—the same cite used for quotes, repurposed for edits.

<del
  cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
  datetime="2020-07-23"
>Firefox doesn't support CSS's standard <code>appearance</code> property, so you can only use it prefixed.</del>

<ins          
  cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
  datetime="2020-07-23"
>The <code>appearance</code> property, previously only available prefixed in Firefox, can now be used in all modern browers unprefixed.</ins>

For each element:

• cite points to a URL explaining why content was removed or added;
• datetime records when the change happened.

For instance, an outdated blog post describing a CSS property that needed a vendor prefix in Firefox might be edited after the prefix was dropped. The old text could go in a <del> element, the correction in an <ins>, with cite referencing the relevant bug report and datetime marking the date of the update.

Grouping <select> Options With <optgroup>

Long dropdown menus can quickly become unwieldy for users. The <optgroup> element offers a clean way to organize options into visible, non-selectable category headings within a <select> element.

<select>
  <option>--Your Favourite Animal--</option>
  <optgroup label="Birds">
    <option>Blue Jay</option>
    <option>Cardinal</option>
    <option>Hummingbird</option>
  </optgroup>
  <optgroup label="Sea Creatures">
    <option>Shark</option>
    <option>Clownfish</option>
    <option>Whale</option>
  </optgroup>
  <optgroup label="Mammals">
    <option>Lion</option>
    <option>Squirrel</option>
    <option>Quokka</option>
  </optgroup>
</select>

Each group’s heading is defined by the label attribute on the <optgroup>; these headings are displayed but cannot be selected. You can also apply the disabled attribute to an <optgroup> to grey out and disable every option within that group at once.

Preloading Responsive Images With imagesrcset and imagesizes

Two relatively recent additions to the spec allow you to preload the correct responsive image variant before it’s needed. These attributes—imagesrcset and imagesizes—work alongside rel="preload" and as on the <link> element.

<link rel="preload"
      as="image"
      imagesrcset="images/example-480.png 480w,
             images/example-800.png 800w,
             images/example.png 2000w"
     imagesizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1000px"
     src="images/example.png"
     alt="Example Image">

Using rel="preload" signals to the browser that these resources should be fetched with high priority, so they aren’t delayed by stylesheets or scripts. The as attribute declares the content type. While standard preloading of an image uses href alongside preload and as, adding imagesrcset and imagesizes lets you specify which image candidate to preload based on the viewport size or media conditions defined in imagesizes.

Other Attributes Worth Knowing

A handful of additional attributes are often overlooked but can prove useful in the right context:

• crossorigin—applies to <audio>, <img>, <link>, <script>, and <video> to enable cross-origin resource sharing (CORS).
• title on <dfn> and <abbr> for providing definitions and expansions.
• disablepictureinpicture—a newer attribute for the <video> element to suppress the picture-in-picture toggle.
• integrity—used on scripts to let the browser verify that the fetched resource hasn’t been tampered with.
• disabled on a <fieldset>—a quick way to disable all form controls within it.
• multiple—supported on email and file input types to allow multiple values.

These attributes, alongside the <optgroup> grouping and responsive preloading features, cover some of the more useful but less-frequented parts of HTML that can improve both layout control and page performance.