What Is XHTML?
- XHTML stands for EXtensible HyperText Markup Language
- XHTML is almost identical to HTML 4.01
- XHTML is a stricter and cleaner version of HTML
- XHTML is HTML defined as an XML application
- XHTML is a W3C Recommendation of January 2000.
- XHTML is supported by all major browsers.
Why XHTML?
Many pages on the internet contain "bad" HTML.
The following HTML code will work just fine if you view it in a browser (even if it does NOT follow the HTML rules):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
XHTML is HTML 4.01 redesigned as XML.
XML is a markup language where documents must be marked up correctly and "well-formed".
If you want to study XML, Read our XML tutorial.
Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language.
Therefore - by combining the strengths of HTML and XML, XHTML was developed.
The Most Important Differences from HTML:
- XHTML elements must be properly nested
- XHTML elements must always be closed
- XHTML elements must be in lowercase
- XHTML documents must have one root element
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>
<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>
<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
<p>This is another paragraph
This is correct:
<p>This is a paragraph</p>
<p>This is another 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">
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" />
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>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</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>
<head> ... </head>
<body> ... </body>
</html>
No comments:
Post a Comment