• 13 min read
• HTML , Guides , Coding , Techniques
• Share on Twitter ,  LinkedIn

In January, Madison Kanna asked her Twitter followers :

What are the languages/tech you’re excited to learn or learn more deeply this year?

mine: typescript, next.js, react, graphql, solidity, node

— Madison Kanna (@Madisonkanna) January 3, 2022

My answer was easy: HTML . And I wasn’t being sarcastic or mocking in the least. Sure, I pretty much know which tags to use in which instances and how to keep my HTML mostly semantic and accessible.

But there is a whole bunch of lesser-used attributes that I was sure I’d forgotten about, and probably a whole bunch of attributes I didn’t even know existed. This post is the result of my research, and I hope you’ll find some of these useful to you, as you build HTML pages in the coming months.

The enterkeyhint Attribute For Virtual Keyboards

The enterkeyhint attribute is a global attribute that can be applied to form controls or elements that have contenteditable set to true . This attribute assists users on mobile devices that use a virtual on-screen keyboard.

enterkeyhint accepts one of seven possible values that will determine what the user sees on his ‘enter’ key:

• enter ,
• done ,
• go ,
• next ,
• previous ,
• search ,
• send .

You can see how these “hints” can be useful for the user. Is the user progressing through a series of actions? Are they submitting info? Are they saving a setting? Depending on what they’re doing, you can customize the hint to match your app’s needs.

You can try this one out by visiting the CodePen demo below on a mobile device.

See the Pen [Using the enterkeyhint Attribute [forked]](https://codepen.io/OB电竞 mag/pen/bGadMyz) by Louis Lazaris .

On my iOS device, the text for the enter key changes along with the color of the key, depending on the value, as you can see in the screenshots below. This might vary, depending on the user’s device.

And just to emphasize, this attribute doesn’t accept custom values; the value needs to be one of the seven shown above. An unrecognized value will just default to whatever the device’s default text is for the enter key.

The title Attribute On Stylesheets

This one was brand new to me when doing research for this article and might be the most interesting one in this list. As a bit of background, in case you didn’t know, Firefox has an option that lets you select which style sheet you want to use when viewing a page. Normally, this feature displays two options: “Basic Page Style” and “No Style”, as shown in the image below on my Windows machine.

This lets you quickly test how a page will look when styles are disabled, and it also allows you to view the page with any alternate stylesheets.

The alternate stylesheet feature is enabled with two attributes: The title attribute and rel=alternate applied to a element, as shown in the code below:

In this case, my “default” styles will apply automatically, but the alternate stylesheets will only apply if I select them using Firefox’s “Page Style” option. You can try out the above example by visiting the following CodePen, using Firefox or another compatible browser:

See the Pen [Alternate Stylesheets Using rel title Attributes [forked]](https://codepen.io/OB电竞 mag/pen/ExojRgm) by Louis Lazaris .

The screenshot below shows the stylesheet options in Firefox:

As mentioned, this feature works in Firefox, but I wasn’t able to get it to work in any Chromium-based browser. MDN’s article on alternate stylesheets says it can be enabled in other browsers using an extension, but I couldn’t find an active extension that does this.

The cite Attribute For The

And Elements

I’m sure you use the

element pretty regularly. You can use it plainly without an attribute, but you also have the option to use the cite attribute. Here’s an example that quotes the MDN article that describes using cite on

:

		
		

			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.
		
	

Since my blockquote above is from the MDN article that explains what cite does, I’ve set the URL that points to the page as the cite value.

You can see how this is useful, because it wraps up the quote and the source of the quote in one element. But note this further explanation in the HTML spec :

User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site’s use of quotations), not for readers.

And naturally, the same concepts apply to use of cite on the element, which is used for inline quotations.

Attributes For Custom Ordered Lists

Ordered lists using the

element are used often. Some lesser known features that allow you to customize the behaviour of the numbering that appears in such a list are:
• the reversed attribute, to number the items in reverse order (high to low instead of the default low to high);
• the start attribute, to define what number to start from;
• the type attribute, to define whether to use numbers, letters, or Roman numerals;
• the value attribute, to specify a custom number on a specific list item.

As you can see, ordered lists are a lot more flexible with plain HTML than you might normally be accustomed to.

The reversed attribute is an interesting one, because it doesn’t actually reverse the contents of the list itself; it only reverses the numbers next to each list item.

	
	

		

			List item...
		
		

			List item...
		
		

			List item...
		
	

The CodePen demo below adds some JavaScript, so you can interactively toggle the reversed attribute.

See the Pen [Reverse Ordered Lists with HTML [forked]](https://codepen.io/OB电竞 mag/pen/jOYPKxW) by Louis Lazaris .

Notice, that the list itself stays the same, but the numbers change. Keep that in mind if you’re looking for a way to reverse the contents. That’s something you would do with JavaScript, CSS, or directly in the HTML source.

Above, I also mentioned three other attributes. Let’s incorporate those into the list to see how they can be used:

	
	

		

			Typee: A Peep at Polynesian Life (1846)
		
		

			Omoo: A Narrative of Adventures in the South Seas (1847)
		
		

			Mardi: and a Voyage Thither (1849)
		
		

			Redburn: His First Voyage (1849)
		
		

			White-Jacket; or, The World in a Man-of-War (1850)
		
		

			Moby-Dick; or, The Whale (1851)
		
		

			Pierre; or, The Ambiguities (1852)
		
		

			Isle of the Cross (1853 unpublished, and now lost)
		
	

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

Try it using the following interactive demo:

See the Pen [Reverse Ordered Lists with start, type, and value Attributes [forked]](https://codepen.io/OB电竞 mag/pen/RwxPqgN) by Louis Lazaris .

Use the radio buttons to select one of the five values for the type attribute. Then try reversing the list using the Toggle Reversed button. As you can see, there is a ton of possibilities beyond the default behaviour of ordered lists!

The download Attribute For The Element

As ubiquitous as links are on the web, it’s always nice to have an attribute that makes links even more powerful. The download attribute was added to the spec a number of years ago, and it allows you to specify that when a link is clicked, it should be downloaded rather than visited.

	
	
		Download File
	

With no value, the download attribute forces the linked page to be downloaded. Alternatively, you can provide a value which the browser uses as the suggested file name for the downloaded resource.

	
	
		Download File
	

As a bonus trick involving this attribute, you can combine this feature with some JavaScript to create a way for the user to download content they create themselves. I covered it a little bit previously in this post , and you can try it out by using the demo below.

See the Pen [The download Attribute Combined with a Data URI + JavaScript to Let the User Download Custom HTML [forked]](https://codepen.io/OB电竞 mag/pen/abEOQyQ) by Louis Lazaris .

The decoding Attribute For The Element

This is another one that was brand new to me when researching this article — and it seems to be fairly new in the spec. Adding the decoding attribute to an image element provides an image decoding hint to the browser.

This attribute is similar to using the async attribute on scripts. The time it takes to load the image doesn’t change, but the manner in which its “decoded” (and thus its content becomes visible in the viewport) is determined by the decoding attribute.

Values are:

• sync
  Decode the image synchronously, which is generally how browsers do it.
• async
  Decode the image asynchronously to avoid delaying presentation of other content.
• auto
  The default which allows the browser to use its own built-in method of decoding.

If you’re curious about the concept of decoding images, the spec has a good explanation that’s not too difficult to follow.

The loading Attribute For The