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 😀
very detailed and thorough, this cheatsheet is more than enough for us. Thank you very much Ajinkya!
As a new blogger this is a great help.. this is excatly what i needed.
thanks much!!
Nice one, I am really inspired after reading your post
Useful Html 5 cheat sheet for web developers thanks for sharing this.
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
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!
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.