HTML5 - Introduction
HTML5 - New Elements
HTML5 - Removed Elements
HTML5 - Browser Check
Tag Name : global-attributes
Global attributes, as the name suggests, are attributes that can be used with any/all HTML elements.
The following new Global Attributes are added in HTML5
1. contenteditable
2. contextmenu
3. data-*
4. draggable
5. dropzone
6. hidden
7. spellcheck
8. translate

The 'contenteditable' attribute specifies whether the content of an element is editable or not.

'contenteditable' Example :
<!DOCTYPE html>
<html>
<body>

<p contenteditable="true">This paragraph is set to be editable using the contenteditable HTML5 attribute.</p>

</body>
</html>

The 'contextmenu' attribute opens up a menu in response to right-click on the HTML element. This attribute is not supported by any browsers at the time of this writing.

'contextmenu' Example :
<!DOCTYPE html>
<html>
<body>

<p contextmenu="portal_components">GeneralConnection.com is portal. Right clicking this paragraph opens up a menu which shows the different components on this Portal.</p>

<menu id="portal_components">
<command label="Hand-Edited Website Directory" onclick="visitHandEditedDir()">
<command label="Nursery Rhymes" onclick="visitNurseryRhymes()">
</menu>


</body>
</html>

The 'data-*' attribute is used to specify custom data.

'data-*' Example :
<!DOCTYPE html>
<html>
<body>

</head>
<body>

<p>Click on a Gadget to see its type:</p>

<ul>
<li onclick="dispMessage(this)" id="iPhone" data-gadgetType="mobile-phone">iPhone</li>
<li onclick="dispMessage(this)" id="iPad" data-gadgetType="tablet">iPad</li>
</ul>


<script>
function dispMessage(selectedItem)
{
var gadgetType = selectedItem.getAttribute("data-gadgetType");
alert("The " + selectedItem.innerHTML + " is a " + gadgetType);
}
</script>


</body>
</html>

The 'draggable' attribute is used to specify if a given HTML element is draggable. Links and Images are draggable by default.

'draggable' Example :
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><p id='111' ondragstart="drag(event)" draggable="true">test1</p></div>
<br>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"><p id='222' ondragstart="drag(event)" draggable="true">test2</p></div>
</body>
</html>

The 'dragzone' attribute is used to specify how the dragged content is to be handled. Possible options are : copy, move and link. This attribute is not currently supported by major browsers.
When dragzone=copy, the destination element will get a copy of the source element contents.
When dragzone=move, the destination element will get a copy of the source element contents and the source element contents are cleared.
When dragzone=copy, the destination element will get a link to the source element contents.

'dragzone' Example :
<!DOCTYPE HTML>
<html>
<head>

</head>
<body>

<div id=src dropzone="move">contents go here...</div>
<div id=dest></div>

</body>
</html>

The 'hidden' attribute is used to indicate the browser not to display a particular HTML element. The same effect an be achieved using CSS::display:none;

'hidden' Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<div hidden>This text will not be displayed.</div>
<br>
<div>This text will be displayed.</div>

</body>
</html>

The 'spellcheck' attribute is used to indicate if the contents if an element needs to be spell-checked or not.

'spellcheck' Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

FirstName has spellcheck on and LastName input box has spellcheck turned off.
<br/><br/>
First name: <input type="text" name="fname" spellcheck="true">
Last name: <input type="text" name="lname" spellcheck="false">

</body>
</html>

The 'translate' attribute is used to indicate if the contents if an element needs to be translated or not.

'translate' Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<p translate="no">Don't translate this!</p>
<p>This can be translated to any language.</p>

</body>
</html>


© 2010 www.generalconnection.com. All rights reserved. | www.generalconnection.com