HTML5 Attribute Change Reference for Web Developers

With each iteration of HTML you would expect to see new attributes introduced. Well, HTML5 is no exception. In all there are over 40 attributes that have been added in HTML5, so far. Now, there is a caveat to that total. You will find that many of the attributes are not really “new” but rather they are existing attributes that you may already be familiar with which have been added to more elements. For example, the element now has a target attribute just like the element. In this reference for web developers we will discuss each of them, tell you how they are used and discuss various other aspects of HTML5 attributes.

Global Attributes

Some attributes that have been added are intended to apply globally amongst all elements. Of course, Global in HTML really means Mostly Global as there are always some exceptions.

contenteditable – This attribute indicates whether or not the user can edit the element and change its markup. The legal values for this attribute are true, false or inherit.

contextmenu – This attribute is used to specify the context menu for an element, i.e. the id attribute value of a menu element. Don’t get excited about this one yet, though. The

element has yet to be implemented in any major browser, so this attribute has no practical use yet.

data-* – This one is the make-your-own attribute. Technically it’s not really an attribute but rather a prefix for any attribute that you want to add to an element. An example of how this works in an element would look something like . You simply create your own attribute with the data- prefix on it and assign it whatever value you like. The reason for the data- prefix is to avoid clashes with future versions of HTML. The only restriction on these custom attributes is that they are not used for user agent extensions.

draggable – This attribute specifies whether an element can be dragged and dropped. The valid values for this one are true, false and auto. So far only Chrome and Safari have implemented this attribute which makes this attribute not quite ready for prime time yet.

dropzone – This attribute specifies what happens when a draggable element is dropped over another element. Its valid values are copy, move and link. The easiest example to envision is two text boxes where the user drags the text from one text box to another and upon dropping the text from the first text box it is “moved” from the first text box to the second text box.

hidden – This attribute does exactly what is says and hides an element when its value is hidden. The only legal value for this attribute is hidden, anything else and the element will be visible. This attribute works in all major browsers except Internet Explorer. Why? Who knows, it seems like a no brainer to me.

role and aria-* – These attributes are worth mentioning but serve a very niche purpose. They are used to instruct assistive technologies and will rarely but used by most developers.

spellcheck – This one is my favorite new global attribute by far. It employs spell checking on whatever the user types in a contenteditable element. Generally misspellings will be flagged by a red line under any misspelled words. Currently only Firefox, Opera, Chrome and Safari have implemented this attribute. You will also notice a few quirks between the browser implementations like Firefox flagging spelling errors in an element on page load whereas Chrome will not. The good news is that including spellcheck on elements will have no adverse effects in browsers that do not yet support spellcheck, so you might as well use it where appropriate. Remember, though, it’s only a spell checker and it does not check grammar.

One last attribute of note is the xml:space attribute which was only available on select elements in HTML 4 has now moved to global status and is available on all HTML 5 elements.

Element Attributes

There are quite a few new attributes, several of which apply to multiple elements. In order to make it as clear as possible which elements are related to each new attribute I have listed them below by attribute name with the elements the attribute applies to in parentheses.

async (script element) – This attribute tells the script element to execute the script as soon as it is ready while the rest of the page continues to load. A practical example of this would be firing off a special message box while the rest of the page continues to load in the background. This works in all major browsers except Internet Explorer. An example of this attribute can be seen below.

autocomplete (input element) – This handy attribute does exactly as it is named and auto-completes text entered into input elements that have a valid type attribute designated for them. An example of this attribute in action can be seen below. The valid values for autocomplete are on or off. The valid values for the associating type attribute for autocomplete (autocomplete needs to know the type to work properly) are text, search, url, telephone, email, password, datepickers, range, and color. This attribute actually applies to the form element as well but the type is not required or relevant for that element as autocomplete gets the type from each input element in the form. Setting autocomplete to on in the form element enables autocomplete for all input elements in the form.

Note: This attribute is supposed to work in all major browsers, however, some browser settings may need to be tweaked in certain browsers by the user in order to get autocomplete to work properly.

