XHTML Tutorial: Standards-Based Web Design

by Paul Bohman

• XHTML Elements (Tags) |
• Your First Web Page

XHTML Attributes

In XHTML, elements can have attributes which give the elements additional qualities. They might give an element its height, or width, or provide some other information about that element. The <img> element provides a good example. If you put only the <img> element in the code, nothing will show up on the web page. The browser has no idea which image to put there. You have to specify which image. The src attribute (short for "source") tells the browser which image to insert. The height and width attributes tell the browser what size to make the image. The alt attribute tells the browser which text to display if images are turned off. The alt attribute is also made available to people using screen readers, as a substitute for the image which they cannot see (because they are blind). A complete <img> element might look like this:

<img src="someimage.jpg" height="350" width="300" alt="Springtime in the Swiss	Alps" />

Here are a few things that you should know about attributes:

• They are inside elements
• They are followed by an equals sign ( = ), then the value of the attribute
• The value of the attribute is enclosed in quotation marks ( " )
• They do not begin or end with "pointy brackets" (the "less than" or "greater than" symbols: < >)
• You can have more than one attribute in a given element
• All of the attributes are separated by spaces (they don't run into each other)
• The order of the elements doesn't matter

With regard to the last point, we could rearrange the attributes in any order, and the browser would render the image the same way. All of the examples below are correct, and identical in the way they are rendered:

<img src="someimage.jpg" height="350" width="300" alt="Springtime in the Swiss Alps" />

<img height="350" width="300" alt="Springtime in the Swiss Alps" src="someimage.jpg" />
	
<img height="350" alt="Springtime in the Swiss Alps" src="someimage.jpg" width="300" />

Attributes Aren't Elements (or "Tags")

Even though elements (or "tags") must be opened and closed, you don't need to open and close attributes, unless you count the quotation marks around them (alt="products"). There is no such thing as a "src tag" or an "alt tag," even though you may hear some people refer to them that way. They aren't tags. They are attributes. Attributes can't survive on their own. They must be contained within an element/tag in order to mean anything.

Mistakes to Avoid

1. Make sure you put a space between the element and its attribrutes.

In the incorrect example, someone has in effect invented a new element/tag called "imgsrc". Browsers won't know what to do with the strange new element. They'll probably ignore it, and it won't work the way you wanted it to.

2. Don't forget the quotation marks.

3. Don't use attributes by themselves. They must be inside elements.