HTML is built using elements. Each of these elements will have attributes. The attributes can change how the browser renders the element, configures it, and the behavior involving the element.
The focus of the chapter will be entirely on attributes. If you are unsure about which attributes apply to which elements, the previous chapter goes over almost all the elements and the attributes that apply to them.
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.
The accesskey
attribute creates a keyboard shortcut to activate or focus on the element:
<element accesskey></element>
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 often used to help group similar elements for CSS selectors:
<element class></element>
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 sets the element's content as editable:
<element contenteditable></element>
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>
The data-*
attribute is the custom attribute for elements:
<element data-*></-></element>
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 defines the text direction:
<element dir></element>
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 defines whether the element is draggable:
<element draggable-></element>
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 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 lang
attribute defines the language used in the element:
<element lang></element>
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 style
attribute is used to set the inline style:
<element style></element>
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 sets the tab order:
<element tabindex></element>
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" />
18.118.37.154