There are many attributes that we use on a daily basis when writing HTML. Attributes such as
<img> tags which allows us provide a source destination for where our image resides.
These are the kind of attributes that most of us are familiar with. Many of them are necessary for the particular element to function as intended. There are however many other attributes that like me, you might not have even known existed.
Recently I completed a HTML quiz and was surprised at how many attributes I had never seen before. So let's explore some of these attributes together including what they do, when to use them and what elements they suitable with.
translate is an enumerated attribute meaning we need to explicitly pass
translate="no" as opposed to just
translate. It is used to instruct translation tools whether or not the text node of an element and its attribute values that are able to be translated, should be translated.
Think of a situation where your site is being translated to another language but you would prefer if your brand name was not translated. You can instruct these translation tools to not translate it by passing the attribute
Furthermore this attribute is respected by major automatic translation technologies such as Google Translate although it is not currently supported by Firefox or Internet Explorer. It could also be picked up by a human's translator tool.
Setting this attribute to
translate="yes" is unlikely to ever be required because a lack of any
translate attributes on the page signals to the translation tool that everything is to be translated anyway. Although if you need to override this for a particular then maybe you should consider setting this attribute to
<a href="/" translate="no"> My Brand Name </a>
This attribute is used to change the direction of the elements text content and has three possible states. However it should not be used as a method of aligning text because using
dir="rtl" with an
dir="ltr" based font will mean your full stops will be in the incorrect position on the left side of the text.
Left-to-right text direction. This is the default value.
Right-to-left text-direction. Languages such as arabic, hebrew, and pashto are written in this direction.
Allows the browser to decide the value based on an algorithm that checks for strong directionality in the elements text characters.
<header> <h1> dir attribute changes the direction of the elements text content </h1> <p dir="rtl"> Text is in english but is aligned to the right without any influence from CSS although punctuation might be out of place. </p> </header>
This attribute is used to determine whether or not an elements text content may be checked for spelling and grammar mistakes. It can be applied to any element that contains the
contenteditable attribute which allows for its text to be edited by the user.
This however is not recommended especially for production code because. You can however use it on an
<textarea> element as long as the
<input> element is not of type
It is also an enumerated attribute which means you must explicitly pass
<textarea contenteditable="true" spellcheck="true"> spellcheck enabled with editable conten. </textarea> <textarea spellcheck="false"> spellcheck disabl. </textarea>
ping attribute is used on an
<a> element and when clicked it sends a POST request with the body "ping" to the url or multiple urls specified which can also be written as a space seperated list of urls.
A use case for this attribute could be analytics where the owner of the site wants to keep a record of the number of clicks on the link.
<a href="https://something.com" ping="https://analytics.com"> Checkout this content </a>
We can use the
download attribute on the
<a> tag in combination with the
href attribute that we use all the time. When the user clicks on the link the file attributed to the
href tag will be downloaded. You can also set a custom filename for the download by assigning a value to the download such as
download="my-burger-menu" or just
download for the original filename provided by the
<a href="my-burger-menu.pdf" download="brand-menu"> Download our full menu here! </a>
hreflang attribute is used to instruct the browser as to which language the page is served with allowing its users to be provided with the correct version. It can then provide the site to users during browser searches if they are searching in that specific language. It could be included in either the sitemap, http header or the page markup and you can also target more than one country per page.
To use the
hreflang attribute we can pass in the required two letter language code and the optional two letter country code for example for German it would be
rel attribute belongs to the
link tag that we often use in the
head of a HTML document to link things such as stylesheets, icon packages and so on. Its most common job is to inform the search engines about the relationships that exist between your sites pages. When this attribute is set to
rel="alternate" in combination with
hreflang="de" we are successfully indicating the intended audience of the page.
<link rel="alternate" hreflang="de" href="https://something.de">
If for some reason you would like to start you ordered list from a specific number then we can set the
start attribute to an integer.
<ol start="5"> <li>Five</li> <li>Six</li> <li>Seven</li> </ol>
reversed attribute will reverse the order of list's item instead sorting the list from the highest to the lowest.
<ol start="5" reversed> <li>something</li> <li>something else</li> <li>something more</li> </ol>
Images are often the primary reason as to why your web page's initial load could be slow. Perhaps they are not optimized or maybe your page is trying to load all of the images on the page on the initial load. One way we can speed up this initial load speed is by only loading the images which the user will see after the page loads.
There is a native solution in HTML which can help use with this. We can add the
loading="lazy" attribute on an
<img> element which instructs the browser to defer loading the image until a certain calculated distance from the viewport is reached. The default option for this attribute is
loading="eager" which will load the image immediately on page load.
<img alt="a nice descriptive alt" loading="lazy" src="myimage.webp">
Another attribute for our images is the
decoding attribute which allows us to specify how we would like our images decoded with page load. Specifically we can tell the browser whether we want it to decode the images synchronously or asynchronously. It takes three possible values:
This is the default value where the browser will decide what it thinks is best for the decoding.
Decode the image synchronously along with the other page content.
Decode the image asynchronously in parallel with other page content which may help speed up the rendering of the page's other content.
<img decoding="async" alt="a nice descriptive alt" src="myimage.webp">
enctype atrribute is used on the
element to specify how the data from your form submission should be encoded. There are three states that we can set for this attribute:
This is the default setting for the attribute and is suitable for most simple HTML forms. It encodes key-value pairs as tuples where a "&" separates each tuple and a "=" in between each key/ value.
This value should be specified if your form requires the user to upload a file through the submission process
Finally this value sets the encoding to none at all and will just send the data as plain text which is not recommended.
<form enctype="application/x-www-form-urlencoded"> <label for="country"> <input id="country" name="country" type="text"> <input name="submit" type="submit"> </form
This is an interesting attribute that allows us to specify whether we would like the data from a form submission to be validated natively on submission. By default it is set as
true even if we don't include it and therefore passing
novalidate on the form will disable the native validation.
A good use case for setting
novalidate on the
<form> element is when you want to allow users to save their form progress so they can finish the submission at a later date. It will allow them to save their current form values without running into validation errors preventing them from saving.
<form novalidate> <label for="country" > <input id="country" name="country" type="text" /> <input name="submit" type="submit" /> </form
We all despise filling out forms. Despite this there are ways in which we can make it easier for the users of our site to accomplish this quicker. One of them is the
autocomplete attribute which tells the browser how it should populate a given form field if auto-completion is set based off the users history.
This attribute can be used with
<form> elements with value differences. When using forms the
name on the
input element is used to dictate the kind of information that will be used for the auto-completion so make sure you choose an appropriate name for the input (e.g. name, email, city, state, postcode etc...). If used on the
<form> element it can have the value of
A full list of
autocomplete options for the
<input> can be found here The HTML autocomplete attribute
There are few use cases for turning off this attribute on your forms. One of them might be that you implement your own custom autocomplete or perhaps you have a field which takes some custom data where you don't need to remember previous results. Even if you set it to off there may be cases the where the browser ignores it if it suspects it is a login form (see here MDN How to turn off form autocompletion
<form> <label for="country" > <input id="country" name="country" type="text" autocomplete="off" /> <label for="postcode" > <input id="postcode" name="postcode" type="text" autocomplete="postal-code" /> <input type="submit" /> </form
<form autocomplete="on" > <label for="country" > <input id="country" name="country" type="text"> <label for="postcode" > <input id="postcode" name="postcode" type="text"> <input name="submit" type="submit"> </form
min attributes can be specified on an
<input> element to limit the valid possible value of the element. The value should be less than or equal to the min and greater than or equal to the max. It can be applied to seven different input types which include:
<form> <label for="number">Number</label> <input id="number" max="30" min="-30" name="number" type="number"> <input name="submit" type="submit"> </form>
Another way to limit the value of an input field is through the
maxlength attribute which we can assign to
<textarea>. It will limit the number of characters that can be entered into the field and it must be an integer that is greater or equal to 0.
We can use this to limit the characters to a username for example although this method should not be relied upon as form validation. It is more a helpful tool to be accompanied by server-side validation of the input.
<form> <label for="username">Username</label> <input id="username" maxlength="30" name="username" type="text"> <input name="submit" type="submit"> </form>
pattern attribute when applied to an
<input> element provides a regular expression(string of characters to define a pattern) that it can use check against the value of its input. It can be applied to the following input types:
Once again relying on front-end validation for form submissions is not recommended and we should always include server-side validation. The example below validates that the input only contains letters or numbers.
<form> <label for="username">Username</label> <input id="username" name="username" pattern="[A-Za-z0-9]+" type="text"> <input name="submit" type="submit"> </form>
readonly attribute on specific
<input> elements check out which elements here, or the
<textarea> element disables the ability for the user to edit the input value.
You might think that it sounds the same as the
disabled attribute which is commonly used to achieve a similar effect but there a few differences. Unlike to the
disabled attribute, when
readonly is applied to an input it is still possible to copy the value of the input and users can also focus into the element.
<form> <textarea readonly> Users will not be able to edit this field but can copy or tab into it </textarea> <input name="submit" type="submit"> </form>
step attribute specifies a numeric value that the input uses as the stepping interval whenever the user clicks on the increment or decrement buttons. It can be applied to
<input> elements of type
number and the time/date types.
<form> <label for="number">Number</label> <input id="number" step="5" name="number" type="number"> <input name="submit" type="submit"> </form>
Thanks for getting this far! I hope you were able to learn something new about HTML to take with you in your web-development journey.
You can follow me @Kieran6dev for more helpful tips as well as my own progress through web development.
If you know of any other lesser-known HTML attributes which I did not include then let me know in the comments below. Thanks!