Useful HTML Attribute you may not know



Mazen Mohamed
created at: tags: html, frontend-web-development, frontend, web-development, attribute
Useful HTML Attribute you may not know

HTML is the core of web development. Yet, many aspiring programmers merely learn about the surface of it, the little that gets them to know enough to move to CSS, Javascript, etc. missing its full potential.

From the SEO perspective, these attributes provide additional semantics to the code, which should be something positive for a search engine.

We will take here a list of HTML attributes that many may not know, and they could be helpful.

[ "accept" ] [ "<input>" ] and [ "<form>" ] (but not in HTML5)

The [ "accept" ] attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.

It used to be supported on the [ "<form>" ] element but was removed in favor of the file in HTML5.

You can use In more than one way in [ "<input type='file'>" ]

For instance, there are a number of ways Microsoft Excel files can be identified, so a site that accepts Excel files might use an [ "<input>" ] like this:

1<input 2 type="file" 3 id="docpicker" 4 accept=".xlsx,.xlsm,.xlsb,.xltx,.xltm,.xls,.xlt,.xls,.xml,.xml,.xlam,.xla,.xlw,.xlr,application/,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 5/> 6Copy to Clipboard

Whereas if you're accepting a media file, you may want to be include any format of that media type:

1<input type="file" id="soundFile" accept="audio/*" /> 2<input type="file" id="videoFile" accept="video/*" /> 3<input type="file" id="imageFile" accept="image/*" />

The [ "accept" ] attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

Because of this, you should make sure that the expected requirement is validated server-side.

[ "multiple" ] in [ "<input>" ] and [ "<select>" ]

The [ "multiple" ] attribute, if set, it indicates whether multiple values can be entered in an input of the type email or file.

Valid for the email and file input types and the [ "<select>" ].

[ "cite" ] in [ "<blockquote>" ], [ "<del>" ], [ "<ins>" ], and [ "<q>" ]

The value will be an URL containing an online resource in which contains the quoted reference (or the insertion/deletion information in the case of [ "<ins>" ] and [ "<del>" ] tags respectively).

It is not a required attribute, but it can be interesting if we are citing an online article or document.

1<blockquote cite=""> 2 <p> 3 Avian carriers can provide high delay, low throughput, and low altitude 4 service. The the connection topology is limited to a single point-to-point 5 path for each carrier, used with standard carriers, but many carriers can be 6 used without significant interference with each other, outside of early 7 spring... 8 </p> 9</blockquote>

[ "allow" ] in [ "<iframe>" ]

Specifies the feature policy with the features available within the iframe. Some of the values that it can have: camera, accelerometer, fullscreen, microphone, USB...

[ "allow" ] redefines how features are included in the iframe. It is the way moving forward and leaves the attributes [ "allowfullscreen" ] or [ "allowpaymentrequest" ] for legacy.

[ "pattern" ] in [ "<input>" ] and [ "<textarea>" ]

validation with regex!

Defines a regular expression against which the element's value will be validated against.

1<input 2 type="password" 3 name="password" 4 id="password" 5 placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" 6 pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" 7 autofocus 8 required 9/>

[ "autofocus" ] in [ "<input>" ] and [ "<textarea>" ]

An attribute that provides focus to the input element automatically by placing the cursor on it on page load, or when the [ "<dialog>" ] that it is part of is displayed.

1<input type="text" id="first-name" name="first-name" required autofocus />

[ "datetime" ] in [ "<time>" ], [ "<ins>" ] and [ "<del>" ]

This attribute indicates the time and date of the change and must be a valid date string with an optional time.

If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp for the format of the string without a time.

The format of the string if it includes both date and time is covered in Local date and time strings.

For [ "ins" ] and [ "<del>" ], the [ "datetime" ] will indicate the moment of the insertion/deletion.

1<p> 2 <del datetime="2020-11-08T12:00">This text has been deleted</del>, here is the 3 rest of the paragraph. 4 <ins datetime="2010-07-10T19:00">T his paragraph has been inserted.</ins> 5</p>

[ "spellcheck" ] in [ "<textarea>" ], [ "<input>" ] and [ "contenteditable" ] elements

The [ "spellcheck" ] attribute tells a browser whether or not to check the spelling/grammar of the text in an editable element.

Values include [ "true" ] and [ "false" ], and are required if the [ "spellcheck" ] attribute is present.

When the [ "spellcheck" ] attribute is not included, the default value depends on the element and browser. Generally, [ "contenteditable" ] elements and [ "<textarea>" ]s behave as if it were set to [ "true" ], and [ "<input>" ]s behave as if it were set to [ "false" ].

1<input type="text" spellcheck="true" /> <input type="text" spellcheck="false" />

[ "contenteditable" ]

You can use the [ "contenteditable" ] attribute in order to enable the user to edit the content or disable the user to edit the content.

Note, When the [ "contenteditable" ] attribute is not set on an element, it will be inherited from its parent.

1<h2>Shoppping List(Content Editable)</h2> 2<ul class="content-editable" contenteditable="true"> 3 <li>1. Milk</li> 4 <li>2. Bread</li> 5 <li>3. Honey</li> 6</ul>

[ "data-*" ]

The [ "data-*" ] attributes are used to store custom data private to the page or application. The stored data can be used in JavaScript code to create further user experiences.

The [ "data-*" ] attributes consist of two parts:

