Attributes

Attributes are extra pieces of coding contained in the start tag that give the browser additional information about the respective element.

Anatomy of an Attribute

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:

Correct Attribute Formats
name="value"
name='value'

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.

Incorrect Attribute Formats
name=value
name
name='value"
name "value"
"value"

Where To Put An Attribute

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.

A Start Tag With An Attribute
<p class="definition">

Above, the paragraph has a class attribute called "definition".

A Start Tag With Two Different Attributes
<p class="definition" id="HTML-Attributes-Definition_Of_Life">

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:

Two Elements With One Instance Of The Same Attribute Each
<p class="definition">
<p class="large_text">

Should you so desire, you could even have the two attributes with the same value.

What To Avoid

To warn against common errors, I have illustrated a couple here. The following is not fine:

Element With Two Instances Of The Same Attribute
<p class="definition" class="large_text">

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:

Element With Attribute Before Element Name
<class="definition" p>

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.

Common Attributes

There are attributes commonly used in (X)HTML which nicely demonstrate various element types. The types they demonstrate are:

Identity
These attributes identify a specific element.
Text
These attributes contain text related to the element. With some, the text may need to be in a specialized format to have any effect.
Specialized Text
Technically, these can contain whatever text you like and an (X)HTML validator won't raise an error. However, for the attribute to do what it's supposed to, the text has to be in a specific format.
Enumerated
These attributes have a predefined list of values.

I'll explain them in 2 sections:

Core Attributes.
The core attributes are a group of four attributes with little in common with each other save for the fact that they can be used in almost any element.
The Language Attributes
Not all webpages are in English, and these attributes allow the browser to know what language the page is written in and how to handle it.

The Core Attributes

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:

The title Attribute

The title attribute contains descriptive text about the element. You often see it in a tooltip (illustrated below in the Usage section).

Usage

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:

The Title Attribute
<p title="This is a tooltip">This paragraph has a <em>title</em> attribute, the contents of which show up in a tooltip.</p>

And the result is below:

A paragraph that has a title attribute; the contents show up in a tooltip

The title attribute is a perfect example of why you should not omit the quotation marks.

A Title Attribute Omitting The Quotation Marks
<p title=This is a tooltip>This paragraph has a <em>title</em> attribute, the contents of which show up in a tooltip.</p>

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.

The class Attribute

The 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.

Usage

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.

Rules of Class Names.
  • Class names may only contain hyphens, underscores, letters, and numbers.
  • Class names may not start with a number.
  • If an element belongs to multiple classes, the class names are separated by spaces.

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.

Elements With Class Attributes
<p class="Core-Class-1">This paragraph has the class attribute. The class (or group) is Core-Class-1.</p>
<p class="Core-Class-2">This paragraph also has a class attribute, but the class in this case is Core-Class-2.</p>
<p>This paragraph does not have a class attribute (and so does not belong to any class)<strong class="Core-Class-1 Core-Class-2"> but this strong element does, and it belongs to both Core-Class-1 and Core-Class-2.</strong> You don't need to restrict classes to one type of element.</p>

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?

An Element With Two Instances Of The Same Attribute
<p class="definition" class="large_text">

This is the proper way to do it:

A paragraph with two classes.
<p class="definition large_text">

The style Attribute

The 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.

Usage

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):

  • Aqua/Cyan
  • Black
  • Blue
  • Fuchsia/Magenta
  • Gray/Grey
  • Green
  • Lime
  • Maroon
  • Navy
  • Olive
  • Purple
  • Red
  • Silver
  • Teal
  • White
  • Yellow

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).

Example Declaration For A style Attribute
property:value;
property
The aspect of the element you want to control (for example, text colour or background).
:
Separates the property and the value.
value
What you want that property to be (for example, what colour you want the text or background).
;
Ends the declaration, which allows you to add more declarations as necessary.

For example, if you want to set the text colour of a paragraph to blue, all you have to enter is:

Paragraph With Blue Text
<p style="color:blue;">This paragraph has blue text.</p>

If you want to set the background colour of a paragraph to yellow, the attribute would be:

Paragraph With Yellow Background
<p style="background-color:yellow;">This paragraph has a yellow background.</p>

If you want both, they can be used together like this:

Two Paragraphs With Yellow Background And Blue Text Colour
<p style="color:blue; background-color:yellow;">This paragraph has a yellow background and blue text.</p>
<p style="background-color:yellow; color:blue;">This paragraph has a yellow background and blue text.</p>

