Original address: https://www.smashingmagazine.com/2022/03/html-attributes-you-never-use/

Translation first published at: https://www.zhuwenlong.com/blog/article/6246842127c1e98149b5fff6

In this article, Louis Lazaris describes and demonstrates some interesting HTML attributes that you may have heard of, or perhaps not. If you find them very useful, you can use them in your projects.

This January, Madison Kanna asked her followers on Twitter:

What languages/technologies do you want to learn or dive deeper into this year?

Mine are: typescript, next.js, react, graphql, solid, node

-- Madison Kanna (@Madisonkanna) January 3, 2022

My answer was simple: HTML. I wasn't being sarcastic or mocking you. Of course, I am very clear on when to use which tags and how to maintain the semantics and accessibility of HTML.

But there are a whole bunch of seldom-used attributes that I’m sure I’ve forgotten, and there may be some that I didn’t even know existed. This article is the result of my research, and I hope that over the next few months, as you build HTML pages, you will find some of these useful.

????‍???? The enterkeyhint Attribute for Virtual Keyboards

MDN Link

The enterkeyhint attribute is a global attribute that can be applied to form controls or elements with contenteditable set to true. This attribute helps users on mobile devices using virtual screen keyboards to better clarify the confirmation key's hint text. javascript <input type="text" enterkeyhint="done">

The enterkeyhint accepts one of seven possible values that will determine what users see on the “enter” key:

• enter usually indicates inserting a new line, displays 换行 in Chinese.
• done usually means no more input, and the input method editor (IME) will be closed. Displays 完成 in Chinese.
• go typically directs users to the target location of the text they entered. Displays 前往 in Chinese.
• next usually takes users to the next field that will accept text. Displays 下一项 in Chinese.
• previous usually takes users to the previous field that accepts text. Displays 上一项 in Chinese.
• search typically leads users to the search results for their entered text. Displays 搜索 in Chinese.
• send generally sends the text to its target. Displays 发送 in Chinese.

You can see how these “hints” could be useful for users: Have they completed a series of operations? Are they submitting information? Are they saving settings? Based on what they are doing, you can customize the hints to match the needs of your application.

You can access the demo below on mobile devices to try this method.

View the original CodePen by Mofei

On my iOS device, the text on the input key changes with the key's color, depending on the value, as shown in the screenshot below. This depends on the user's device.

To emphasize, this attribute does not accept custom values; the value must be one of the seven shown above. An unrecognized value will default to the device's input key's default text.

????‍???? The title Attribute for Stylesheets

MDN Link

When I was researching for this article, this was completely new to me and might be the most interesting in this list. As a bit of background, if you didn't know, Firefox has an option that lets you choose which stylesheet to use when viewing a page. Typically, this functionality shows two options: “Basic Page Style” and “No Style,” as shown in the image below on my Windows computer.

This allows you to quickly test what the page looks like with styles disabled and also allows you to view the page with any alternate stylesheets.

The alternate stylesheet feature is enabled via two attributes: the title attribute applied to <link> elements and rel=alternate, as shown in the following code:

<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">

In this case, my “default” style will be applied automatically, but the alternate stylesheets will only apply if I use the “Page Style” option in Firefox. You can access it using Firefox or other compatible browsers, and the screenshot below shows the stylesheets option in Firefox:

As mentioned earlier, this feature is available in Firefox, but I couldn't get it to work in any Chrome-based browsers. MDN's article on alternate stylesheets says it can be activated in other browsers with extensions, but I couldn't find an available extension to accomplish that.

????‍???? The cite Attribute for <blockquote> and <q> Elements

MDN Link

I’m sure you often use <blockquote> elements. You can use it directly without attributes, but you can also choose to use the cite attribute. Here’s an example that cites the MDN article that describes using the <blockquote>:

<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>

Since my above blockquote comes from the MDN article that explains the role of cite, I set the URL of the page as the cite value.

You can see how useful this is as it encapsulates the source of the quote within the element. But note the further explanation in the HTML specification:

User agents may allow users to keep track of such citation links, but they are primarily for private use (for example, for server-side scripts to collect statistics on site citations), not for readers.

Of course, the same concept applies to using cite on the <q> element, which is designed for inline quotations.

????‍???? Custom Attributes for Ordered Lists

The ordered list using the <ol> element is frequently used. Some lesser-known features allow you to customize the numbering behavior that appears in such a list:

• reverse attribute to number items in reverse order (from high to low, rather than the default low to high)
• start attribute to define the number from which to start
• type attribute to define whether to use numbers, letters, or Roman numerals
• value attribute to specify a custom number on a specific list item

As you can see, ordered lists are much more flexible in pure HTML than you might usually expect.

The reverse attribute is an interesting one because it does not actually reverse the contents of the list itself; it simply reverses the numbers next to each list item.

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

The following codepen demo adds some JavaScript so you can interactively toggle the reverse attribute.

Note that the list itself remains unchanged, but the numbers change. Keep this in mind if you're looking for a way to reverse the content. This is something you can do with JavaScript, CSS, or directly in the HTML source.

Earlier, I also mentioned the other three attributes. Let's combine them into a list and see how they are used:

<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>

Note the added type and start attributes as well as the value attribute on a single list item. The type attribute accepts one of five single-character values representing the type of numbering (a, A, i, I, 1).

Try the interactive demo below:

Select one of the five values for the type attribute using the radio buttons. Then try reversing the list with the “Reversed” button. As you can see, there are many other possibilities beyond the default behavior of ordered lists!

????‍???? The download Attribute for <a> Elements

Since links are everywhere on the web, it’s always a good thing to have an attribute that makes links more powerful. The download attribute was added to the specification a few years ago. It allows you to specify that a resource should be downloaded when the link is clicked instead of being accessed.

<a href="/example.pdf" download>Download File</a>

Without a value, the download attribute will force the linked page to be downloaded. Alternatively, you can provide a value which the browser will use as the suggested filename for the downloaded resource.

<a href="/example.pdf" download="my-download.pdf">Download File</a>

As an extra tip for this attribute, you can combine this feature with some JavaScript to create a way for users to download content they create themselves. You can try it out with the demo below.

????‍???? The decoding Attribute for <img> Elements

This is another new method I encountered while researching this article—also seemingly quite new in the specification. Adding the decoding attribute to image elements can provide hinting to the browser for image decoding.

<img src="/images/example.png" alt="Example" decoding="async">

This attribute is similar to using the async attribute on scripts. The time required to load the image does not change, but its “decoding” method (and thus when its contents become visible in the viewport) is determined by the decoding attribute.

The available values are:

• sync to synchronously decode the image, which is what browsers typically do.
• async to decode the image asynchronously to avoid delaying the rendering of other content.
• auto the default value, allowing the browser to use its own built-in decoding method.

If you’re curious about the concept of decoding images, there is a good explanation in the specification, which isn't hard to understand.

????‍???? The loading Attribute for <iframe> Elements

You may already know that the <img> element can now include a loading attribute that brings lazy loading as a feature into the browser, something we’ve been doing with JavaScript solutions for years. But don't forget that the loading attribute can also be used on <iframe> elements:

<iframe src="/page.html" width="300" height="250" loading="lazy">

Like with images, the loading attribute accepts a value of eager (the browser's default behavior) or lazy (which delays the loading of the iframe's content until it is about to enter the viewport). The only drawback of this attribute is that Firefox does not support its use on iframes (though Firefox supports loading images).

????‍???? The form Attribute for Form Fields

In most cases, you will nest form inputs and controls inside

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

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

<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 browsers unprefixed.</ins>

<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>

<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">