Global attributes

These are attributes that are available for every HTML element. However, you should note that just because the attribute is available, it does not mean that it will actually do anything.

accesskey

The accesskey attribute creates a keyboard shortcut to activate or focus on the element:

<element accesskey></element>

Description

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"/>

class

The class attribute is often used to help group similar elements for CSS selectors:

<element class></element>

Description

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"/>

contenteditable

The contenteditable attribute sets the element's content as editable:

<element contenteditable></element>

Description

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 p element:

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

data-*

The data-* attribute is the custom attribute for elements:

<element data-*></-></element>

Description

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>

dir

The dir attribute defines the text direction:

<element dir></element>

Description

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

• auto: This lets the browser choose the direction automatically
• ltr: This lets the browser choose the left to right direction
• rtl: The browser chooses the right to left direction

Here is an example for the ltr and rtl attributes.

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

draggable

The draggable attribute defines whether the element is draggable:

<element draggable-></element>

Description

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:

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

hidden

The hidden attribute prevents the rendering of the element:

<element hidden></element>

Description

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:

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

id

The id attribute is a unique identifier of the element:

<element id></element>

Description

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 p element:

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

lang

The lang attribute defines the language used in the element:

<element lang></element>

Description

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:

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

spellcheck

The spellcheck attribute specifies whether spell check can be used:

<element spellcheck></element>

Description

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>

style

The style attribute is used to set the inline style:

<element style></element>

Description

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:

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

tabindex

The tabindex attribute sets the tab order:

<element tabindex></element>

Description

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" />

title

The title attribute is the text for a tooltip:

<element title></element>

Description

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>