Attributes

Core Attributes
These attributes include general information about the element and can be validly included
in the opening tag of almost any element:
• class: Indicates the class or classes to which a particular element belongs. Elements
that belong to the same class may share aspects of their presentation, and classifying
elements can also be useful in client-side scripting. A class name can be practically
any text you like but can be made up only of letters, numbers, hyphens (-), and
underscores (_); other punctuation or special characters aren’t allowed in a class
attribute. Any number of elements may belong to the same class. Furthermore, a
single element may belong to more than one class, with multiple class names separated
by spaces in the attribute value.
• id: Specifies a unique identifier for an element. An ID can be almost any short text
label, but it must be unique within a single document; more than one element
cannot share the same identifier. The id attribute cannot contain any punctuation
or special characters besides hyphens (-) and underscores (_). The first character in
an ID must be a letter; it cannot begin with a numeral or any other character.
• style: Specifies CSS properties for the element. This is known as inline styling,
which you’ll learn more about later in this chapter. Although the style attribute
is valid with most elements, it should almost always be avoided because it mixes
presentation with your content.
• title: Supplies a text title for the element. Many graphical browsers display the
value of a title attribute in a “tooltip,” a small, floating window displayed when the
user’s cursor lingers over the rendered element.

Focus Attributes:
When some elements—especially links and form controls—are in a preactive state, they
are said to have focus because the browser’s “attention” is concentrated on that element,
ready to activate it. You can apply these focus attributes to some elements to enhance
accessibility for people using a keyboard to navigate your web pages:
• accesskey: Assigns a keyboard shortcut to an element for easier and quicker access
through keyboard navigation. The value of this attribute is the character corresponding
to the access key. The exact keystroke combination needed to activate an access key
varies between browsers and operating systems.
• tabindex: Specifies the element’s position in the tabbing order when the Tab key is
used to cycle through links and form controls.

Internationalization Attributes
Internationalization attributes contain information about the natural language in which
an element’s contents are written (such as English, French, Latin, and so on). They can be
included in almost any element, especially those that contain text in a language different
from the rest of the document’s content.
• dir: Sets the direction in which the text should be read, as specified by a value of ltr
(left to right) or rtl (right to left). This attribute usually isn’t needed, since a language’s
direction should be inferred from the lang and xml:lang attributes.
• lang: Specifies the language in which the enclosed content is written. Languages are
indicated by an abbreviated language code such as en for English, es for Spanish
(Español), jp for Japanese, and so on. You can find a listing of the most common
language codes at this link.
• xml:lang: Also specifies the language in which the enclosed content is written. This
is the XML format for the lang attribute, as it should be used in XML documents.
XHTML documents are both XML and HTML (depending on how the server delivers
them), so both the lang and xml:lang attributes may be applied to an element, both
with the same language code as their value.