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