8 Little-Known HTML Attributes

{% verbatim %}As we create web pages, we often find ways to fill in functionality we perceive as missing. Over time, the W3C can standardise that functionality or browser developers add it before suggesting it to the W3C. Since browsers update automatically, it’s very easy for this to slip under a web developer‘s radar and they continue using the old techniques when faster or more consistent solutions exist. In an effort to keep us all informed, here are 7 little-known HTML attributes.

download on Anchor Elements

When a developer wants to create a link to download to something like a PDF, the browser will do a few things:

1. Send a request to the file.
2. Receive the response headers to check the file.
3. Check to see if it understands the file type.
4. The browser will handle the file if it understands it or download the file if not.

Modern browsers can display the PDF as a tab but what if the developer would prefer the user to download the PDF? The user would either have to save the new tab or the developer can create a server-side wrapper for the file and force the headers.

HTML5 added a better way of handling this – the download HTML attribute. The HTML attribute instructs the browser to download the file instead of trying to understand it even if the browser would recognise it. This saves processing power and makes the developer’s intention clear.

<a href="my-file.html">Access the page normally</a>
<a href="my-file.html" download>Download the page</a>

The download HTML attribute only works on anchor elements, not on a button. While there is some debate among web developers about which element is correct, CSS-Tricks do a great job of explaining why we should use anchors.

async and defer on Scripts

If a script element has a src HTML attribute, both async and defer prevent the page parsing and attempting to execute the script tag immediately. They take different approaches and mean slightly different things.

A browser should load a script with async asynchronously. This is the most common HTML attribute to use and most closely reproduces the dynamic script inclusion techniques we used to use. It’s possible for two scripts with async to load in an order different from the source order.

<!-- order not guaranteed -->
<script src="one.js" async></script>
<script src="two.js" async></script>

The browser should load a script element with the defer HTML attribute after it’s parsed the document but before the DOMContentLoaded event executes. This is largely the same as putting a script at the bottom of the page, before the close of the body tag. The defer HTML attribute preserves the source order.

<!-- order preserved -->
<script src="one.js" defer></script>
<script src="two.js" defer></script>

The browser compatibility table on MDN currently shows that everything understands async whereas Opera doesn’t understand defer.

integrity on Script and Link Elements

The integrity HTML attribute is a way of preventing man in the middle attacks by telling the browser what to expect in the file. The browser will access the file, hash it up and compare its hash to the developer-provided one. If the results don’t match, the browser rejects the file and an error will appear in the console.

For a valid example, see them example of jQuery 3.3.1 below. Adding this element to the page will include the jQuery library. Try changing the integrity HTML attribute to see the file loading fail.

reversed and start on Ordered Lists

Ordered lists typically start at 1 and increment the leading number by 1 for each list item. HTML5 introduced/standardised two attributes that can manipulate how the element lists the numbers.

The reversed HTML attribute will start at the highest number and count down to 1, instead of the other way around. The start HTML attribute will start the count at the given value with two conditions:

1. The list converts the number into an integer – it ignores decimals, but it understands negatives.
2. It has to look like a number – the list treats anything it doesn’t recognise as “1”.

The reversed and start attributes only affect the list numbers – the order of the elements will remain the same as the source order (unless they’re changed using CSS).

{
  "user": "Skateside",
  "slug": "a1qf3ttz",
  "tabs": "html,result"
} 

form and form* on Input and Other Form Elements

Input elements belong to their parent form but there are some situations where we need the input element to be outside of that form. In situations like that, the form HTML attribute can identify the form that owns the input. Just give the form an ID and set the form HTML attribute to that same value.

<form id="my-form">
    <!-- ... -->
</form>
<input type="text" form="my-form">

The form will send the values of all its inputs to the server when the user submits it – including those elements connected using the form HTML attribute. The HTML attribute works on any input-like element including button, fieldset, input, keygen, label, meter, object, output, progress, select and textarea.

As well as the form HTML attribute, there are a few attributes that will adjust the form’s attributes if they’re assigned to an input elements (with a type of “submit” or “image”) or a button. The attributes are:

• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget

When a user submits a form using the input or button control with one of those HTML attributes, the form’s attribute is overridden with the element’s form* HTML attribute value so the values will have to be valid. You can see a description of valid values on MDN’s button page.

hidden on Any Element

The hidden HTML attribute hides an element – it’s as simple as it sounds. All modern browsers understand the HTML attribute including IE11. There’s a simple CSS fall-back if you need to support anything older.

[hidden] {
    display: none;
}

The fall-back has a stronger specificity than the HTML attribute itself, as the following demo will show. { “user”: “Skateside”, “slug”: “txwtwwrs”, “tabs”: “html,css,result”, “version”: 1 }

The real beauty of the hidden HTML attribute is the JavaScript interface. As a boolean attribute, a boolean value will be able to set it. { “user”: “Skateside”, “slug”: “exx3sc2p”, “tabs”: “result,html,js”, “version”: 5 }

Bonus: inert on Any Element

For a bonus HTML attribute, inert will tell the browser to ignore the element and anything inside it. Users won’t be able to access elements with the mouse or Tab key and screen readers won’t read the contents. Use it to hide off-canvas menus when they’re hidden or to disable the rest of the page when a modal is open. The only downside is that it’s still only a draft feature of HTML. There is a polyfill available developed by Chrome. In the future, this will be a useful HTML attribute that will help with accessibility.

Conclusion

Keeping our skills up-to-date enables us to offer our clients the best possible service. Knowledge of HTML attributes can speed up development time, saving money. Modern techniques also improve accessibility and interoperability. Why not look through our past work to see if you can spot any of these HTML attributes?