HTML5 is still a working draft and not a W3C recommendation. Opera Presto is providing support for various elements, attributes, and values as the draft matures towards recommendation status. This document points out which new HTML5 elements, attributes, values, and APIs are supported, partially supported, or not supported by Opera Presto. Changes, additions, and removals may occur from time to time. HTML5 is a work in progress and respectively, Opera considers its implementations for HTML5 experimental until its specification has stabilized.
The following table defines which new HTML5 elements are supported by Opera Presto. Each <element> is
given a short description/example and is hyperlinked to its place within the W3C HTML5 Working Draft.
| Element name | Description | Support |
|---|---|---|
<section>
|
Represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure. | Yes |
<article>
|
Represents an independent piece of content of a document, such as a blog entry or newspaper article. | Yes |
<aside>
|
Represents a piece of content that is only slightly related to the rest of the page. | Yes |
<hgroup>
|
Represents the header of a section. | Yes |
<header>
|
Represents a group of introductory or navigational aids. | Yes |
<footer>
|
Represents a footer for a section and can contain information about the author, copyright information, etc. | Yes |
<nav>
|
Represents a section of the document intended for navigation. | Yes |
<figure>
|
Can be used to associate a caption together with some embedded content, such as a graphic or video:
<figure>
<video src="ogg"></video>
<figcaption>Example</figcaption>
</figure>
|
Yes |
<figcaption>
|
Provides the caption for the <figure> element's contents.
|
Yes |
<video>
|
Represents a video or movie. It is a media element whose media data is ostensibly video data, possibly with associated audio
data.
|
Yes |
<audio>
|
Represents a sound or audio stream. It is a media element whose media data is ostensibly audio data.
|
Partial |
<source>
|
Allows authors to specify multiple media resources for media elements. It does not represent anything on its own. | Yes |
<embed>
|
It is is used for plug-in content. It represents an integration point for an external (typically non-HTML) applications or interactive content. | Yes |
<mark>
|
Represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. | Yes |
<progress>
|
Represents a completion of a task such as downloading, or when performing a series of expensive operations. | Yes |
<meter>
|
Represents a scalar measurement within a known range, or a fractional value; for example:
|
Yes |
<time>
|
Represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time
and a time zone. It provides an API for accessing the date/time as a Date object. Opera's support:
|
Yes |
<ruby>
|
Allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations. In Japanese, this form of typography is also known as furigana. | No |
<rt>
|
Marks the ruby text component of a ruby annotation. | No |
<rp>
|
Can be used to provide parentheses around a ruby text component of a ruby annotation, to be shown by user agents that do not support ruby annotations. | No |
<wbr>
|
Represents a line-break opportunity where phrasing content is expected. For example, someone is quoted as saying something
which, for effect, is written as one long word. However, to ensure that the text can be wrapped in a readable fashion, the
individual words in the quote are separated using a <wbr> element.
|
No |
<canvas>
|
Represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. | Yes |
<command>
|
Represents a command that the user can invoke. | No |
<details>
|
Represents additional information or controls which the user can obtain on demand. | No |
<summary>
|
Represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any. | No |
<datalist>
|
Represents a set of <option> elements that represent predefined options for other controls. The contents
of the element represents fallback content for legacy user agents, intermixed with <option> elements
that represent the predefined options. In the rendering, the <datalist> element represents nothing and
it, along with its children, should be hidden. The <datalist> element together with the new list
attribute for input can be used to make comboboxes:
<input list="browsers">
<datalist id="browsers">
<option value="browser A">
<option value="browser B">
<option value="browser C">
<option value="browser D">
</datalist>
|
Yes |
<keygen>
|
Represents a key pair generator control. When the control's form is submitted, the private key is stored in the local keystore,
and the public key is packaged and sent to the server.
<form action="processkey.cgi" method="post" enctype="multipart/formdata"> <p><keygen name="key"></p> <p>input type=submit value="Submit key..."></p> </form> |
Yes |
<output>
|
Represents some type of output, as from a calculation done through scripting. | Yes |
<input>
|
The <input> element type attribute now has the following new values.
|
Yes |
| Attribute name | Description | Support |
|---|---|---|
indeterminate
|
The indeterminate attribute of the <input> element is used to change the appearance of checkbox
controls.
|
Yes |
preload
|
The preload attribute of the <video> element is intended to provide a hint to the user agent
about what the author thinks will lead to the best user experience. For your reference, the autobuffer attribute
was changed to preload in the specification.
|
No |
media
|
The <a> and <area> elements now have a media attribute for consistency with the
<link> element. It is purely advisory.
|
Yes |
ping
|
The <a> and <area> elements have a new attribute called ping that specifies
a space-separated list of URLs which have to be pinged when a hyperlink is followed. Currently user tracking is mostly done
through redirects. This attribute allows the user agent to inform users which URLs are going to be pinged as well as giving
privacy-conscious users a way to turn it off.
|
No |
hreflang
|
The <area> element, for consistency with the <a> and <link> elements,
now also has the hreflang attribute.
|
Yes |
rel
|
The <area> element, for consistency with the <a> and <link> elements,
now also has the rel attribute.
|
Yes |
target
|
The <base> element can now have a target attribute as well, mainly for consistency with
the <a> element. (This is already widely supported.) Also, the target attribute for the
<a> and <area> elements is no longer deprecated, as it is useful in Web applications,
e.g. in conjunction with <iframe>.
|
Yes |
value
|
The value attribute for the <li> element is no longer deprecated as it is not presentational.
|
Yes |
start
|
The start attribute for the <ol> element is no longer deprecated as it is not presentational.
|
Yes |
charset
|
The <meta> element now has a charset attribute. This was already widely supported and provides
a way to specify the character encoding for the document.
|
Yes |
autofocus
|
A new autofocus attribute can be specified on the <input> (except when the type
attribute is hidden), <select>, <textarea>, and <button> elements.
It provides a declarative way to focus a form control during page load. Using this feature should enhance the user experience,
as the user can turn it off if he does not like it.
|
Yes |
placeholder
|
A new placeholder attribute can be specified on the <input> and <textarea>
elements. It represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be
a sample value or a brief description of the expected format. The placeholder attribute should not be used
as an alternative to a label.
|
Yes |
form
|
The new form attribute for <input>, <output>, <select>,
<textarea>, <button>, and <fieldset> elements allows for controls
to be associated with a form. I.e., these elements can now be placed anywhere on a page, not just as descendants of the
<form> element.
|
Yes |
required
|
The new required attribute applies to <input> (except when the type attribute
is hidden, image or some button type such as submit) and <textarea>. It indicates that the user has to
fill in a value in order to submit the form.
|
Yes |
disabled
|
The <fieldset> element now allows the disabled attribute which disables all its contents
when specified.
|
Yes |
autocomplete
|
This is a new attribute of the <input> element which specifies constraint. It is an enumerated attribute
that has two states:
|
No |
min
|
This is a new attribute of the <input> element which specifies constraint. It indicates the allowed range
of values for the element. If the element has a min attribute, and the result of applying the algorithm to
convert a string to a number to the value of the min attribute is a number, then that number is the element's
minimum.
|
Yes |
max
|
This is a new attribute of the <input> element which specifies constraint. It indicates the allowed range
of values for the element. If the element has a max attribute, and the result of applying the algorithm to
convert a string to a number to the value of the max attribute is a number, then that number is the element's
maximum.
|
Yes |
multiple
|
This is a new attribute of the <input> element which specifies constraint. It is a boolean attribute
that indicates whether the user is to be allowed to specify more than one value.
|
Yes |
pattern
|
This is a new attribute of the <input> element which specifies constraint. It specifies a regular expression
against which the control's value is to be checked. If specified, the attribute's value must match the JavaScript Pattern
production.
|
Yes |
step
|
This is a new attribute of the <input> element which specifies constraint. It indicates the granularity
that is expected (and required) of the value, by limiting the allowed values.
|
Yes |
list
|
This is a new attribute of the <input> element which specifies constraint. It can be used together with
the <datalist> and <select> elements. It identifies an element that lists predefined
options suggested to the user. If present, its value must be the ID of a <datalist> element in the same
document.
|
Yes |
novalidate
|
This content attribute of the <form> element is a boolean attribute that can be used to disable
form validation submission (i.e., the form can always be submitted). If present, it indicates that the form is not to be
validated during submission.
|
Yes |
formaction
|
This is a new attribute of the <input> and <button> elements. If present, it overrides
the action attribute on the form element. If specified, it must have a value that is a valid URL. The action
of an element is the value of the element's formaction attribute.
|
Yes |
formenctype
|
This is a new attribute of the <input> and <button> elements. If present, it overrides
the action attribute on the <form> element. The formenctype content attribute
is also an enumerated attribute with the following keywords and states:
|
Yes |
formmethod
|
The formmethod content attribute is an enumerated attribute with the following keywords and states:
|
Yes |
formnovalidate
|
The formnovalidate content attribute is a boolean attribute. If present, it indicates that the form
is not to be validated during submission.
|
Yes |
formtarget
|
The formtarget content attribute, if specified, must have a value that is a valid browsing context name or keyword. | Yes |
type
|
This is a new attribute of the <menu> element. It allows the element to transform into a menu as found
in typical user interfaces, and provides for context menus in conjunction with the global contextmenu attribute.
The type attribute controls the data type (and associated control) of the element. It is an enumerated attribute indicating
the kind of menu being declared. The attribute has three states:
|
No |
label
|
This is a new attribute of the <menu> element, and gives the label of the menu. It is used by user agents
to display nested menus in the UI. For example, a context menu containing another menu would use the nested menu's label
attribute for the submenu's menu label.
|
No |
scoped
|
The scoped attribute is a boolean attribute. If set, it indicates that the styles are intended just
for the subtree rooted at the style element's parent element, as opposed to the whole Document. If it is present, then the
user agent must apply the specified style information only to the <style> element's parent element (if
any), and that element's child nodes. Otherwise, the specified styles must, if applied, be applied to the entire document.
|
No |
async
|
This is a new attribute of the <script> element that influences script loading and execution. It is a
boolean attribute that indicates how the script should be executed. There are three possible modes that can be
selected:
|
No |
manifest
|
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. If the attribute is present, the attribute's value
must be a valid URL. The manifest attribute only has an effect during the early stages of document load. Changing
the attribute dynamically thus has no effect (and thus, no DOM API is provided for this attribute).
|
Yes |
sizes
|
The <link> element has a new attribute called sizes. It can be used in conjunction with
the icon relationship (set through the rel attribute) to indicate the size of the referenced icon for visual
media.
|
No |
reversed
|
The <ol> element has a new attribute called reversed. It is a boolean attribute.
If present, it indicates that the list is a descending list (..., 3, 2, 1). If the attribute is omitted, the list is an
ascending list (1, 2, 3, ...).
|
No |
sandbox
|
The sandbox attribute of the <iframe> element enables a set of extra restrictions on any
content hosted by the iframe. Its value must be an unordered set of unique space-separated tokens. The allowed values are:
sandbox attribute is set:
|
No |
seamless
|
The seamless attribute is a boolean attribute of the <iframe> element. When specified,
it indicates that the <iframe> element's browsing context is to be rendered in a manner that makes it
appear to be part of the containing document (seamlessly included in the parent document).
|
No |
srcdoc
|
The srcdoc attribute of the <iframe> element gives the content of the page that the nested
browsing context is to contain. It is expected to be used together with the sandbox and seamless
attributes.
|
No |
Several attributes from HTML 4 now apply to all elements. These are called global attributes.
| Attribute name | Description | Support |
|---|---|---|
class
|
Every HTML element may have a class attribute specified. The attribute, if specified, must have a value that is an unordered set of unique space-separated tokens representing the various classes that the element belongs to. The classes that an HTML element has assigned to it consists of all the classes returned when the value of the class attribute is split on spaces. | Yes |
dir
|
The dir attribute specifies the element's text directionality (left-to-right, or right-to-left). The attribute
is an enumerated attribute with the keyword ltr ((left-to-right) mapping to the state ltr, and
the keyword rtl (right-to-left) mapping to the state rtl. The attribute has no defaults.
|
Yes |
id
|
The id attribute represents its element's unique identifier. The value must be unique in the element's home
subtree and must contain at least one character. The value must not contain any space characters.
|
Yes |
lang
|
The lang attribute (in no namespace) specifies the primary language for the element's contents and for any
of the element's attributes that contain text. Its value must be a valid BCP 47 language code, or the empty string.
|
Yes |
style
|
All HTML elements may have the style content attribute set. If specified, the attribute must contain only a
list of zero or more semicolon-separated (;) CSS declarations. In user agents that support CSS, the attribute's value must
be parsed when the attribute is added or has its value changed, with its value treated as the body (the part inside the
curly brackets) of a declaration block in a rule whose selector matches just the element on which the attribute is set.
All URLs in the value must be resolved relative to the element when the attribute is parsed. For the purposes of the CSS
cascade, the attribute must be considered to be a style attribute at the author level. Documents that use
style attributes on any of their elements must still be comprehensible and usable if those attributes were removed.
|
Yes |
tabindex
|
The tabindex content attribute specifies :
|
Yes |
title
|
The title attribute represents advisory information:
|
Yes |
| Attribute name | Description | Support |
|---|---|---|
contenteditable
|
The contenteditable attribute is an enumerated attribute whose keywords are the empty string,
true, and false. The empty string and the true keyword map to the true state. The false keyword
maps to the false state. In addition, there is a third state, the inherit state, which is the missing value
default (and the invalid value default).
|
Yes |
contextmenu
|
The contextmenu attribute gives the element's context menu. The value must be the ID of a menu element in the
DOM. If the node that would be obtained by the invoking the getElementById() method using the attribute's value
as the only argument is null or not a menu element, then the element has no assigned context menu. Otherwise,
the element's assigned context menu is the element so identified.
|
No |
data-*
|
A custom data attribute is an attribute in no namespace whose name starts with the string "data-",
has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 .. U+005A
(LATIN CAPITAL LETTER A .. LATIN CAPITAL LETTER Z). Custom data attributes are intended to store custom data private to
the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended
for use by software that is independent of the site that uses the attributes. Every HTML element may have any number of
custom data attributes specified, with any value. They refer to the DOM Dataset API.
|
Yes |
draggable
|
All HTML elements may have the draggable content attribute set. It is an enumerated attribute, and has three
states:
|
No |
hidden
|
All HTML elements may have the hidden content attribute set. The hidden attribute is a boolean attribute.
When specified on an element, it indicates that the element is not yet, or is no longer, relevant. User agents should not
render elements that have the hidden attribute specified.
|
Yes |
role
|
An implementing host language will provide an attribute with the following characteristics:
|
Yes |
aria-*
|
The WAI-ARIA Attributes Module declares the WAI-ARIA attributes as a module that can be included in a modularlized DTD.
Note the WAI-ARIA attributes are in no namespace, and the attribute name begins with "aria-" to reduce the
likelihood of collision with existing attributes.
|
Yes |
spellcheck
|
The spellcheck attribute is an enumerated attribute whose keywords are the empty string, true
and false. The empty string and the true keyword map to the true state. The false
keyword maps to the false state. Please note that the "default" state has been removed.
|
Yes |
HTML5 also makes all event handler attributes from HTML4 that take the form onevent-name global attributes,
and adds several new event handler attributes for new events it defines, such as the message event which is used by the
cross-document messaging API.
| Attribute name | Description | Support |
|---|---|---|
focusin
|
A user agent must dispatch this event when an event target is about to receive focus. This event type must be dispatched before the element is given focus. The event target must be the element which is about to receive focus. This event type is similar to focus, but is dispatched before focus is shifted, and does bubble. | Yes |
focusout
|
A user agent must dispatch this event when an event target is about to lose focus. This event type must be dispatched before the element loses focus. The event target must be the element which is about to lose focus. This event type is similar to blur, but is dispatched before focus is shifted, and does bubble. | Yes |
onhashchange
|
The HTML5 onhashchange event must be invoked whenever a
hashchange event is targeted at or bubbles through the object. It must be supported by Window objects, as DOM
attributes on the Window object, and with corresponding content attributes and DOM attributes exposed on the <body>
element. The hashchange event is fired asynchronously when navigating to a session history entry whose URL
differs from that of the previous one only in the fragment identifier.
|
Yes |
These HTML 4 elements have slightly modified meanings in HTML5 to better reflect how they are used on the Web or to make them more useful.
| Element name | Description | Support |
|---|---|---|
<a>
|
The <a> element without an href attribute now represents a "placeholder link".
It can also contain flow content rather than being restricted to phrase content.
|
Yes |
<address>
|
The <address> element is now scoped by the new concept of sectioning. It represents the contact information
for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the
document as a whole.
|
Yes |
<b>
|
The <b> element represents a span of text to be stylistically offset from the normal prose without conveying
any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose
typical typographic presentation is boldened.
|
Yes |
<cite>
|
The <cite> element now solely represents the title of a work (e.g. a book, a paper, an essay, a poem,
a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a
musical, an exhibition, a legal case report, etc). Specifically the example in HTML4 where it is used to mark up the name
of a person is no longer considered conforming.
|
Yes |
<hr>
|
The <hr> element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition
to another topic within a section of a reference book.
|
Yes |
<i>
|
The <i> element represents a span of text in an alternate voice or mood, or otherwise offset from the
normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a
ship name, or some other prose whose typical typographic presentation is italicized.
|
Yes |
<label>
|
For the <label> element the browser should no longer move focus from the label to the control
unless such behavior is standard for the underlying platform user interface.
|
Yes |
<menu>
|
The <menu> element represents a list of commands and is redefined to be useful for toolbars and context
menus.
|
Partial |
<small>
|
The <small> element now represents small print (for side comments and legal print).
|
Yes |
<strong>
|
The <strong> element now represents importance rather than strong emphasis.
|
Yes |
<head>
|
The <head> element no longer allows the object element as child.
|
Yes |
The following attributes are allowed, but authors are strongly encouraged to not use them and instead use an alternative solution.
| Attribute name | Description | Support |
|---|---|---|
border
|
The border attribute on <img>: is required to have the value "0" when present. Authors can
use CSS instead.
|
Yes |
language
|
The language attribute on <script>: is required to have the value "JavaScript" (case-insensitive)
when present and cannot conflict with the type attribute. Authors can simply omit it, as it has no useful function.
|
Yes |
name
|
The name attribute on <a>: authors can use the id attribute instead.
|
Yes |
summary
|
The summary attribute on <table>: the HTML5 draft defines several alternative solutions.
|
No |
HTML5 introduces a number of APIs (Application Programming Interfaces) that help in creating Web applications. These can be used together with the new elements introduced for applications.
| API name | Description | Support |
|---|---|---|
Media elements
|
An API for playing of video and audio which can be used with the new <video> and <audio>
elements. Opera provides support with the following exceptions:
|
Partial |
Application cache
|
An API that enables offline Web applications. | Yes |
Custom scheme and content handlers
|
An API that allows a Web application to register itself for certain protocols or media types. | No |
Editing
|
This API works in combination with a new global contenteditable attribute.
|
Yes |
Drag and drop
|
This API works in combination with a draggable attribute.
|
No |
History
|
An API that exposes the history and allows pages to add to it to prevent breaking the back button. | Yes |
HTMLDocumentHTML5 has extended the HTMLDocument interface from DOM Level 2 HTML in a number of ways. The interface is now implemented on all objects implementing the Document interface so it stays meaningful in a compound document context. It also has several noteworthy new members.
| Extension name | Description | Support |
|---|---|---|
getElementsByClassName()
|
This is used to select elements by their class name. The way this method is defined will allow it to work for any content with class attributes and a Documentobject such as SVG and MathML. |
Yes |
innerHTML
|
This is used as an easy way to parse and serialize an HTML or XML document. This attribute was previously only available on HTMLElementin Web browsers and not part of any standard. Note: Opera does not support innerHTML on XML documents.
|
Yes |
activeElement
|
This determines which element in the document is currently focused and must return it. |
Yes |
hasFocus
|
This determines whether the document has focus respectively. It returns true if the document has focus; otherwise, it returns false. |
Yes |
getSelection()
|
This returns an object that represents the current selection(s). | Yes |
HTMLElement
The HTMLElement interface has also gained several extensions in HTML5.
| Extension name | Description | Support |
|---|---|---|
getElementsByClassName()
|
This is a scoped version of the one found on HTMLDocument.
|
Yes |
innerHTML
|
This is used as an easy way to parse and serialize a HTML or XML document. Note: Opera does not support innerHTMLon XML documents. |
Yes |
dataset
|
The dataset attribute provides convenient accessors for all the data-* attributes on an element.
|
Yes |
classList
|
This is a convenient accessor for className. The object itreturns exposes the methods has(), add(),remove(), and toggle() for manipulating theelement's classes. Note: Opera does support className.
|
Yes |
relList
|
The <a>, <area> and <link>elements have a similar attribute called relList that providesthe same functionality (as shown above in classList)for the rel attribute.
|
No |
Need help? Hit F1 anytime while using Opera to access our online help files, or go here.