We ArE RoCkInG GuYS: Important HTML5 Cheat Sheet for Web Developers

HTML5 has now become the new standard for the web development .And the best part is that every newbrowser has the compatibility of HTML5

icon smile Important HTML5 Cheat Sheet for Web Developers

So the moral of the story is if you are a web developer and want to match the future of web development, you have to learn HTML5. Just like the trend , even I am learning HTML5. So here I am sharing a very useful cheatsheet on HTML5 which should be a must have in your archive.

2012 html5 cheatsheep printout learn download Important HTML5 Cheat Sheet for Web Developers

New tags added in HTML 5

Layout tags

<article> Defines an article
<aside> Defines contents aside from the page content
<embed> Defines external interactive content or plugin
<figcaption> Defines the caption of a figure element
<figure> Defines a group of media content, and their caption
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<nav> Defines navigation links
<section> Defines a section
<wbr> Defines a possible line-break

Web Apps tags

<canvas> Defines graphics
<command> Defines a command button
<datagrid> References dynamic data in a tree or a tabular data form
<datalist> Defines a dropdown list
<details> Defines details of an element

Media tags

<audio> Defines sound content
<source> Defines media resources
<video> Defines a video

Ruby tags

<rp> Defines browser substitute for unsupported ruby elements
<rt> Defines explanation to ruby annotations
<ruby> Defines ruby annotations

Other tags

<dialog> Defines a conversion or people talking
<hgroup> Defines information about a section in a document
<keygen> Defines a generated key in a form
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<summary> Defines the header of a “detail” element
<time> Defines a date/time

Old tags

<acronym> Defined acronyms in HTML 4.01
<applet> Defined an embedded applet
<basefont> Defined default font properties for all text in a document
<big> Used to make text bigger
<center> set to center align text and content
<dir> Defined a directory list
<font> Specified font face, font size, and font color of text
<frame> Defined on particular window without a frameset
<frameset> Defined a frameset, which organized multiple windows
<noframes> Displayed text for browser that do not handle frames
<strike> Defined strikthrough text
<tt> Defined teletype text
<u> Defined underliend text
<xmp> Defined preformatted text

Global attributes

New attributes

contenteditable Specifies if the user is allowed to edit the content or not
value: true | false
contetxtmenu Specifies the context menu for an element
value: menu id
draggable Specifies whether a user is allowed to drag an element
value: true | false | auto
dropzone Specifies what happens when dragged data is dropped
value: copy | move | link
hidden Specifies that the element is not relevant
value: hidden
spellcheck Specifies if the element must have its spelling checked
value: true | false

Existing attributes

accesskey Specifies a keyboard shortcut to access an element
value: character
class Specifies a classname for an element (for stylesheets)
value: class name
dir Specifies the text direction for the cotent in an element
value: ltr | rtl
id Specifies a unique id for an element
value: id
lang Specifies a language code for the content in an element
value: language code
style Specifies the tab order of an element
value: number
title Specifies extra information about an element
value: text

Event attributes

New attributes on Window

onafterprint Run after the document is printed
onbeforeprint Run before the document is printed
onbeforeonload Run before the document loads
onerror Rn when an error occur
onhaschange Run when the document has change
onmessage Run when the message is triggered
onoffline Run when the document goes offline
ononline Run when the document comes online
onpagehide Run when the window is hidden
onpageshow Run when the window becomes visible
onpopstate Run when the window’s history change
onredo Run when the document performs a redo
onresize Run when the window resized
onstorage Run when a document loads
onundo Run when a document perform an undo
onunload Run when the user leaves the document

Existing attributes on Window

onblur Run when the window loses focus
onfocus Run when the window get focus
onload Run when the document loads

New attributes on Form

oncontextmenu Run when a context menu is triggered
onformchange Run when a form changes
onforminput Run when a form gets user input
oninput Run when an element gets user input
oninvalid Run when an element is invalid

Existing attributes in Form

onblur Run when an element loses focus
onchange Run when an element changes
onfocus Run when an element gets focus
onselect Run when an element is selected
onsubmit Run when a form is submitted

Unsupported attributes in Form

onreset Run when a form is reset (Not supported in HTML 5)

Existing attributes for keyboard

onkeydown Run when a key is pressed
onkeypress Run when a keys pressed and reloaded
onkeyup Run when a key is released

New attributes for mouse

ondrag Run when an element is dragged
ondragend Run at the end of a drag operation
ondragenter Run when an element is dragged on a drop target
ondragleave Run when an element leaves a valid drop target
ondragover Run when an element is dragged over a drop target
ondragstart Run at the star of drag operation
ondrop Run when dragged element is being dropped
onmousewheel Run when the mouse wheel is being rotated
onscroll Run when an element’s scrollbar is being scrolled

Existing attributes for mouse

onclick Run on a mouse click
ondbclick Run on a mouse double-click
onmousedown Run when a mouse button is pressed
onmousemove Run when the mouse pointer moves
onmouseout Run when the mouse pointer moves out of an element
onmouseover Run when the mouse pointer moves over an element
onmouseup Run when mouse button is released

New attributes for media

oncanplay Run when media can start play
oncanplaythrough Run when media can be played to the end
ondurationchange Run when the length of the media is changed
onemtied Run when a media resource element becomes empty
onended Run when media has reach end
onerror Run when an error occurs loading an element
onloadeddata Run when media data is loaded
onloadedmetadata Run when the duration of a media element is loaded
onloadstart Run when the browser starts to load the media data
onpause Run when media data is paused
onplaying Run when media data has start playing
onprogress Run when the browser is fetching the media data
onratechange Run when the media data’s playing rate has changed
onreadystatechange Run when the ready-state changes
onseeked Run when a element’s seeking attribute is not true
onseeking Run when an element’s seeking attribute is true
onstalled Run when there is an error in fetching media data
onsuspend Run when browser has stopped fetching media data
ontimeupdate Run when media changes its playing position
onvolumechange Run when media changes the volume, also when mute
onwaiting Run when media has stopped playing

Existing attributes for media

onabort Run on an abort event

Should developers and designers invest in HTML5?

YES ! HTML5 has become a full-fledged development environment .

Monday, 6 February 2012

Important HTML5 Cheat Sheet for Web Developers