After my Web Technologist Certification, This notes provides an overview of what the differences are between HTML and XHTML. Although this notes might seem to have been introduced before its time, the concept here is to get a general idea of what has changed from HTML 4 to XHTML 1.0.This notes will also set ground rules for scripting your hypertext documents, ensuring your Web pages are compatible with the most popular Web browsers used today."Why XHTML over HTML?
HTML (HyperText Markup Language) has been the lingua franca of the World Wide Web since 1990. It has gone through several revisions, and is now at the final version 4.01. XHTML picks up where HTML 4.01 left off and promises a more well-formed language for Web authors to use. XHTML is considered an XML application.
HTML will not go through another revision, except as an application of XML (i.e., XHTML). HTML has been successful, but HTML is no longer suitable as a basis for the deployment of commercial Web-based applications on the Internet and over intranets. It is expected that XHTML will be of interest to all Web developers, now that it's a W3C recommendation.
Why Would You Want To Use XHTML?
The usual reason for upgrading to a new language version is to take advantage of all the new features the previous version lacked. As well as to eliminate some properties of the language that do not work well. There is improved functionality in the XHTML technology. You will find, though, that XHTML is almost an exact copy of HTML 4. So do not expect any new tags, just improvement in the language structure itself.
More Reasons: Extensibility and Portability
Extensibility is the issue now. XML documents are required to be well formed (elements nested properly, syntax improved). Under HTML, the addition of a new group of elements requires alteration of the entire DTD (Document Type Definition. In an XML-based DTD, all that is required is that the new set of elements be internally consistent and well formed to be added to an existing While HTML isn't completely lacking, those attributes, with HTML, it can be hard to make your pages work on a wide range of browsers and platforms due to careless HTML scripting and use of unsupported HTML code, like browser-specific tags. XHTML will help to remedy those problems and force developers with comply to a stricter, cleaner way of scripting their Web documents.
The Main Differences Between HTML and XHTML are Rules
There are certain rules you must follow when scripting XHTML. Unlike HTML, XHTML is not as forgiving in terms of syntax.
Tags and Attributes Must Be Lowercase
Is because XHTML documents are XML applications. And XML is case-sensitive, tags like <p> <P> are interpreted as different tags. All XHTML tags must be lowercase. However, the values of tag attributes (text or number's contained within parentheses after an attribute) can be uppercase or lowercase case, for example: <p align="RiGhT">
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>This is correct:
<body>
<p>This is a paragraph</p>
</body>All XHTML Elements Must Be Closed
This includes empty elements; every tag must have an end tag.
This is wrong:
<p>This is a paragraph
This is correct:
<p>This is a paragraph</p>
This is wrong:
This is a break<br>
Here comes a horizontal rule: <hr>This is correct:
This is a break<br />
Here comes a horizontal rule:<hr />To make your XHTML compatible with today's browsers, you should add an extra space before the backslash symbol, like this: <br /> and this <hr />.
Why didn't the they just add a closing tag to empty elements like this: <br></br>? Because empty elements were not designed to contain anything. The <br> tag in HTML 4 forces a line break. A line break doesn't contain anything; it does something instead, forces a line break. Therefore, using an ending tag for an empty element doesn't make sense, hence the format <br />.
Attribute Values Must Be Quoted
Originally in HTML 2.0, coders would place quotes around an attribute value (e.g., width="100%"). It wasn't until HTML 3.2 that Web authors got a little more 'loose' with coding HTML, and often the attribute values went without quotes (e.g., width=100%). In XHTML, quotes are required.
This is wrong:
<table rows=3>
This is correct:
<table rows="3">
Attribute Minimization Is Forbidden
This is wrong:
<input checked>
<option selected>This is correct:
<input checked="checked" />
<option selected="selected"></option>Noticed that in the "wrong" example above, the <option> tag is treated as an empty element. However, it's not an empty element. The <option> tag is actually a container tag. In HTML 3.2, some tags that were containers could be used as empty elements, such as the popular use of only the 'on' <p> tag. In XHTML, these elements are strictly treated as containers. Since the <option> tag is not really an empty element (because it contains an option), the </option> tag is required.
The Id Attribute Replaces the Name Attribute
HTML 4.0 defined the name attribute for the elements <a>, <applet>, <frame>, <iframe>, <img>, and <map>. In XHTML, the name attribute is deprecated. Use id instead.
This is wrong:
<img src="picture.gif" name="picture1" />
This is correct:
<img src="picture.gif" id="picture1" />
To make your XHTML compatible with today's browsers, you should add an extra space before the backslash symbol like this: <img src="picture.gif" id="picture1" />. The <img> tag is handled as a empty element.
Script and Style Elements
In XHTML, characters like < and & are treated as a part of the markup. To avoid this inside scripts or other elements, wrap the content with a CDATA definition, like this:
<script> <![CDATA[ ... script content ... ]]></script>
This bit of information is vital when using additional scripts other than XHTML, such as JavaScript.
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>
Documents Must Be Well Formed
All XHTML elements must be nested within the <html> root element. All other elements can have sub elements (children). Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>XHTML Documents Must Have Some Mandatory Elements
All XHTML documents must have a <!doctype> declaration, the HTML tag must have a namespace declaration, the head and body elements must be present, and the title must be present in the head element.
The XHTML document must consist of these three main parts: The <!doctype>, the <head> and the <body>. These parts must be defined. The basic document structure is:
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>This is a simple XHTML document:
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1">
<head>
<title></title>
</head>
<body>
<p>Hello world! </p>
</body>
</html>The <!DOCTYPE> definition specifies the document type:
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
The <html> tag specifies the start of the document and the XML namespace:
<html xmlns="http://www.w3.org/TR/xhtml1">
The rest of the document looks like HTML:
<head>
<title></title>
</head>
<body>
<p></p>
</body>
</html>Page Validation
Before your Web page can be declared a XHTML document, you must validate your code first. HTML does not have to be validated. You can do this using the W3C?s XHTML Validator at http://validator.w3.org/. .
You can also use Dave Raggett's HTML TIDY, which is a free utility for cleaning up HTML code. It also works great on the hard-to-read markup generated by specialized HTML editors and conversion tools, and it can help you identify where you need to pay further attention on making your pages more accessible to people with disabilities.
Understanding Change
One of the most exciting, yet frustrating aspects of Web authoring is the dynamics of the Web. Web technology is constantly changing. This means Web designers will have to keep up with these changes by learning new language versions. Discover new technologies for application development. Understand server-side updates. And comply with general design techniques.
color="#000000"> The good news is that you have some time to kill when it comes to updating to XHTML. Converting HTML 4 pages over to XHTML pages is not as complicated as it seems, provided that the pages coded in HTML 4 were well formed and cleanly coded to begin with. Maybe this CD-ROM contains the first material you have read in your quest to learn how to create Web pages. That's even better; you don't have old habits to break from HTML 4.
XHTML: Is it HTML 5?
color="#000000"> XHTML is not HTML 5. Remember, there is no longer a new standard for HTML. XHTML has taken over the standard and will evolve further in XML. Because there are more nondesktop applications accessing the Web, XHTML and XML applications are needed due to support issues. Therefore, it was determined that there was no need to set a new revision in HTML.
Although XHTML is now the standard for the Web, you can expect HTML 4 to still be supported in Web browsers for some time. But you should consider converting your Web pages to XHTML 1.0 as soon as you can to ensure more compatibility with your Web pages.
Summary
HTML is now the current Web standard.
XHTML is HTML 4.01, restricted in terms of its structure.
You must validate your XHTML document to declare it as an XHTML document.
XHTML is not HTML 5.