HTML5 New Attributes

New Attributes

Several attributes have been introduced to various elements that were already part of HTML4:

  • The a and area elements now have a media attribute for consistency with the link element. WHATWG HTML also has the download and ping attributes.
  • The area element, for consistency with the a and link elements, now also has the hreflangtype and rel attributes.
  • The base element can now have a target attribute as well, mainly for consistency with the a element. (This is already widely supported.)
  • The meta element has a charset attribute now as this was already widely supported and provides a nice way to specify the character encoding for the document.
  • A new autofocus attribute can be specified on the input (except when the type attribute is hidden), selecttextarea and button elements. It provides a declarative way to focus a form control during page load. Using this feature should enhance the user experience compared to focusing the element with script as the user can turn it off if the user does not like it, for instance.
  • A new placeholder attribute can be specified on the input and textarea elements. It represents a hint intended to aid the user with data entry.
    <input type=email placeholder="a@b.com">
  • The new form attribute for inputoutputselecttextareabuttonlabelobject and fieldset elements allows for controls to be associated with a form. These elements can now be placed anywhere on a page, not just as descendants of the form element, and still be associated with a form.
    <table>
     <tr>
      <th>Key
      <th>Value
      <th>Action
     <tr>
      <td><form id=1><input name=1-key></form>
      <td><input form=1 name=1-value>
      <td><button form=1 name=1-action value=save>✓</button>
          <button form=1 name=1-action value=delete>✗</button>
     ...
    </table>
  • The new required attribute applies to input (except when the type attribute is hiddenimage or some button type such as submit), select and textarea. It indicates that the user has to fill in a value in order to submit the form. For select, the first option element has to be a placeholder with an empty value.
    <label>Color: <select name=color required>
     <option value="">Choose one
     <option>Red
     <option>Green
     <option>Blue
    </select></label>
  • The fieldset element now allows the disabled attribute which disables all descendant controls (excluding those that are descendants of the legend element) when specified, and the name attribute which can be used for script access.
  • The input element has several new attributes to specify constraints: autocompleteminmaxmultiplepattern and step. As mentioned before it also has a newlist attribute which can be used together with the datalist element. It also now has the width and height attributes to specify the dimensions of the image when using type=image.
  • The input and textarea elements have a new attribute named dirname that causes the directionality of the control as set by the user to be submitted as well.
  • The textarea element also has two new attributes, maxlength and wrap which control max input length and submitted line wrapping behavior, respectively.
  • The form element has a novalidate attribute that can be used to disable form validation submission (i.e. the form can always be submitted).
  • The input and button elements have formactionformenctypeformmethodformnovalidate, and formtarget as new attributes. If present, they override the action,enctypemethodnovalidate, and target attributes on the form element.
  • In WHATWG HTML, the input and textarea have an inputmode attribute.
  • The menu element has two new attributes: type and label. They allow the element to transform into a menu as found in typical user interfaces as well as providing for context menus in conjunction with the global contextmenu attribute.
  • The style element has a new scoped attribute which can be used to enable scoped style sheets. Style rules within such a style element only apply to the local tree.
  • The script element has a new attribute called async that influences script loading and execution.
  • The html element has a new attribute called manifest that points to an application cache manifest used in conjunction with the API for offline Web applications.
  • The link element has a new attribute called sizes. It can be used in conjunction with the icon relationship (set through the rel attribute; can be used for e.g. favicons) to indicate the size of the referenced icon. Thus allowing for icons of distinct dimensions.
  • The ol element has a new attribute called reversed. When present, it indicates that the list order is descending.
  • The iframe element has three new attributes called sandboxseamless, and srcdoc which allow for sandboxing content, e.g. blog comments.
  • The object element has a new attribute called typemustmatch which allows safer embedding of external resources.
  • The img element has a new attribute called crossorigin to use CORS in the fetch and if it is successful, allows the image data to be read with the canvas API. In WHATWG HTML, there is also a new attribute called srcset to support multiple images for different resolutions and different images for different viewport sizes.

Several attributes from HTML4 now apply to all elements. These are called global attributes: accesskeyclassdiridlangstyletabindex and title. Additionally, XHTML 1.0 only allowed xml:space on some elements, which is now allowed on all elements in XHTML documents.

There are also several new global attributes:

  • The contenteditable attribute indicates that the element is an editable area. The user can change the contents of the element and manipulate the markup.
  • The contextmenu attribute can be used to point to a context menu provided by the author.
  • The data-* collection of author-defined attributes. Authors can define any attribute they want as long as they prefix it with data- to avoid clashes with future versions of HTML. These are intended to be used to store custom data to be consumed by the Web page or application itself. They are not intended for data to be consumed by other parties (e.g. user agents).
  • The draggable and dropzone attributes can be used together with the new drag & drop API.
  • The hidden attribute indicates that an element is not yet, or is no longer, relevant.
  • WHATWG HTML has the inert attribute, intended to make dialog elements modal.
  • The role and aria-* collection attributes which can be used to instruct assistive technology.
  • The spellcheck attribute allows for hinting whether content can be checked for spelling or not.
  • The translate attribute gives a hint to translators whether the content should be translated.

HTML5 also makes all event handler attributes from HTML4, which take the form onevent, global attributes and adds several new event handler attributes for new events it defines. For instance, the onplay event handler attribute for the play event which is used by the API for the media elements (video and audio).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s