Attributes are extra pieces of coding contained in the start tag that give the browser additional information about the respective element.
Attributes contain two parts: the attribute name and the attribute value. An attribute is always in this format: the attribute name, followed by an equal sign, followed by the attribute value which is contained in single or double (either is acceptable) quotation marks. This is shown below:
The value can be almost anything within the scope of the attribute. There are several types of attributes, some requiring specialized formats to be of any use.
But beware: below are incorrect attribute formats that should be avoided. With HTML, you can use the first two under specific circumstances—I'll explain those circumstances in Coding Shortcuts And Other Things—but it is wise and less confusing (to both browser and you) to avoid any such shortcuts. Besides, while HTML will let you get away with it, XHTML won't; these shortcuts result in XML that's not well-formed.
The third one is, arguably, the worst—the quotes don't match, so the attribute doesn't end when it's supposed to. The fourth and fifth just make no sense to the browser, regardless of markup language.
Attributes are always contained in the start tag, after the element name. The order of attributes after that is unimportant.
Below are some examples of paragraph start tags with attributes in the correct places.
Above, the paragraph has a class
attribute called "definition".
Above, the paragraph has a class
attribute called "definition" and an id
attribute called "Definition_Of_Life". Yes, it has two different attributes. This is fine.
You can have only one of each attribute in each start tag, but you can have the same attribute in two different start tags:
Should you so desire, you could even have the two attributes with the same value.
To warn against common errors, I have illustrated a couple here. The following is not fine:
This start tag has two attributes with identical names (in this case, class). This may cause problems with your HTML and will simply cause the browser to display a duplicate attribute
error if it's reading XML.
While a browser might be able to read the above error, few browsers will be able to figure out a start tag where the attribute comes before the tag name:
Here, the paragraph element name comes after the attribute, which means the element name is now class="definition"
and p
becomes an attribute. This won't work at all; to both browser and validator, It's just a ball of confusion
.
There are attributes commonly used in (X)HTML which nicely demonstrate various element types. The types they demonstrate are:
I'll explain them in 2 sections:
There are four attributes known as the core attributes which are used by almost every element in HTML. Their functions vary so widely that they have little in common save their ubiquity. These attributes are:
title
AttributeThe title
attribute contains descriptive text about the element. You often see it in a tooltip (illustrated below in the Usage section).
The title
attribute is a text-type attribute—that is, it contains plain text. The text does not need to be unique, nor does it have to have anything to do with the element it's supposed to describe, though it is good practice to avoid such non sequitors.
Below is an example of how the title attribute works:
And the result is below:
The title
attribute is a perfect example of why you should not omit the quotation marks.
Here, I have omitted the quotation marks and now the browser is confused. Where does the attribute begin and end? Is the browser supposed to read one (title=This is a tooltip
) or four attributes (title=This
, is
, a
, tooltip
)? And what if your intended text had an equal sign in it, which is perfectly legitimate? Omitting quotations in an attribute will only confuse your browser, and I warned you about confusing your browser. By the way, most browsers will read the above title attribute as only containing the word "This".
As one last note, it is also a perfect example of why one needs to be sure to place the element name first: the title
attribute shares its name with the title
element.
class
AttributeThe class
attribute is used to group elements together. You can use the same class
for several elements, and even have an element having two classes (which means it belongs to two different groups). An analogy would be a university: each student may be in many classes, and each class may have many students.
At the risk of getting a little ahead of myself, class
does not have much effect on raw (X)HTML like you're working with now aside from giving yourself a way of knowing what element is used for what, but when it comes to formatting—that is, deciding on how your webpage will look, which is handled by Cascading Style Sheets—the class
attribute is indispensable.
I'll talk about formatting a webpage and Cascading Style Sheets later.
Like the title
attribute, you can enter whatever text you please without breaking the rules set down by the (X)HTML DTDs. Unlike the title
attribute, the class
attribute requires a fairly specific format to be of any use.
Again, if you flout these rules, an (X)HTML validator won't pick up on it, but you need to follow these rules if class
is to be of any use.
In the above example, the first paragraph of the class Core-Class-1
, and the second is of Core-Class-2
. The 3rd paragraph does not have a class, but the strong
element belongs to both classes of elements.
Remember this example from earlier?
This is the proper way to do it:
style
AttributeThe style
attribute is used to change the actual appearance of an element: what font it is in, what colour the text is, the colour of the background, whether or not it is bold, underlining, the size of the text, and so on.
Like the title
and class
attributes, style
can contain whatever text you like. Like the class
attribute, for the style
attribute to be of any use, its contents must adhere to a specific (and, amongst attributes, unique) format.
To avoid confusing you, I'll start with two properties that have the same set of values: color
and background-color
. (The former refers to text colour, the latter is self-explanatory). They have many possible values, but these 16 colours should do just fine for now (colours separated by a slash are exactly the same):
The format of the style
attribute is really quite simple: it contains a list of one or more declarations, each of which consists of a property (like color
) and a value (like red
).
style
AttributeFor example, if you want to set the text colour of a paragraph to blue, all you have to enter is:
If you want to set the background colour of a paragraph to yellow, the attribute would be:
If you want both, they can be used together like this:
The order the declarations are in does not matter as the effect is the same. The effect of either arrangement can be seen below:
Below is a list of some other properties that you can use with the style
attribute:
italic
and oblique
have exactly the same effect.I'll explain the rest of the properties when I explain CSS; this is just a taste of what you can do.
id
AttributeThe id
attribute—short for identity
—is perhaps the most important attribute of all. This type of attribute is used to specify a single element on any given page.
Perhaps you have seen web addresses with a hash mark (#
) and a word after it. That is the most visible use of an ID attribute.
The id
attribute differs sharply from the title
, class
and style
attributes. In the latter three, you may technically enter whatever text you like without causing an error on an (X)HTML validator. Conversely, if you flout the rules of the id
attribute, you will get an error.
The rules governing id
attributes are like that of the class
attribute, but slightly more stringent. The values of each id
attribute must:
The last rule is of particular import: each id
attribute exists to identify one and only one element, regardless of the element name.
id
attribute with no value. If that's what you have, omit the attribute altogether.The two paragraphs have exactly matching ID attributes, which will confuse your browser and cause problems. Remember, no two elements in any single markup document can have the exact same value for an id
attribute. If you want something like the above, using similar but slightly different IDs is acceptable:
The addition of the numbers distinguishes the two elements, satisfying the requirement of unique values for id attributes.
class
And id
One use for these two attributes has nothing to do with coding, but simply keeping track of your document. They can be given names that tell you what each element is for. For example, a paragraph with the class
name of "footnote" and id
of "footnote_1" gives you a very good idea of why you included that paragraph.
I have three questions:
If you're reading this book, it will be most likely in English, which uses the Latin alphabet and is read left-to-right, but I have no way of knowing that. The answers to these questions are handled by attributes that deal with the language of your content. There are two such attributes common to most elements:
lang
AttributeThe lang
(short for language
) attribute is used to specify the language of the contents of a particular element.
This, like the title element, can contain anything you like. However, there is a set of codes for each language that is internationally recognized. That's what you should use here to let your browser know what language you're using. Several language codes are:
Icelandic is the only language listed above that shares the Latin alphabet with English; Russian uses the distantly-related Cyrillic alphabet, and Korean, Hebrew, Bengali, Cherokee, and Chinese uses writing systems that are totally unrelated.
This attribute is normally used in the html
start tag, to specify the entire webpage. However, it can be used in descendant elements of the body
if you're switching between languages within the webpage.
dir
AttributeThe dir
(short for direction
) attribute is used to specify the direction the text is supposed to flow.
In the list of languages above, all can be written from left to right save one: Hebrew, which is written right-to-left, along with other langages such as Arabic and languages written with Hebrew or Arabic scripts. Making sure that a webpage behaves in accordance with the direction it is to be read is the purview of the dir
attribute.
Unlike the previous attributes, the dir
attribute is an enumerated attribute, which means there is a limited list of values one can use for it. The dir
attribute has only two possible values:
Using anything else as a value will raise an error.
The core attributes are hardly the only attributes in (X)HTML, simply the most commonly used. Many of these others come with restrictions on them similar to the ones on the id
attributes. For example:
class
and style
attributes, require their contents to be in a specific format to be of any use.listof only one value, which gives you two choices: take it or leave it.
Booleanmeans having one of only two possible values:
trueor
false. In this case, including the attribute means
true; omitting it means
false. In (X)HTML, the values and names for boolean attributes are identical. For example, the attributes
nohref
and readonly
, which are used in image maps and forms (respectively), would be written nohref="nohref"
and readonly="readonly"
. Their real valuesare their presence or absence.
title
, allow their contents to be simply a string of text.xmlns
AttributeThere is an attribute that XHTML requires that HTML doesn't have: xmlns
(short for XML namespace
). This attribute usually goes in the root element of an XML document (in this case, the html
start tag). The namespace serves as an identifier for an XML language, and almost all XML languages read by browsers have one. Examples are:
This sets the namespace for an XML language, which is a means for the browser to identify which language is being used. Yes, this does mean that the Doctype isn't quite sufficient and can even be done away with—but without a Doctype, good luck validating your markup and you can kiss almost all your character entity references goodbye.
Now that the namespace has been included, browsers can properly read this document if it was .xhtml
, .xht
, or .xml
extension—with only one major exception: Internet Explorer. Only as of version 9 is Internet Explorer able to read XHTML. Saving a document written in XHTML with the .html
or .htm
extension causes the file to be read as HTML, which all versions of Internet Explorer can read. You may remember me talking about the vocabularies of the two markup languages being identical to allow a smooth transition back in An Introduction To (X)HTML. This is what I was talking about.