Global attributes in HTML 5

This page is describing the HTML5 global attributes.

To review the rest of global and other HTML attributes, refer to the http://brenkoweb.com/tutorials/html/html-attributes.

Attribute characteristics and purpose:

HTML5

contenteditable attribute:

decides if the content of an element will be editable or not

contextmenu attribute:

describes a context menu for an element, appearing after clicking with a right-clicks

data-* attribute:

stores private custom data to the page or application

draggable attribute:

decides whether an element will be draggable or not

dropzone attribute:

in combination (or without) the attribute draggable defines if the dragged data will be moved, copied, or linked when dropped

hidden attribute:

declares an element irrelevant

spellcheck attribute:

instructs an user agent (a browser) to have an element's spelling and grammar checked or not

translate attribute:

instructs an user agent (a browser) to have an element translated or not

NOTE: The linked attirbutes below were introduced in previous version(s) of HTML.

HTML4.01 and older

accesskey attribute:

defines an access key (a single character) that after being pressed gives a focus to an element

class attribute:

assigns a class name to an element; any number of elements may share the same class name or names

dir attribute:

specifies the direction of the text

id attribute:

dedicates a name to an element and must be unique in a document

lang attribute:

helps browsers and search engines in various ways (better detection of cultural practices), helps speech synthesizers, helps spelling and grammar checkers, etc...

style attribute:

specifies inline styles information for an element

tabindex attribute:

defines order in which elements get focused on during tabbing navigation

title attribute:

description or summary of an element

Examples

Example with contextmenu attribute

<!DOCTYPE html>
<html lang='en-us'>
<head></head>
<body>

  <h1>HTML5 Context Menu Demo</h1>
  <p>Context menus are currently only supported in Firefox 8+</p>
  <div id="target" contextmenu="menu">Right-click here to see the menu.</div>
    <menu type="context" id="menu">
      <menuitem label="Tweet This Page" onclick="window.location='https://twitter.com/intent/tweet?text=' + document.title + ' ' + window.location.href;" icon="img/twitter.png"></menuitem>
      <menuitem label="Digg This Page" onclick="window.location='http://digg.com/submit?url='+window.location;" icon="img/digg.png"></menuitem>
      <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location;">
      </menuitem>
    </menu>

</body>
</html>

Example with contenteditable attribute:

<!DOCTYPE html>
<html lang='en-us'>
<head></head>
<body>

  <p contenteditable="true">This paragraph is editable</p>
  <p> </p>
  <p>This paragraph is NOT editable</p>

</body>
</html>

Example of data-* attribute:

<!DOCTYPE html>
<html lang='en-us'>
<head></head>
<body>

<h4>Continents by size:</h4>
<ol>
  <li data-cont-type="Asia">Asia</li>
  <li data-cont-type="Africa">Africa</li> 
  <li data-cont-type="North America">North America</li> 
  <li data-cont-type="South America">South America</li> 
  <li data-cont-type="Antartica">Antartica</li>
  <li data-cont-type="Europe">Europe</li>
  <li data-cont-type="Australia">Australia</li>
</ol>

</body>
</html>

Example with hidden attribute:

<!DOCTYPE html>
<html lang='en-us'>
<head></head>
<body>

  <p hidden>This paragraph is hidden</p>
  <p> </p>
  <p>This paragraph is VISIBLE</p>

</body>
</html>

Spellcheck attribute example:

<!DOCTYPE html>
<html lang='en-us'>
<head></head>
<body>

  <p contenteditable="true" spellcheck="true">This paragraph is editable. Try to correct spellling.</p>
  <p> </p>
  <p>This paragraph is NOT editable. Try to correct spellling.</p>

</body>
</html>

›› go to examples ››