autofocus (input, select, textarea and button elements) – This attribute causes the element to automatically get focus when the page is loaded. This attribute works with all major browsers except Internet Explorer. An example of this attribute can be seen below.

charset (meta element) – This attribute is new to the meta element in HTML 5 and has been adopted by all major browsers for a while now. It allows the developer an easy means for setting the character encoding for a page which is most commonly UTF-8 (Unicode). While all browsers can understand all encoding types, none actually do. Therefore, be very careful if you decide to stray far from the most common character encoding types.

dirname (input and textarea elements) – This attribute really only applies to developers that have to deal with ltr (left-to-right) and rtl (right-to-left) text direction. The dirname attribute allows the developer to define text direction on input and textarea elements simply by setting the dirname attribute value to ltr (default) or rtl. Don’t get too excited about this one, though. It has yet to be implemented in any major browser.

disabled (fieldset element) – Like several other attributes here, disabled is not new but rather new to the fieldset element. This attribute tells the fieldset element to disable all elements within the fieldset. An example of this can be seen below. Again, don’t get too excited about this one yet. Safari and Google basically ignore disabled, Internet Explorer grays out the elements but still allows the user to type, and Firefox actually disables the elements as you would expect.

Personal Information:
First Name:

Last Name:

form (input, output, select, textarea, button, label, object and fieldset elements) – This is another of my new favorite attributes. It allows developers to make elements part of a form that are not within the form itself. What this means is more flexibility in how developers can place elements because they no longer have to worry about keeping all form elements grouped together inside the form element itself as seen in the example below. I tested only the input element and found this attribute working in all major browsers except Internet Explorer (I know .. go figure). I suggest that you test any element that you plan to use in your target browsers before you implement.

Username:

…

formaction (input and button elements) – This attribute overrides the form’s action to which the element belongs. The idea behind this is to allow developers the flexibility to send submitted data to different locations for processing when a form is submitted. Use this attribute by setting the formaction attribute to the URL where you want the data to be sent as seen in the example below. Since this attribute was impossible to test without building multiple pages for input and processing I did not test it in the major browsers. Be sure to test your own scenarios in your target browsers before implementing.

First name:

formenctype (input and button elements) – This attribute is used to override the enctype (encoding type) of the form element to which your input or button element belongs. The formenctype attribute has three valid values which are application/x-www-form-urlencoded (default), multipart/form-data, and text/plain. Because testing this attribute would require building multiple pages for input and processing the different encoding types I did not test it in the major browsers. Be sure to test your own scenarios in your target browsers before implementing.

formmethod (input and button elements) – This attribute overrides the method attribute of the form to which the input or button element belongs. Like the form’s method attribute, there are only two valid values which are get and post. This attribute is most useful in cooperation with the formaction attribute in scenarios where you are sending data to multiple disparate destinations for data processing. Because testing this attribute would require building multiple pages for input and processing with different methods I did not test it in the major browsers. Be sure to test your own scenarios in your target browsers before implementing.

formnovalidate (input and button elements) – Like the other attributes above, the formnovalidate attribute overrides the novalidate attribute of the form element to which the input or button element belongs. Its basic purpose is to exclude elements when the form validates. An example of its use can be seen below. This attribute does currently work for Firefox and Chrome but does not on Internet Explorer or Safari.

hreflang (area element) – This attribute is used to define the language of the target URL for the area element. In order for this attribute to have any purpose a href attribute must be present. The attribute is implemented by setting to the hreflang attribute to a valid language code. Its purpose is purely informational and has no functional purpose at this time.

