Last year I started on this article about HTML5. In that article I focused mainly on the various tags as far as the additions and removals since HTML 4.01/XHTML 1.0. Today I continue with HTML5 Tags’ Standard and Event Attributes. If you did not read the previous article you can find it here. I recommend starting off there before proceeding with this one.
With a few exceptions the following Standard Attributes apply to all the HTML5 tags. In no particular order, the Standard Attributes that were introduced in HTML5 are:
contenteditable
This has a value of either “true” or “false”.
Just as the name implies, this specifies that the user isn’t or is allowed to edit the content.
contextmenu
The value is a menu_id.
Basically it is the context menu for the element.
data-yourvalue
This has a non-specified value which can be anything appended to the label.
It is an author defined attribute. It must start with “data-”. It is good to note here that authors of HTML documents can define their own attributes.
draggable
This has a value of either “auto”, “true” or “false”.
This specifies whether a user is allowed to drag an element or not.
hidden
The label itself is the value
This specifies that the element is not displayed.
item
This value usually contains a URL or can be empty.
It is used to group elements.
itemprop
This value usually contains a url.
It is used to group elements.
spellcheck
This has a value of either “true” or “false”.
Specifies whether the elements contents must be checked for spelling or grammatical errors.
subject
Contains a value that is an id.
This specifies the corresponding item of the element.
As for as the above are concerned, these are the new attributes. Beneath I have gone ahead to detail out the Standard Attributes that have been there since HTML 4.01/XHTML 1.0. Again in no particular order:
accesskey
The value is a character.
This is the keyboard shortcut to access an element.
class
The value is “classname”
Specifies a name or classname for an element to be used in a style sheet
dir
The can be specified as “ltr” or “rtl”.
This specifies the direction of the text within the element.
id
value in the form of “id”.
This specifies a unique id for an element.
lang
This has the value of a language_code.
This specifies a language code for the content in an element. For example for English it is “en”
style
The value is the CSS type style definitions.
This allows the author to specify the styles of the element inline.
tabindex
the value is in the form of a number.
This specifies the tab order of an element with respect to others around it.
title
The value is in the form of text.
This specifies additional textual information about an element.
That’s it as far as Standard Attributes goes. There are other types of attributes that affect other behaviors and interactions of the elements. These events are usually used to trigger certain actions within the web browser.
Before I get to mentioning the various Event Attributes, it would be important to note that all these attributes take scripts (most popularly Javascript) as their values. So I guess that eliminates my need to mention the values on an element by element basis.
I will also be grouping these attributes by the containers they affect. In this case the groupings are Body, Form, Keyboard, Media, Mouse and other events. As we go along I will be specifying which attribute is new.
<body> Event Attributes
onload
This is used to run a script when the document has loaded.
Form Events
onblur
Runs a script when an element goes out of focus.
onchange
Runs a script when an element changes.
oncontextmenu
Runs a script when a context menu is triggered.
onfocus
Runs a script when an element gets into focus.
onformchange
Runs a script when details within a form are edited.
onforminput (New)
Runs a script when content is inserted or selected from a form element.
oninput (New)
Runs a script when content is typed into an input.
oninvalid (New)
Runs a script when invalid data is inserted into the form input.
onselect
Runs a script when an element is selected
onsubmit
Runs a script when a form is submitted
Keyboard Events
These will not work with the following elements base, bdo, br, head, html, iframe, meta, param, script, style, and title.
onkeydown
Runs a script when a key is pressed.
onkeypress
Runs a script when a key is pressed and released.
onkeyup
Runs a script when a key is released
Media Events
These will work with media elements, such as audio, embed, img, object, and video. Other than the “onabort” attribute all these attributes are new.
onabort
Runs a script when a task is aborted
oncanplay
Runs a script when media can start playing but has to wait or stop for buffering.
oncanplaythrough
Runs a script when the media can be played through to the end without stopping for buffering.
ondurationchange
Runs a script when the length of the media is changed.
onemptied
Runs a script when a media resource element becomes empty. These could be through network errors, loading errors etc.
onended
Runs a script when the media has reached the end.
onerror
Runs a script when an error occurs during the loading of an element.
onloadeddata
Runs a script when the media data is loaded.
onloadedmetadata
Runs a script when media data or all meta data of a media element is loaded.
onloadstart
Runs a script when the browser starts to load the media data.
onpause
Runs a script when the media data is paused.
onplay
Runs a script when the media data is going to start playing.
onplaying
Runs a script when the media data has started playing.
onprogress
Runs a script when the browser is fetching the media data.
onratechange
Runs a script when the media data’s playing rate has changed.
onreadystatechange
Runs a script when the media is no longer deemed as ready to play but was previously in that state.
onseeked
Runs a script when a media element’s seeking attribute is no longer true, and the seeking has ended.
onseeking
Runs a script when a media element’s seeking attribute is true, and the seeking has begun.
onstalled
Runs a script when there is an error in fetching media data.
onsuspend
Runs a script when the browser has been fetching media data, but stopped before the entire media file was fetched.
ontimeupdate
Runs a script when the media changes its playing position.
onvolumechange
Runs a script when media changes the volume, also when volume is muted.
onwaiting
Runs a script when media has stopped playing, but is expected to resume.
Mouse Events
onclick
Runs a script when the mouse is clicked.
ondblclick
Runs a script when the mouse is double clicked.
ondrag (New)
Runs a script when the element is dragged.
ondragend (New)
Runs a script when the drag operation ends.
ondragenter (New)
Runs a script when an element has been dragged to a valid drop target.
ondragleave (New)
Runs a script when an element leaves a valid drop target.
ondragover (New)
Runs a script when an element is being dragged over a valid drop target.
ondragstart (New)
Runs a script when at the start of a drag operation.
ondrop (New)
Runs a script when dragged element is being dropped.
onmousedown
Runs a script when the mouse button is pressed.
onmousemove
Runs a script when the mouse pointer moves.
onmouseover
Runs a script when the mouse pointer moves over an element.
onmouseout
Runs a script when the mouse pointer moves out of an element.
onmouseup
Runs a script when the mouse button is released.
onmousewheel (New)
Runs a script when the mouse wheel is being rotated.
onscroll (New)
Runs a script when the element’s scroll-bar is being scrolled.
Other Event Attributes
onmessage (New)
Runs a script when a message event is being triggered.
onshow (New)
Runs a script when an element’s style changes from being hidden.
That’s it, a quick and dirty manual about the nuts and bolts about HTML5. There is therefore nothing really thats complicated in HTML5 and within a few minutes any person competent in previous versions of HTML will be able to get up to speed with HTML5
Read: A Run Down Of HTML5 (Part 1)
Related posts:
Magnificently done post, if only all bloggers provided the same high quality information the internet would be a much better place. Please continue to keep up the good work! Ciao.
[...] Read: A Run Down Of HTML5 (Part 2). [...]