February 7, 2012 - Exercise 1 and Exercise 2 are due on February 21 - Final Projects due on May 22, 2012

xHTML Tag Anatomy

xHTML tags often surround the elements they are to effect (headings, paragraphs, lists), link to other files to be used by the page (cascading style sheets, images), or add form elements to collect user data. This general statement covers ≈90% of xHTML tags, it is easier than it seems.

Tag Layout

Tags always start and end with angle brackets or the "less than <" and "greater than >" symbols. The layout looks like this:

Opening Bracket	Tag Name	SPACE	Attribute	Attribute Value	Closing Bracket
<	p		style	="color:red"	>

The code above is a breakdown of the tag I used to make this paragraph have red text. A paragraph with no color styling will have the usual or default text color, often black.

The Tag Name comes right after the opening bracket with no space between the two. Most tag names are easy to remember; however, a good reference book or web site is invaluable for help with the less used ones. In this case, the "p" stands for paragraph.

The SPACE that comes after the tag name is vital. It tells the browser that the tag name has ended and attributes are coming next.

Attributes are characteristics of the tag. In the example above, the style attribute (with its value) specifies to the color of the paragraph text. It is very common to have more than one attribute in a tag.

The Attribute Value gives a numerical or contextual value to the attribute if the attribute needs one. In this case, color:red tells the paragraph to have red text.

Tag Pairs

As we discussed on the HTML skeleton page, it is useful to think of HTML tags as containers. With few exceptions* (<br>,<hr>,<img> and <frame> come to mind), all tags have a closing version to end the effects of the tag. It consists of the opening bracket, a forward slash (/), the tag name and a closing bracket. The closing tag for the font tag dissected above looks like this: </p>. The closing tag has no attributes.

*In XHTML, all tags must be closed. If a tag has no closing pair (break, horizontal rule, image, frame and so on...), it must close itself. This is accomplished by adding a space and a forward slash ( /) before the closing angle bracket (>). Thus, the HTML <br> tag becomes the XHTML <br /> tag, <hr> becomes <hr />, and so forth.

Tag Case

Are xHTML tags case sensitive? Yes... . If you have used the HTML 4 spec before, it allows the use of upper, lower. or mixed case tag and attribute names. xHTML is very similar to HTML but designed to work with XML (Extensible Markup Language), xHTML requires using lower case for tags and attributes.

Attribute Value Quotes

Do all attribute values have to be in quotes? Yes... The previously used HTML 4 spec does not require all values to be in quotes. Just as with tag case, xHTML requires all values to be enclosed in quotes.

Technically, "double primes" or "inch marks" are used to enclose the attribute values, “curly quotes” that are used in print don't work.

Also, all attributes are required to have a value. An example is the noshade attribute for the horizontal rule tag. In HTML, a proper horizontal rule tag could look like: <hr noshade>. The HTML version looks like: <hr noshade="noshade" />.

Jump into the future, go see the HTML5 tag anatomy!