The accesskey attribute allows you to create a keyboard shortcut. This can be a space-delimited list of characters. Most browsers on Windows will use Alt + accesskey and most browsers on Mac use Ctrl + Option + accesskey.

Here is an example using a textbox that can be focused on with the character q:

<input type="search" name="q" accesskey="q"/>

The class attribute is one of the most used attributes. The class attribute allows CSS to target multiple elements and apply a style to them. In addition to this, many people also use the class attribute to help target elements in JavaScript.

Class takes a space-delimited list of class names.

Here is an example that applies the search-box class to an element:

<input type="search" name="q" class="search-box"/>

The contenteditable attribute tells the browser that the user can edit the content in the element. The contenteditable attribute should have a value of true or false, where true means that the element is editable.

Here is an example with a div element:

<div contenteditable="true">Click here and edit this sentence!</div>

You can name the data attribute whatever you want as long as the name does not start with XML, does not use any semicolons, and does not have any uppercase letters. The value can be anything.

Here is a list of items with the data-id attributes. Note that the attribute name data-id is arbitrary. You can use any valid name here:

<li data-id="1">First Row</li>
<li data-id="2">Second Row</li>
<li data-id="3">Third Row</li>

The dir attribute is the direction attribute. It specifies the text direction. The following are its possible values:

Here is an example for the ltr and rtl attributes.

<div dir="ltr">Left to Right</div>
<div dir="rtl">Right to Left</div>

The draggable attribute allows the element to be dragged around. Note that most elements require JavaScript as well for this to work fully:

Here is an example:

<div draggable="true">You can drag me.</div>

The hidden attribute prevents the rendering of the element:

<element hidden></element>

The hidden attribute is used to hide elements. However, a hidden element can be overridden and displayed through CSS or JavaScript. This is a Boolean attribute so including this attribute sets the value to true and excluding it sets the value to false.

Here is an example:

<div hidden>This should not show</div>

The id attribute is a unique identifier of the element. This is used for fragment linking and easily accessing the element in JavaScript and CSS.

Here is an example using a div element:

<div id="the-first-div">This is the first div.</div>

The lang attribute sets the language for the element. The acceptable value should be a BCP47 language. There are too many to list here, but you can read the standard at http://www.ietf.org/rfc/bcp/bcp47.txt. The language is important for things such as screen readers to use correct pronunciation.

Here is a simple example using English:

<div lang="en">The language of this element is English.</div>

The spellcheck attribute was introduced in HTML5. It will tell the browser whether to spellcheck this element or not. The value should either be true or false.

Here is an example using textarea:

<textarea spellcheck="false">Moste fo teh worsd r mispeld.</textarea>

You can add CSS styles directly to an element with the style attribute. Any style rule that you can use in CSS, you can use here. Remember that this will take precedence over any other styles defined in CSS.

Here is an example that sets the background to red and text to white:

<div style="background: #ff0000; color: #ffffff">This has inline styles.</div>

The tabindex attribute element defines the order in which elements will focus when the Tab key is used. There are three different types of values you can use. The first is a negative number. This defines that it is not in the list of elements for tab order. A zero value means that the browser should determine the order of this element. This is usually the order in which the elements occur in the document. This is a positive number and it will set the tab order.

The following example demonstrates that you can set tabindex in a different order to where the elements are in the document:

<input type="text" tabindex="1" />
<input type="text" tabindex="3" />
<input type="text" tabindex="2" />

The title attribute gives extra information about the element. Usually, the title is shown as a tooltip for the element. For example, when using an image, this could be the name of the image or a photo credit:

<p title="Some extra information.">This is a paragraph of text.</p>