The attribute name should not contain any uppercase letters and must be at least one character long after the prefix [ "data-*" ] The attribute value can be any string

1<h2>Know data attribute</h2> 2<div 3 class="data-attribute" 4 id="data-attr" 5 data-custom-attr="You are just Awesome!" 6> 7 I have a hidden secret! 8</div> 9<button onclick="reveal()">Reveal</button>

Then in JavaScript:

1const reveal = () => { 2 const dataDiv = document.getElementById('data-attr'); 3 const value = dataDiv.dataset['customAttr']; 4 document.getElementById('msg').innerHTML = `<mark>${value}</mark>`; 5};

Note: For reading the values of these attributes in JavaScript, you could use [ "getAttribute()" ] with their full HTML name(i.e., data-custom-attr)

1// From the previous code nstead of 2// const value = dataDiv.dataset['customAttr']; 3// you can use 4const attribute = dataDiv.getAttribute('data-custom-attr');

But, the standard defines a more straightforward way: using a dataset property.

[ "translate" ]

The [ "translate" ] attribute is an enumerated attribute that is used to specify whether an element's translatable attribute values and its Text node children should be translated when the page is localized, or whether to leave them unchanged.

It can have the following values:

  • empty string or [ "yes" ], which indicates that the element should be translated when the page is localized.

  • [ "no" ], which indicates that the element must not be translated.

Although not all browsers recognize this attribute, it is respected by automatic translation systems such as Google Translate, and may also be respected by tools used by human translators. As such it's important that web authors use this attribute to mark content that should not be translated.

1<header> 2 <div class="logo" translate="no"> 3 <strong>BrandName</strong> 4 </div> 5</header>

[ "headers" ] in [ "<th>" ] and [ "<td>" ]

This attribute contains a list of space-separated strings, each corresponding to the id attribute of the [ "<th>" ] elements that apply to this element.

This attribute is useful in complex tables as it provides context to machines. It could be interesting for assistive technologies or augmented experiences, but, unfortunately, its support is spotty. So use with caution!

1<table> 2 <caption> 3 Weekend plan 4 </caption> 5 <thead> 6 <tr> 7 <th></th> 8 <th id="saturday">Saturday</th> 9 <th id="sunday">Sunday</th> 10 </tr> 11 </thead> 12 <tbody> 13 <tr> 14 <td></td> 15 <th id="morning" colspan="2">Morning</th> 16 </tr> 17 <tr> 18 <th id="hour08">8:00-10:00</th> 19 <td headers="saturday morning hour08">Soccer practice</td> 20 <td headers="sunday morning hour08">Reading</td> 21 </tr> 22 <tr> 23 <th id="hour10">10:00-12:00</th> 24 <td headers="saturday morning hour10">Basketball game</td> 25 <td headers="sunday morning hour10">Brunch</td> 26 </tr> 27 </tbody> 28 <tbody> 29 <tr> 30 <td></td> 31 <th id="afternoon" colspan="2">Afternoon</th> 32 </tr> 33 <tr> 34 <th id="hour12">12:00-14:00</th> 35 <td headers="saturday afternoon hour12">Siesta</td> 36 <td headers="sunday afternoon hour12">Golf</td> 37 </tr> 38 <tr> 39 <th id="hour14">14:00-18:00</th> 40 <td headers="saturday afternoon hour14">Party!</td> 41 <td headers="sunday afternoon hour14">Monday readiness</td> 42 </tr> 43 </tbody> 44</table>

[ "poster" ] in [ "<video>" ]

When adding a video to a webpage instead of having an image and replacing it with the [ "<video>" ] once clicked. you can use this attribute. It will take the URL of an image, replaced when the video starts playing. It looks the same, but it provides more control over the video and how it is loaded.

1<video controls poster="video-poster-link.jpg"> 2 <source src="video-link.mp4" type="video/mp4" /> 3 <source src="video-link.webm" type="video/webm" /> 4 Sorry, your browser doesn't support embedded videos. 5</video>

[ "inputmode" ] in [ "<input>" ], [ "<textarea>" ] and [ "contenteditable" ] elements

The [ "inputmode" ] attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. For example, if you pick the type number when the keyboard opens on mobile, it will open with only numbers.

It is used primarily on [ "<input>" ] elements. but [ "<textarea>" ] tag and [ "contenteditable" ] elements can get a similar effect by using the attribute [ "inputmode" ]. So developers can decide what type of keyboard opens when the editable element is focused.

The [ "inputmode" ] property can have the values: decimal, email, none (no keyboard displayed on focus), numeric, search, tel, text (default), or URL.

1<input inputmode='email' type='email' name='email'> 2<textarea inputmode="none" name="myTextarea"> 3<div contenteditable inputmode="decimal"></div>

[ "title" ]

The [ "title" ] attribute specifies extra information about an element.

The information is most often shown as a tooltip text when the mouse moves over the element.

The [ "title" ] attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).

1<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> 2<p title="Free Web tutorials"></p>

[ "download" ] in [ "<a>" ]

The [ "download" ] attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.

The optional value of the [ "download" ] attribute will be the new name of the file after it is downloaded. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).

If the value is omitted, the original filename is used.

1<a href="/images/image.jpg" download></a>

Other attributes to look for

  • [ "ping" ] in [ "<a>" ]: A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.

Resources and further reading