Home >> FAQs/Tutorials >> XHTML Tutorials and Tips >> Index

XHTML Tutorials - Introduction To Tag and Attribute Syntax

By: FYICenter.com

Part:   1  2  3   4 

(Continued from previous part...)

What Is an XHTML Element Attribute?

An element attribute is a predefined property about this element. Element attributes allows you to provide additional information to the element. Most XHTML elements have some common attributes. But many XHTML elements have their own specific attributes.

Here are some good examples of element attributes:

• <br/> - No attribute.
• <script type="text/javascript"> - One attribute: "type".
• <p class="sideNote"> - One attribute: "class".
• <meta name="Author" content="FYICenter.com"/> - Two attributes: "name" and "content".
• <img src="fyi.gif" alt="FYI"/> - Two attributes: "src" and "alt".

How To Write Element Attributes Properly?

If an attribute is allowed for an XHTML element, you must write the attribute inside the opening tag of this element. Here are some rules on writing element attributes:

• An attribute must have a name and a value, separated by the equal sign "=".
• An attribute name must be written in lower case letter.
• An attribute value must be enclosed in a pair of quotes.
• Multiple attributes can be written in any order.
• Some attributes must use predefined values.

Here are some good examples of element attributes:

• <td colspan="2"> - One attributes: "colspan".
• <input type="text" name="Phone"> - Two attributes: "type" and "name".
• <link rel="stylesheet" type="text/css" href="_local.css"/> - Three attributes: "rel", "type" and "href".

Is Attribute Name Case Sensitive?

Yes, attribute names are case sensitive. You must write all attribute names in lower case letters.

Here are some valid and invalid attribute names:

• <a href="http://dev.fyicenter.com"> - Valid attribute name.
• <a HREF="http://dev.fyicenter.com"> - Invalid attribute name, must use lower case letters.
• <script Type="text/javascript"> - Invalid attribute name, must use lower case letters.

Note to HTML document authors: HTML element attribute names are not case sensitive. But XHTML element attribute names are case sensitive. If you are converting existing HTML documents to XHTML documents, you will get a lots of syntax errors about upper case letters used in HTML attributes.

How To Quote Element Attribute Values Properly?

You know that attribute values must be quoted. But how to attribute values properly? Here are some basic rules you should remember:

• An attribute value must be quoted.
• An attribute value can be quoted with double quotes as "...".
• An attribute value can be quoted with single quotes as '...'.
• If double quotes appear in an attribute value, you should use single quotes to quote the value.
• If single quotes appear in an attribute value, you should use double quotes to quote the value.
• If both double quotes and single quotes appear in an attribute value, you should replace those quotes with entities: &quot; and &apos.
• If an ampersand sign "&" appears in an attribute value, you must replace it with entity: &amp;.

Here are some interesting examples of quoted attribute values:

• <img src=fyi.gif alt=FYI/> - Invalid, values must be quoted.
• <img src="fyi.gif" alt="FYI"/> - Valid, quoted with double quotes.
• <img src='fyi.gif' alt='FYI'/> - Valid, quoted with double quotes.
• <img src="fyi.gif" alt="FYIcenter.com's Home"/> - Valid, single quote in double quotes.
• <img src="fyi.gif" alt='FYIcenter.com's Home'/> - Invalid, single quote in single quotes.
• <img src="fyi.gif" alt='FYIcenter.com&apos;s Home'/> - Valid, entity in single quotes.

(Continued on next part...)

Part:   1  2  3   4