Quantcast Important HTML5 Cheat Sheet for Web Developers ← BLOG404

Important HTML5 Cheat Sheet for Web Developers 7

HTML5 has now become the new standard for the web development .And the best part is that every new browser has the compatibility of HTML5 🙂 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.

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

Existing tags in HTML 4 & 5

  • <!–..–> Defines a comment
  • <!DOCTYPE> Defines the document type
  • <a> Defines a hyperlink
  • <abbr> Defines an abbreviation
  • <address> Defines an address element
  • <area> Defines an area inside an image map
  • <b> Defines bold text
  • <base> Defines a base URL for all the links in a page
  • <bdo> Defines the direction of text display
  • <blockquote> Defines a long quotation
  • <body> Defines the body element
  • <br> Inserts a single line break
  • <button> Defines a push button
  • <caption> Defines a table caption
  • <cite> Defines a citaion
  • <code> Defines computer code text
  • <col> Defines attributes table columns
  • <colgroup> Defines groups of table columns
  • <dd> Defines a definition description
  • <del> Defines Defines deleted text
  • <dfn> Defines a definition term
  • <div> Defines a section in a document
  • <dl> Defines a definition list
  • <dt> Defines a definition term
  • <em> Defines emphasized text
  • <fieldset> Defines a fieldset
  • <form> Defines a form
  • <h1> to <h6> Defines header 1 to header 6
  • <head> Defines information about the document
  • <hr> Defines a horizontal rule
  • <html> Defines an html document
  • <i> Defines italic text
  • <iframe> Defines an inline sub window (frame)
  • <img> Defines an image
  • <input> Defines an input field
  • <ins> Defines inserted text
  • <kbd> Defines keyboard text
  • <label> Defines a label for a form control
  • <legend> Defines a title in a fieldset
  • <li> Defines a list item
  • <link> Defines a resource reference
  • <map> Defines an image map
  • <menu> Defines a menu list
  • <meta> Defines meta information
  • <noscript> Defines a noscript section
  • <object> Defines an embedded object
  • <ol> Defines an ordered list
  • <optgroup> Defines an option group
  • <option> Defines an option in a drop-down list
  • <p> Defines a paragraph
  • <param> Defines a parameter for an object
  • <pre> Defines preformatted text
  • <q> Defines a short quotation
  • <s> Defines text that is no longer correct
  • <samp> Defines sample computer code
  • <script> Defines a script
  • <select> Defines a selectable list
  • <small> Defines small text
  • <span> Defines a section in a document
  • <strong> Defines strong text
  • <style> Defines a style definition
  • <sub> Defines subscripted text
  • <table> Defines a table
  • <tbody> Defines a table body
  • <td> Defines a table cell
  • <th> Defines a table header
  • <thead> Defines a table header
  • <title> Defines the document title
  • <tr> Defines a table row
  • <ul> Defines a unordered list
  • <var> Defines a variable

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 .

I hope this cheat sheet will help you . Just take a print out and start learning/revising these tags to improve Your HTML5 Ninja Skills 😀

7 thoughts on “Important HTML5 Cheat Sheet for Web Developers

  1. Reply Alex@bubble games Feb 3,2012 2:08 pm

    very detailed and thorough, this cheatsheet is more than enough for us. Thank you very much Ajinkya!

  2. Reply Becca Feb 6,2012 1:11 pm

    As a new blogger this is a great help.. this is excatly what i needed.
    thanks much!!

  3. Reply wrought iron doors Feb 7,2012 2:41 am

    Nice one, I am really inspired after reading your post

  4. Reply Wpfix Feb 7,2012 11:15 am

    Useful Html 5 cheat sheet for web developers thanks for sharing this.

  5. Reply Sandipan Mukherjee Feb 16,2012 11:24 pm

    hey Ajinkya
    Very nice post.I think this is a really cool topic I really enjoy to read this article.Your article is straight to the points.
    your theme is great This article is very inspiring and helpful.thnx for sharing with us Brilliant work

  6. Reply Spatch Merlin Mar 8,2012 8:53 pm

    I have been learning about html coding recently but I have a develop who does the job for me. this is a good resource. Thanks a lot!

  7. Reply Christa Herzog Apr 16,2012 2:17 pm

    I think this is a really cool topic I really enjoy to read this article.These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post, writing is simply great, thank you for the post.

Leave a Reply