HTML attributes are name/value pairs that provide metadata about an HTML element. In an HTML tag, the attributes follow the tag name in the opening tag. (Naturally, closing tags do not have attributes.) Each name/value pair is separated by space characters. Names and values are associated using an equals sign, and values should be quoted (double quotes are more common, but single quotes can also be used). HTML is case-agnostic about attribute names, but XHTML demands that they be lower-case, so it is recommended to always use lower-case. Attribute values, on the other hand, are always case-sensitive. For many attributes, their values must be chosen from a standardized set, or the browser won’t understand them.
Here is an example of an
input tag with multiple attributes, and an explanation of what they do:
<input type="text" id="searchform" value="Enter a search term" />
typeattribute determines the type of input field; the
textvalue says it will be a line of text (and not, say, a button).
idattribute gives the tag a unique identifier, which is
searchform. If you try to refer to this tag using the ID
searchForm, it will not be found, since values are case-sensitive.
- In the last attribute,
valueis, confusingly, the name of the attribute; the attribute’s value is
Enter a search term. For a text input field, this is the default input value, which is usually overwritten by the user.
Though attributes are always stored as name/value pairs behind the scenes, some attributes can only have Boolean values (
false). But instead of assigning one of those values, HTML simply assumes a value of
true if the attribute is present at all, and
false if it’s not. With these attributes, the standare recommends that the attribute value should match the attribute name (e.g.
disabled="disabled"). But it doesn’t need to be; any value at all will be considered
true (even the string “false”). In HTML (including HTML5), tags like these can be minimized: only the attribute name is given, and no value is assigned. However, this is not valid XML, so attribute minimization is not supported in XHTML. On the other hand, the non-minimized versions work in all forms of HTML. For that reason, I recommend that you do not use attribute minimization at all.
Each HTML element type will have different kinds of attributes associated with it, since attributes that make sense for one element usually don’t make sense for another. I will give these attributes when we discuss the relevant tags.
- Specifies a category for HTML elements. Many elements can have the same class, even if they are not of the same type. Conversely, the same element can have multiple classes. (An HTML class is not even conceptually the same as a class in object-oriented programming; if you know OOP already, try not get mixed up.)
If an element has multiple classes, they should be separated by space characters in the attribute’s value string. For example, to make a tag be of both the
statusclasses, you would say
class="alert status". Because of this, you cannot have spaces in the name of a class. For historical reasons, it is standard practice to replace spaces with hyphens in class names, and to make all class names lower-case.
Class names, like everything else in HTML, should be semantic:
alertis fine, but
- Identifies a specific HTML element. ID’s must be unique; no two elements can have the same ID, even if they are different types. Like class names, ID’s cannot contain spaces, and should be semantic.
If you want a URL to target an element with a specific ID, then you can use the ID as the URL’s fragment identifier. Let’s say your website is at
http://www.example.com, your HTML file is called
book.html, and you have a tag with the ID of
chapter-three. The URL would be:http://www.example.com/book.html#chapter-three
When the browser goes to this URL, it will load the contents of
book.html, then scroll down to the tag with the ID of
- Specifies the title of an element. This is usually displayed as a tooltip: text that appears when the cursor is moved over the element. It is also used by screen readers, which usually read the title aloud.
- Specifies the text direction. The value must be either
ltr(left-to-right, the default), or
auto(if the text direction isn’t known).
- Specifies the language of the element. The value of the attribute is an ISO Language Code, either a generic language code (“en”) or a region-specific language code (“en-US”).
name(deprecated on most elements)
- This attribute gives a name to the HTML element, which may or may not be unique. The HTML 4.01 standard allowed it on certain elements, but bad designers started using them on everything. The XHTML 1.0 standard deprecated its use with nearly every HTML tag. If the name is unique, use the
idattribute; otherwise, use the
The only exceptions are form tags and the
<meta>tag. I will go over form tags when I cover HTML forms. The
<meta>tag will be discussed in the next section.
- Mouse events: onclick, ondoubleclick, onmouseover, onmouseout, onmouseup
- Key events: onkeydown, onkeypress, onkeyup
- Form events: onblur, onchange, onselect, onsubmit
- Window events: onload, onunload
Style Attributes (Deprecated)
Previous HTML specification allowed many presentational attributes. Some were deprecated in HTML 4.01, and all are deprecated in HTML5. Even before then, they were discouraged. If you want to specify any of these attributes, you should so so using CSS. I’m including them here for information only.
- Where to align the element, relative to the surrounding text. Possible values are
bottom. It could only be used on block-level elements.
- The background color of the element.
- The thickness of the border around the element. It was usually specified in pixels.
- The foreground color of the element. Usually, this meant the text color.
- The style to use on the element. The value could be any string consisting of CSS style information. Obviously, you should put this in a CSS file instead.
Now that you’re familiar with tag syntax, and have a general feel for attributes, we can start to cover the different HTML tags themselves.