label (menu element) – This attribute allows the developer to define the text for a section of the menu, basically a heading for a group of elements in a menu element. An example of the label attribute can be seen below (taken from the w3schools website at http://www.w3schools.com/html5/att_menu_label.asp). At this time there are no major browsers that support the menu element and thereby the label attribute as well.

manifest (html element) – This attribute allows you to use choose a location for your page’s cache manifest. This is primarily for offline applications. Using the manifest attribute is accomplished by setting the attribute to the URL of the cache manifest like in the example below. This attribute currently works in all of the major browsers.

max (input element) – This attribute is used to set a maximum limit on the user’s input. It can either be a numerical limit or date limit depending on the type attribute of the input element. An example of a numerical limit can be seen below. At this time only Chrome has implemented this attribute.

maxlength (textarea element) – This attribute limits the number of characters that can be entered in a textarea element. This is an attribute that has been associated with the input element for quite some time and works exactly the same with the textarea element. An example of this attribute can be seen below. This attribute, like so many others, works in all the major browsers except Internet Explorer.

 Some text should be entered here. 

media (a and area elements) – This attribute has been expanded from just the link element to the a and area elements as well. Its purpose is to define the optimized media/devices for the target URL. Since there are so many different possible combinations for how this attribute can be defined I refer you to the w3Schools.com website on the media attribute for the area element. This attribute is supported by all of the major browsers.

min (input element) – This attribute is used to set a minimum limit on the user’s input. It can either be a numerical limit or date limit depending on the type attribute of the input element. An example of a numerical limit can be seen in the max attribute example above. At this time only Chrome has implemented this attribute.

multiple (input element) – This attribute is a Boolean attribute that allows the user to select multiple values. It only works when the type attribute is set to either email or file. An example of this attribute can be seen below. This attribute works in all the major browsers except Internet Explorer. It’s also worth noting that the Firefox implementation is a bit user-unfriendly.

novalidate (form element) – This attribute disables validation on the form causing none of the elements associated with the form to be validated. An example of this attribute can be seen below. Like the formnovalidate attribute above, this attribute currently works with only Firefox and Chrome and does not work on Internet Explorer or Safari.

pattern (input element) – This attribute is used to specify a regular expression that the input element is validated against. This attribute only works if the type attribute value is set to text, search, url, telephone, email, or password. An example of the pattern attribute can be seen below. Currently only Firefox and Chrome have implemented this attribute.

Email regular expression taken from my favorite regular expression resource.

Note: Regular expressions are not easy to master but many examples can be found throughout the web that cover a wide range of scenarios.

placeholder (input and textarea elements) – This attribute allows you to create a brief description of what data is expected in the field. In most browsers this manifests as gray text in the element that disappears as soon at the element receives focus. An example of the placeholder attribute can be seen below. This attribute currently works in all major browsers except Internet Explorer.

rel (area element) – This attribute allows the developer to specify the relationship between the page and the target link. This attribute is only relevant when the href attribute is present. There are 12 valid rel attribute values altogether. This attribute currently works in all the major browsers.

required (input, select and textarea elements) – This attribute is a Boolean that indicates to the element that is must have a value entered or selected in order to be valid when submitted. An example of this attribute can be seen below. This attribute works in Firefox and Chrome but not with Internet Explorer or Safari.

reversed (ol element) – This attribute is a Boolean that tells the ol (ordered list) element to display its items in descending order instead of ascending order. This will be a handy attribute for your top 10 lists. An example of the attribute can be seen below. Unfortunately, none of the major browsers support this attribute yet.

Safari

Google Chrome

Internet Explorer

Firefox

sandbox (iframe element) – This attribute allows you to define an extra set of restrictions for the iframe element. The attribute works by first placing a set of restrictions on the iframe element when the sandbox attribute is present regardless of its value. The restrictions that are automatically applied are:

The iframe element is treated as being from another domain/server which prevents it from accessing some content from the same server
Forms are disabled
Scripts are disabled
Links cannot target other frames
Plugins are disabled

The value that you set for the sandbox attribute then removes some of the restrictions listed above based on the value that you choose. The optional valid values are:

1. allow-same-origin – Allows the content to be treated as being from the same server instead of another domain/server

2. allow-top-navigation – Allows the content to navigate its top-level browsing context

3. allow-forms – Re-enables forms in the content

4. allow-scripts – Re-enables scripts in the content (popups are still restricted)

An example of this attribute can be seen below.

Unfortunately, this attribute doesn’t seem to work in any of the major browsers yet.

scoped (style element) – This is a Boolean attribute that tells the style element to only apply its style settings to the style element’s parent element and all of that parent element’s child elements. This allows the developer to set a style once and have it apply to all elements in a defined section of your page rather than setting styles for each element individually. This would be most appropriate inside a div or span element, for example. An example of this attribute can be seen below. Unfortunately, this attribute has yet to be implemented by any of the major browsers.

New HTML 5 Attributes

There are several new attributes in HTML 5.

Seamless (iframe element) – This Boolean attribute indicates to the iframe element that it should be seamlessly integrated into the parent page. Basically that means no borders or scrollbars for the iframe element. The seamless attribute also causes links within the iframe element to target _parent by default, so make sure your links are targeted correctly. An example of the attribute can be seen below. Unfortunately, this attribute doesn’t work in any of the major browsers yet.

sizes (link element) – This attribute works in cooperation with the rel attribute when the rel attribute is set to icon. The sizes attribute instructs the link element on what size to make the icon. The value of the sizes attribute is in pixels and formatted HeightxWidth as shown in the example below. At this time there are no major browsers that have implemented this attribute yet.

srcdoc (iframe element) – This attribute allows the developer to set the HTML for the iframe element in the srcdoc attribute. It should be noted that this attribute takes precedence over the src attribute when both attributes are present, assuming the browser recognizes the srcdoc attribute. An example of the srcdoc attribute can be seen below. None of the major browsers support this attribute yet.

My test iframe text.

” src=”My_iFrame_HTML.htm”>

step (input element) – This attribute establishes the legal interval for input by the user. For example, setting the step attribute to 5 for an input element with the type attribute value of number means that the only valid input would be -5, 0, 5, 10, 15, etc. This works not only for the type attribute value of number but for type attribute values range, date, datetime, datetime-local, month, time and week as well. An example of the syntax for this attribute can be seen below. The only major browser this attribute works with right now is Chrome.

target (base element) – This attribute specifies the default target for the base element. The base element formerly allowed only defining the base URL for all relative links on the page. This attribute expands the base element’s functionality to include also setting a default target. The valid values for the target attribute are _blank, _parent, _self, _top, and the name of a target iframe element on your page. An example of the target attribute in a base element (which must be placed in the head element) can be seen below. This attribute is supported by all of the major browsers.

type (area element) – This attribute allows developers to now set the mime-type for the target URL of the area element. Obviously, this attribute is only relevant when the href attribute is present. This attribute is purely for reference purposes and has no real functional value. This attribute is supported by all of the major browsers.

type (menu element) – This attribute allows the developer to define the type of menu, i.e. how the menu will be presented and interacted with by the user. The valid types for the type attribute are list (a list of commands that a user can activate – this is the default option), context (a list of commands that must be activated before a user can interact with them), and toolbar (a grouping of directly accessible commands for the user to interact with). An example of the type attribute can be seen in the label attribute example above. At this time there are no major browsers that support the menu element and thereby the type attribute as well.

wrap (textarea element) – This attribute defines how the text in the textarea element will be wrapped when it submitted within a form element. Basically, it determines whether or not line breaks will be added to the submitted text upon submission. There are only two valid values for the wrap attribute which are soft and hard. The soft value (this is the default) indicates that no line breaks will be added to the submitted text. The hard value will add line breaks everywhere text wraps to a new line in the textarea element. The hard value also requires the cols attribute be present so that the line breaks can be determined. An example of the wrap attribute can be seen below. This attribute is currently supported by all of the major browsers.

 Bill Cosby – I started off as a child … 

So Many Attributes, So Little Time

While there are quite a few “new” attributes being added to elements in HTML5, you will find most of them very intuitive and/or familiar. You will also notice that implementation of these new attributes across the major browsers is far from complete, especially when it comes to Internet Explorer. Even though you may not be able to start applying most these new attributes right now, when the occasion does eventually arise you will at least be familiar with the new attribute options. After all, knowing what your options are is half of the battle. Happy coding!

Browsers used for testing: Firefox 7.0.1, Chrome 15.0.874.106, Internet Explorer 9.0.8112.16421, and Safari 5.1.1.

HTML5 Attribute Change Reference for Web Developers

Global Attributes

Element Attributes

New HTML 5 Attributes

So Many Attributes, So Little Time

Curtis Dicken

Company

Categories