A reference to HTML5 tags

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

Note: I compiled these tags list from this cheat sheet. Correction and suggestion are welcomed. Thanks.

  • http://veerasundar.com/blog Veera


    You might want to extend this list by adding required properties for each tag. Might become a killer resource page then!

    • http://www.pakzilla.com Tahir Akram

      Thanks Veera. All right I do R&D on that. And it was your idea to convert that cheat sheet to textual form. 🙂

  • Pingback: An ultimate HTML5 cheatsheet you must have()

  • Anonymous

    “I’ve seen the future. In my dreams.”

  • Vlad Piersec

    Yep! Killer post. But there is room for improvement with some props…

    • http://twitter.com/tahirakram Tahir Akram

      I will do Vlad. 

  • Anonymous

    Hey thanks for taking the time to do this!  +2 Karma point for you!

  • Pingback: A REFERENCE TO HTML5 TAGS | Resources | Front Inside()