HTML is a markup language that consists of tags and their attributes used to structure and present content on the web. In a previous article, we looked at some of the underrated HTML tags. In this article, we will discuss lesser-known but still useful HTML attributes that can improve the functionality and accessibility of your website.
accept
Applicable to: <input type="file">
The accept attribute specifies the types of files that can be uploaded through an input element. This attribute is particularly useful for file upload forms, as it limits the types of files that can be uploaded, preventing users from uploading invalid or harmful files.
The value should contain a set of comma-separated file types as follows:
- audio/* - for all sound file types
- video/* - for all sound file types
- image/* - allows all images
- a valid MIME type string (e.g. text/javascript, text/vcard, video/mp4, etc.)
- a file extension to allow (e.g. .jpg, .png, .webp, etc.)
Example
Restricting the types of accepted files to PDF and Word documents:
<form>
<label for="file">Choose a file:</label>
<input id="file" type="file" name="file" accept=".pdf, .doc, .docx">
</form>
async
Applicable to: script
The async attribute tells the browser to load a script asynchronously, without blocking the rendering of the page, and execute it as soon as possible. It may be useful for faster loading of scripts that can execute in any order and don't rely on other scripts. This attribute may improve your PageSpeed Insights Score.
Example
Loading the script asynchronously:
<script src="script.js" async></script>
autocomplete
Applicable to: <input>, <textarea>, <select>
The autocomplete attribute hints to the browser how to autofill user input in forms.
Possible values:
- on (default) - the browser should try to suggest values for autocompletion automatically. Usually, they are based on the input names (e.g. <input name="email"> will use the previously submitted email addresses).
- off - no autocompletion to use, the value is unique.
- a set of space-separated autofill detail tokens (e.g. shipping postal-code, country, tel, etc.). This can be useful when the input field names are non-standard, and thus browser is unable to determine their purpose.
Example
Non-informative form field names with autocomplete hints:
<form>
<label for="un">Username:</label><br>
<input id="un" type="text" name="un" autocomplete="username"><br>
<label for="e">Email:</label><br>
<input id="e" type="text" name="e" autocomplete="email"><br>
<label for="p">Phone:</label><br>
<input id="p" type="text" name="p" autocomplete="tel"><br>
<input type="submit"><br>
</form>
Please note that the autocomplete implementations differ from browser to browser and the example above may not work in your browser. It is always better to use the self-descriptive field names (check the difference):
Example 2
Properly named form field names:
<form>
<label for="username">Username:</label><br>
<input id="username" type="text" name="username"><br>
<label for="email">Email:</label><br>
<input id="email" type="text" name="email"><br>
<label for="phone">Phone:</label><br>
<input id="phone" type="text" name="phone"><br>
<input type="submit"><br>
</form>
autofocus
Applicable to: *
The autofocus attribute specifies that an element should be focused when the web page is loaded. This attribute is particularly useful for improving the user experience, as it saves users the extra step of clicking on a field to focus on it.
Example
Focusing the second form field with autofocus:
<button onclick="document.getElementById('testDialog').showModal()">Show the dialog</button>
<dialog id="testDialog">
<form method="dialog">
<label for="username">Username:</label><br>
<input type="text" id="username" value="admin"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" autofocus><br>
<input type="submit" value="Close">
</form>
</dialog>
cite
Applicable to: <blockquote>, <q>, <ins>, <del>.
The cite attribute is an HTML attribute that is used to provide a source of information that is referenced in the content of a web page. It is used to indicate the source URL of the quoted or edited text.
The value of this attribute isn't rendered on screen by any of the major browsers, but it may potentially be used by search engine crawlers and for other purposes. You can see the quote from W3C documentation in the example below.
Example
W3C about the cite attribute:
<blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#attr-blockquote-cite">
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.
</blockquote>
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.
contenteditable
Applicable to: *
The contenteditable attribute allows users to edit the content of an element directly on the web page.
Example
Making the blockquote element editable:
<blockquote contenteditable style="white-space:pre">This blockquote has editable content.
Try it yourself!
</blockquote>
This blockquote has editable content. Try it yourself!
defer
Applicable to: script
The defer attribute tells the browser to load a script asynchronously, without blocking the rendering of the page, and execute it after the page has finished loading. Like the async attribute, the defer attribute can speed up the performance of the website and improve its PageSpeed Insights Score. Unlike async, defer guarantees that the scripts will be executed in order of appearance.
Example
Deferring the script:
<script src="script.js" defer></script>
download
Applicable to: a, area
The download attribute allows users to download a resource directly from a link, rather than navigating to it. The attribute may have a value like download="filename.ext" that sets a recommended filename for the downloaded file.
Example
An image download link:
<a href="/i/a/html-attrs/flowers.jpg" download="present.jpg">A present for you</a>
inputmode
Applicable to: *
The inputmode attribute is an HTML attribute that specifies the type of keyboard that should be displayed when a user interacts with an input field. This attribute can be used to improve the user experience for mobile users, as it allows the keyboard to be optimized for the specific type of input that is expected.
Possible values: decimal, email, numeric, search, tel, text, url - each for a virtual keyboard that fits best, and none, for which the browser should not display a keyboard at all.
For example, if the input field is expecting a date, the inputmode attribute can be set to numeric to show the numeric keypad. Similarly, if the input field is expecting an email address, the inputmode attribute can be set to email to show the keyboard with the "@" symbol more prominently.
Example
Test all inputmode values with your mobile device:
<form>
<input type="text" inputmode="decimal" placeholder="decimal"><br>
<input type="text" inputmode="email" placeholder="email"><br>
<input type="text" inputmode="numeric" placeholder="numeric"><br>
<input type="text" inputmode="search" placeholder="search"><br>
<input type="text" inputmode="tel" placeholder="tel"><br>
<input type="text" inputmode="text" placeholder="text"><br>
<input type="text" inputmode="url" placeholder="url"><br>
<input type="text" inputmode="none" placeholder="none"><br>
</form>
loading
Applicable to: <img>, <iframe>
The loading attribute allows to defer loading of images and iframes that are outside the viewport. This attribute may improve the PageSpeed Insights Score.
Possible values:
- eager (default) - the browser should load a resource immediately.
- lazy - defer fetching a resource until an element is visible in the viewport.
Example
A lazy-loaded image:
<img src="/i/a/html-headings.jpg" loading="lazy" width="700" height="499" alt="Lazy loaded image of HTML headings">
For more detailed information about lazy loading, please read: Lazy Loading: The Definitive Guide.
pattern
The pattern attribute is used to specify a regular expression that the user's input must match. Validation is performed on form submission.
If you supply a title attribute, it should be used by the browser in the error message.
Example
Restricting the user input with the pattern attribute:
<form method="post" onsubmit="return false">
<label for="username">Username:</label><br>
<input id="username" name="username" pattern="[a-zA-z0-9]+" title="Allowed characters: letters and numbers only."> <small>(Letters and numbers only)</small><br>
<label for="ssn">SSN:</label><br>
<input id="ssn" name="ssn" pattern="\d{3}-?\d{2}-?\d{4}" title="Format: nine digits, optionally separated with hyphens."> <small>(Nine digits)</small><br>
<input type="submit"><br>
</form>
ping
Applicable to: a, area.
The ping attribute specifies a space-separated list of URLs to be notified when a link is followed. Each URL will receive a POST request with the payload 'PING'.
Example
Capturing the outbound link click with ping:
<a href="https://www.google.com"
ping="/click?url=https%3A%2F%2Fwww.google.com">Link with ping</a>
placeholder
Applicable to: <input>, <textarea>
The placeholder attribute allows to specify a short hint or example input for form fields, which is shown when the input value is empty. This attribute can improve the usability and accessibility of forms by providing additional context and guidance to users.
Example
Restricting the user input with the pattern and showing hints using the placeholder attributes:
<form method="post" onsubmit="return false">
<label for="username">Username:</label><br>
<input id="username" name="username" placeholder="Letters and numbers only" pattern="[a-zA-z0-9]+" title="Allowed characters: letters and numbers only."><br>
<label for="ssn">SSN:</label><br>
<input id="ssn" name="ssn" placeholder="123-45-6789" pattern="\d{3}-?\d{2}-?\d{4}" title="Format: nine digits, optionally separated with hyphens."><br>
<input type="submit"><br>
</form>
preload
Applicable to: <link>
The preload attribute indicates that the browser should prioritize the fetching of this resource. May speed up your website (and improve your PageSpeed score as well) if used for resources that are requested later in page load. For example, you can preload a script that is loaded from inside another script. You can also speed up the discovery of fonts that are used in CSS files by preloading them.
Example
Using the preload attribute:
<link rel="preload" as="script" href="script.js">
<link href="/fonts/google-sans/regular/latin.woff2" as="font" crossorigin>
readonly
Applicable to: <input>, <textarea>
The readonly attribute specifies that an element's value cannot be changed. This attribute is particularly useful for displaying data that should not be modified by users, but can still be selected and copied.
Example
Restricting editing with the readonly attribute:
<label for="orderid">Order number:</label>
<input type="text" id="orderid" value="11452308" readonly>
required
Applicable to: <input>, <textarea>, <select>
The required attribute is used in form elements to indicate that a field must be filled out before the form can be submitted. The browser will prevent the form from being submitted until the required fields are filled out.
You may have noticed that our earlier examples for pattern and placeholder don't restrict or check the empty form values. The required is the solution in this case.
Example
Improved example using all three attributes: pattern, placeholder, and required:
<form method="post" onsubmit="return false">
<label for="username">Username:</label><br>
<input id="username" name="username" placeholder="Letters and numbers only" pattern="[a-zA-z0-9]+" title="Allowed characters: letters and numbers only." required><br>
<label for="ssn">SSN:</label><br>
<input id="ssn" name="ssn" placeholder="123-45-6789" pattern="\d{3}-?\d{2}-?\d{4}" title="Format: nine digits, optionally separated with hyphens." required><br>
<input type="submit"><br>
</form>
reversed
Applicable to: <ol>
The reversed attribute is specific to ordered lists and allows to make a list in descending order. If present, the numbering of the list items is reversed, displaying it from highest to lowest.
Example
A descending ordered list:
<b>Top 7 largest car manufacturers by production (2017):</b>
<ol reversed>
<li>Honda</li>
<li>Nissan</li>
<li>Ford</li>
<li>General Motors</li>
<li>Hyundai / Kia</li>
<li>Volkswagen</li>
<li>Toyota</li>
</ol>
- Honda
- Nissan
- Ford
- General Motors
- Hyundai / Kia
- Volkswagen
- Toyota
spellcheck
Applicable to: <input>, <textarea>, all elements with contenteditable
Specifies whether the element's content should be checked for spelling errors.
Possible values: true, false.
For elements with spellcheck enabled, browsers will underline misspelled words and suggest corrections.
Example
Textarea with spellcheck enabled:
<textarea cols="50" rows="7" spellcheck="true">
Exomple tekst with wrrors
</textarea>
tabindex
The tabindex attribute allows to make elements focusable and specifies the order in which elements receive focus when the user navigates the page using the Tab ↹ key.
Possible values:
- Omitted (default) - the browser will decide whether the element is focusable.
- -1 or any negative number - the element is focusable by click, but not by Tab. The browser might ignore this preference for specific element types.
- 0 - the element should be focusable by click and by Tab. The browser might ignore this preference for specific element types (see the example below).
- positive number - the element should be focusable by click and by Tab, the value specifies the relative order of the element so the elements with higher tabindex attribute value come later.
Example
Test the focus behavior with Tab or click using the different tabindex values:
<button onclick="document.getElementById('testDialog2').showModal()">Show the dialog</button>
<dialog id="testDialog2">
<form method="dialog">
<p tabindex="0">I am a paragraph with tabindex=0.<br>Chrome makes me focusable by Tab only.</p><br>
<input type="text" placeholder="tabindex 2" tabindex="2"><br>
<input type="text" placeholder="tabindex -1" tabindex="-1"><br>
<input type="text" placeholder="tabindex 1" tabindex="1" autofocus><br>
<input type="submit" value="Close">
</form>
</dialog>
translate
Applicable to: *
The translate attribute specifies whether an element's content should be translated to a different language by the browser. The default value is "yes". However, if you do not want the browser to translate the content, you can set the attribute to "no". For example, you may want to not translate trademarks, company names, phrases, or even blocks of text.
Example
Disabling the translation of the phrase:
<p><span translate="no">Fear, uncertainty and doubt</span> (often shortened to FUD) is a propaganda tactic used in sales, marketing, public relations, politics, polling and cults.</p>
Fear, uncertainty and doubt (often shortened to FUD) is a propaganda tactic used in sales, marketing, public relations, politics, polling and cults.
Conclusion
In this article, we have explored a number of HTML attributes that are less known, therefore less used, but can be very useful in certain situations. For a complete list of HTML attributes, check out the MDN HTML attribute reference.
