Core
Attribute | Description | Possible values |
id | Identifies a unique element. The value of id can be used by CSS or JavaScript to reference that element. Links can also point directly to an element with a specific id . | Text, excluding spaces. The value of the id attribute must be unique. |
class | Used to reference elements, by CSS, for example. Any number of elements can have the same value (unlike id ). | Text. Multiple classes can be applied by separating them with spaces. |
title | Adds additional advisory information to an element. | Text. |
style | Applies inline CSS. | CSS delclarations. |
Example
<style>
.question { color: blue }
#global { color: red }
</style>
<!-- stuff -->
<p class="question"><a href="#global">What are global attributes?</a></p>
<!-- more stuff -->
<p id="global">Attributes that can be used with all <abbr title="HyperText Markup Language">HTML</abbr> tags.</p>
Internationalization
Attribute | Description | Possible values |
lang | The language of text in an element. | Language code (such as en or es ). |
dir | The direction of text in an element. | ltr (left-to-right)rtl (right-to-left)auto
|
translate | If text should be translated when a document is localized. | |
Example
<p dir="ltr" translate="no">Blackadder: <q lang="de">Schnell! Schnell! Kartoffelkopf.</q></p>
User Interaction
Attribute | Description | Possible values |
accesskey | Associates a keyboard shortcut to an element. | Space-separated list of characters. |
tabindex | Explicitly specifies where an element appears in the tab order of the page. | Integer. |
hidden | States that an element is not relevant to the page. Typically used in conjunction with JavaScript to programatically hide or show elements depending on user action. | No value required. |
contenteditable | States if the content of an element is editable by the user or not. | |
spellcheck | Specifies if the spelling of user-inputted text should checked or not. | |
draggable | States if an element is draggable, typically used to facilitate drag and drop. Should always be accompanied by a title attribute as an accessibility consideration. | |
dropzone | Specifies that when something is dragged and dropped onto the element, it should copy the data, move the data to its location, or link to the data. Not widely supported. | |
Example
<ul>
<li><a tabindex="2" accesskey="h" href="here/">Here </a></li>
<li><a tabindex="3" accesskey="t" href="there/">There</a></li>
<li><a tabindex="1" accesskey="b" href="butHereFirst/">But here first</a></li>
<li hidden><a href="notHereThough/">Not here though</a></li>
</ul>
<p contenteditable="true" spellcheck="true">Hey, man, fiddle with my content.</p>
Menus
Attribute | Description | Possible values |
contextmenu | Explicitly assigns a context menu to the element. The value associates the element to a menu element with the corresponding id . Not widely supported. | Text. |
Example
<form>
<label>JG Ballard: <input contextmenu="ballard"></label>
<menu type="popup" id="ballard">
<menuitem label="High Rise">
<menuitem label="Concrete Island">
<menuitem label="The Drowned World">
</menu>
</form>