The order the declarations are in does not matter as the effect is the same. The effect of either arrangement can be seen below:

A paragraph styled with a yellow background and blue text

Below is a list of some other properties that you can use with the style attribute:

text-decoration
This controls whether the text is underlined, struck through, has a line over it, is blinking, or any combination thereof. The keywords are:
  • underline
  • overline
  • line-through
  • blink
  • none
The last is often used when someone doesn't want a hyperlink underlined.
font-weight
This controls how heavy the font is, but for the most part, that's limited to whether or not it's in bold. The most commonly used keywords are:
  • bold
  • normal
font-size
This can set the size of a font, whether in points, which is 1/72 of an inch, percentage of the text around it, centimeters, or some other value.
font-style
This sets whether a font is in italics or not. Its keywords are:
  • italic
  • oblique
  • normal
The values italic and oblique have exactly the same effect.
font-variant
This allows you to have lower-case letters show as small capital letters. Its keywords are:
  • small-caps
  • normal

I'll explain the rest of the properties when I explain CSS; this is just a taste of what you can do.

The id Attribute

The 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.

Usage

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.

Rules of ID Names

The rules governing id attributes are like that of the class attribute, but slightly more stringent. The values of each id attribute must:

  • contain only letters, numbers, hyphens, underscores, periods, and colons.
  • start with a letter
  • must not contain spaces
  • be unique within that document

The last rule is of particular import: each id attribute exists to identify one and only one element, regardless of the element name.

Valid ID Values
  • id="tooltip"
  • id="tooltip1"
  • id="tooltip.2"
  • id="meaning_of_life"
  • id="meaning_of_life:definition"
  • id="Top"
  • id="Bottom"
  • id="Header-1"
Invalid ID Values And The Reasons
id="1tooltip"
The above starts with a number.
id="tooltip 2"
The above has a space before the "2".
id="_meaning_of_life"
The above starts with an underscore.
id="meaning_of_life@definition"
The above uses the "@" character.
id="Top Left"
The above one has a space, as this was an attempt to give an element TWO IDs, which is not allowed.
id="-Bottom"
The above starts with a hyphen.
id=""
You may not have an id attribute with no value. If that's what you have, omit the attribute altogether.

ID Examples

A Paragraph With An ID Attribute
<p id="HTML-Attributes-opening_paragraph">This would be the first paragraph in something like an essay.</p>
Two Paragraphs With Matching ID Attributes, Which Is Incorrect
<p id="HTML-Attributes-opening_paragraph">This would be the first paragraph in something like an essay.</p>
<p id="HTML-Attributes-opening_paragraph">This paragraph continues the preceeding paragraph.</p>

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:

Two Paragraphs With ID Attributes Differing By One Character, Which Is Acceptable
<p id="HTML-Attributes-opening_paragraph_1"> This would be the first paragraph in something like an essay.</p>
<p id="HTML-Attributes-opening_paragraph_2"> This paragraph continues the preceeding paragraph.</p>

The addition of the numbers distinguishes the two elements, satisfying the requirement of unique values for id attributes.

A Final Note on 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.

Language Attributes

I have three questions:

  1. What language is your webpage in?
  2. What alphabet are you using? For that matter, is the writing system you're using an alphabet?
  3. Is it to be read from left-to-right or right-to-left?

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:

The lang Attribute

The lang (short for language) attribute is used to specify the language of the contents of a particular element.

Usage

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:

Various language codes.

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.

The dir Attribute

The dir (short for direction) attribute is used to specify the direction the text is supposed to flow.

Usage

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:

ltr
Left-To-Right
rtl
Right-To-Left

Using anything else as a value will raise an error.

Sample Languages
Demonstration of language directions
Left-to-Right scripts
  1. Russian
  2. Korean
  3. Bengali
  4. Cherokee
  5. Chinese
Right-To-Left scripts
  1. Hebrew
  2. Arabic
  3. Syriac

They're still working on vertically written languages such as Mongolian.

Other Attributes

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:

The xmlns Attribute

There 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:

MathML
http://www.w3.org/1998/Math/MathML
SMIL
http://www.w3.org/TR/REC-smil
SVG
http://www.w3.org/2000/svg
XHTML
http://www.w3.org/1999/xhtml

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.

Your First Webpage As An XHTML Document
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World</h1>
<p><strong>Welcome!</strong> This is my <em>first</em> webpage!</p>
<p>It's a fairly simple webpage, but it <em>is</em> a complete webpage.</p>
</body>
</html>

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.