HTML5 Attributes

HTML5 Attributes

Just as we use attributes in our XHTML tags, HTML5 supplies us with a new set of attributes that we can apply to most any page element or tag. Most of the attributes you are already familiar with like style, id, class, etc... are still available to you.

contenteditable = true, false, inherit
Specify whether or not the content inside of a tag should be set to editable.

HTML CODE EXAMPLE

<div contenteditable="true">Hello World</div>

contextmenu = ID of a <menu> element
Specify the context menu associated with a tag. The value should be the ID of a <menu> tag.

HTML CODE EXAMPLE

<h1 contextmenu="mymenu">Right Click Me</h1>
<menu type="context" id="mymenu">
<command label="Menu Option 1" onclick="alert('Option 1 triggered');">
<command label="Menu Option 2" onclick="alert('Option 2 triggered');">
</menu>

draggable = true, false
Specify whether or not the user can drag an element.

HTML CODE EXAMPLE

<h2 draggable="true">Drag me around!</h2>

dropzone = copy, move, link
Specify a Javascript function to fire off when an item is dropped into the drop zone.

HTML CODE EXAMPLE

<div dropzone="move" ondrop="jsFunction(event)">Drop Here</div>

hidden = no value, or hidden
Specify a hidden element

HTML CODE EXAMPLE

<div hidden>I am hiding</div>
<!-- or -->
<div hidden="hidden">I am hiding</div>

spellcheck = true, false
Specify if words spelled wrong in editable areas will have a red squiggly line under them.

HTML CODE EXAMPLE

<div spellcheck="true" contenteditable="true">baad speeling underlined</div>

CUSTOM ATTRIBUTES
data-??? = you define
You can specify custom attributes that will validate for an element. using the prefix "data-" you can name the attribute whatever you like. And the value for the data can be any type of value.

HTML CODE EXAMPLE

<div data-poopoo="solid" data-peepee="liquid">
Content for Div goes here
</div>

In the example above I created two custom data attributes. One named "data-poopoo" and the other is "data-peepee". They both hold user defined values that correspond to them.

 click here to code.

Tweet