XHTML Elements Must Be Properly Nested
In HTML, some elements can be improperly nested within each other, like this:
< b >< i >This text is bold and italic< /b >< /i >
In XHTML, all elements must be properly nested within each other, like this:
< b >< i >This text is bold and italic< /i >< /b >
Note: A common mistake with nested lists, is to forget that the inside list must be within < li > and < /li > tags.
This is wrong:
< ul >
< li >Coffee< /li >
< li >Tea
< ul >
< li >Black tea< /li >
< li >Green tea< /li >
< /ul >
< li >Milk< /li >
< /ul >
This is correct:
< ul >
< li >Coffee< /li >
< li >Tea
< ul >
< li >Black tea< /li >
< li >Green tea< /li >
< /ul >
< /li >
< li >Milk< /li >
< /ul >
Notice that we have inserted a < /li > tag after the < /ul > tag in the "correct" code example.
XHTML Elements Must Always Be Closed
Non-empty elements must have a closing tag.
This is wrong:
< p >This is a paragraph
< p >This is another paragraph
This is correct:
< p >This is a paragraph< /p >
< p >This is another paragraph< /p >
Empty Elements Must Also Be Closed
Empty elements must also be closed.
This is wrong:
A break: < br >
A horizontal rule: < hr >
An image: < img src="happy.gif" alt="Happy face" >
This is correct:
A break: < br / >
A horizontal rule: < hr / >
An image: < img src="happy.gif" alt="Happy face" / >
XHTML Elements Must Be In Lower Case
Tag names and attributes must be in lower case.
This is wrong:
< BODY >
< P >This is a paragraph< /P >
< /BODY >
This is correct:
< body >
< p >This is a paragraph< /p >
< /body >
XHTML Documents Must Have One Root Element
All XHTML elements must be nested within the < html > root element. Child elements must be in pairs and correctly nested within their parent element.
The basic document structure is:
< html >
< head > ... < /head >
< body > ... < /body >
< /html >
In HTML, some elements can be improperly nested within each other, like this:
< b >< i >This text is bold and italic< /b >< /i >
In XHTML, all elements must be properly nested within each other, like this:
< b >< i >This text is bold and italic< /i >< /b >
Note: A common mistake with nested lists, is to forget that the inside list must be within < li > and < /li > tags.
This is wrong:
< ul >
< li >Coffee< /li >
< li >Tea
< ul >
< li >Black tea< /li >
< li >Green tea< /li >
< /ul >
< li >Milk< /li >
< /ul >
This is correct:
< ul >
< li >Coffee< /li >
< li >Tea
< ul >
< li >Black tea< /li >
< li >Green tea< /li >
< /ul >
< /li >
< li >Milk< /li >
< /ul >
Notice that we have inserted a < /li > tag after the < /ul > tag in the "correct" code example.
XHTML Elements Must Always Be Closed
Non-empty elements must have a closing tag.
This is wrong:
< p >This is a paragraph
< p >This is another paragraph
This is correct:
< p >This is a paragraph< /p >
< p >This is another paragraph< /p >
Empty Elements Must Also Be Closed
Empty elements must also be closed.
This is wrong:
A break: < br >
A horizontal rule: < hr >
An image: < img src="happy.gif" alt="Happy face" >
This is correct:
A break: < br / >
A horizontal rule: < hr / >
An image: < img src="happy.gif" alt="Happy face" / >
XHTML Elements Must Be In Lower Case
Tag names and attributes must be in lower case.
This is wrong:
< BODY >
< P >This is a paragraph< /P >
< /BODY >
This is correct:
< body >
< p >This is a paragraph< /p >
< /body >
XHTML Documents Must Have One Root Element
All XHTML elements must be nested within the < html > root element. Child elements must be in pairs and correctly nested within their parent element.
The basic document structure is:
< html >
< head > ... < /head >
< body > ... < /body >
< /html >
HTML Vs. XHTML
Both languages come in three flavors: Frameset, Transitional and Strict. The “strict” version is strongly recommended by the W3C for regular documents. Using strict versions removes problematic elements as well as forcing a significant separation between the structure of your document and its presentation. Transitional versions allow deprecated elements to assist those implementers to upgrade smoothly their software or their content.
Using the right tool for the job
Is there any advantage to using HTML 4.01 over XHTML 1.0? There is no simple answer and the benefits you will gain are tied to how you’re using the language in a given situation.
Switching from HTML 4.01 to XHTML 1.0 brings almost no direct benefits for the visitors of your Web site; still, there are several good reasons for Web authors to make the switch:
XHTML is easier to maintain
XML syntax rules are far more rigorous than HTML. As a result, XHTML makes authors work more precisely, having to address issues such as:
* all elements and attribute names must appear in lower case
* all attribute values must be quoted
* non-Empty Elements require a closing tag
* empty elements are terminated using a space and a trailing slash
* no attribute minimization is allowed
* in strict XHTML, all inline elements must be contained in a block element
In HTML, case, quotes, termination of many elements and uncontained elements are allowed and commonplace. The margin for errors in HTML is much broader than in XHTML, where the rules are very clear. As a result, XHTML is easier to author and to maintain, since the structure is more apparent and problem syntax is easier to spot.
XHTML is XSL ready
as you are probably aware by now, XHTML 1.0 is the reformulation of HTML 4.01 in XML. Therefore, XHTML documents are hypertext documents and XML documents. A powerful technology has been developed at W3C to manipulate and transform XML documents: the Extensible Style sheet Language Transformations (XSLT). This technology is tremendously useful to create various new resources automatically from an XHTML document. For example
* You can create a table of contents for a long document
* Get a quick overview of a page by listing its languages and structural outlines! See the Semantics extractor for this page, created by W3C QA Working Group member Dominique Hazaël-Massieux
* You can provide a printable version of your documents by using the XSL-FO features of XSL
* You can produce an RSS feed directly from your page, check out the QA RSS feed to see this in action
XHTML is easier to teach and to learn
The syntax rules defined by XML are far more consistent than those found in HTML and therefore easier to explain than the SGML rules on which HTML is based.
XHTML is ready for the future
When the new version of XHTML becomes a recommendation, XHTML 1.0 documents will be easily upgradable to this new version, to allow to take advantages of its exciting new features. It’s likely that an XSLT style sheet will be available by then to help you move your XHTML 1.0 (strict) documents to XHTML 2.0 documents.
* You can create a table of contents for a long document
* Get a quick overview of a page by listing its languages and structural outlines! See the Semantics extractor for this page, created by W3C QA Working Group member Dominique Hazaël-Massieux
* You can provide a printable version of your documents by using the XSL-FO features of XSL
* You can produce an RSS feed directly from your page, check out the QA RSS feed to see this in action
XHTML is easier to teach and to learn
The syntax rules defined by XML are far more consistent than those found in HTML and therefore easier to explain than the SGML rules on which HTML is based.
XHTML is ready for the future
When the new version of XHTML becomes a recommendation, XHTML 1.0 documents will be easily upgradable to this new version, to allow to take advantages of its exciting new features. It’s likely that an XSLT style sheet will be available by then to help you move your XHTML 1.0 (strict) documents to XHTML 2.0 documents.
No comments:
Post a Comment