• Home
  • Sustainable Design
• A Sustainable Web?
  • A Foreign Concept
  • Glossary of Terms
• Design Concept
  • The Importance of Visual Design
  • Design Impact
  • Potential Harm of Good Design
  • Getting Started Designing
• Material Treatment
  • You Are How You Treat
  • Naming Files and Folders
  • Naming for Indexing and Clarity
  • Naming for Versioning
  • Mistreating Your Images: 7 Deadly Sins
• Document Structure (XHTML)
  • The Concept of a Markup Language
  • A Brief History of HTML
  • Basic XHTML Rules
  • XHTML DOCTYPE Declarations
  • XHTML Tag Types: Block and Inline
  • The Basic XHTML Tag Set: Block-level Tags
  • The Basic XHTML Tag Set: List Tags
  • The Basic XHTML Tag Set: In-line Tags
• Advanced Document Structure
  • Working with Classes and IDs
  • Classes in Action
  • IDs in Action
• Document Presentation (CSS)
  • Introduction to Cascading Style Sheets
  • Some CSS Vocabulary
  • CSS Selectors
  • CSS Properties: Text and Font
  • CSS Properties: Margin, Padding, and Border
• CSS for Design and Layout
  • Background Images
  • Image Replacement Techniques
• Introduction to PHP
  • What is PHP?
  • Repeating Content Across Pages

Basic XHTML Rules

As we saw in the last section, one of the major problems with HTML was its mingling of structure with presentation, and competing versions of the language in different Web browsers. Although there is a standard version of HTML set forth by the W3C, XHTML is now the best option for Web markup—in part because of its strict rule set, which basically helps XHTML documents validate as XML documents when the rule set is followed properly (we'll talk more about validation later).

XHTML Tag Components

Just for reference, there are three components to a given tag: the element, which is basically the name of the tag, e.g., p is the paragraph element; attributes (there are few of these remaining in XHTML, although two important ones that we'll deal with later are id and class; and values, which are assigned to attributes.

So, in it's most abstract form, the opening tag would look something like this (and in this example, I've used the words for the different parts; this example would NOT be a valid XHTML tag:
<element attribute="value">.

XHTML Rules in a Nutshell

1. Every XHTML document must begin by declaring a Document Type Definition. We'll look at the three varieties of Document Type Definitions (DTDs) in the next section.
2. Every tag that opens must be closed. When we open a tag, like the paragraph tag <p>, we must eventually close it with the closing tag </p>. Some tags, like the img tag actually open and close themselves, e.g., <img src="myimage.jpg" />. We just add an empty space and then the slash-caret combination.
3. Tags that are nested must be closed in the opposite order they were opened. By "nested" we mean tags that appear inside of each other. Eg, you could have a paragraph of text, with some of that text appearing in the strong (which is usually has the visual effect of bold) tag: <p>This is paragraph text, <strong>and this text is bold</strong>.</p> Paragraph opens, then strong; strong closes, then paragraph closes—correctly. An incorrect nesting might look like this: <p>This is paragraph text, <strong>and this text is bold.</p></strong>
4. All tag elements, attributes, and values must be lower-case letters. This is one of the biggest breaks from HTML, where <P> and <p> were interchangeable. However, XML is case-sensitive, and XHTML is therefore only lower-case.
5. All attribute values must be in quotation marks. This is also a break from HTML, where attribute=value was acceptable. In XHTML, attribute values must appear as attribute="value", with quotation marks around the value.
6. All class and id attributes must begin with a lower-case letter a-z. We'll talk about this in much greater depth in the sections about classes and ids.

Updated on Sun. Feb. 19 2006 at 11:39PM