Tags and Attribute Names Must Be Written In Lower Case
Since XML is case-sensitive, XHTML element and attribute names must be written
in lowercase. You can no longer get away with mixing uppercase and lowercase
tags and attribute names. Attribute my="values-Values" can be any
case you want.
| HTML | XHTML |
|---|---|
| <TD BGCOLOR="#ffcc33"> | <td bgcolor="#ffcc33"> |
Elements Must Be Nested Properly - No Overlapping
Most browsers don't care if you overlap your tag elements. For example, <p><strong>
whatever </p></strong>. With XML and XHTML, you need to be sure
and nest all of your tag elements properly.
| HTML | XHTML |
|---|---|
| <p>Be <b>bold!</p></b> | <p>Be <b>bold!</b></p> |
All Non-Empty Elements Must Be Closed
All tag elements must be properly closed, explicitly or implicitly.
You can no longer get away with using just a <p> tag alone without properly
closing the end of the paragraph </p>. This means that all tags designed
to mark the beginning and end of content must include the closing tag.
| HTML | XHTML |
|---|---|
| First paragraph<p> Second paragraph<p> |
<p>First paragraph</p> <p>Second paragraph</p> |
Empty Elements Must Be Terminated <br />
Empty elements are those (without closing) tags that contain no content. This
simply means that all empty elements is XHTML must use the XML "empty
tag" syntax, which is a trailing forward slash ("/") before
the end bracket (eg. <br> break <br />). Note there is a space
after the element text />.
| HTML | XHTML |
|---|---|
| <hr> | <hr /> |
| <br> | <br /> |
| <input ...> | <input /> |
| <img src="valid.gif"> | <img src="valid.gif" /> |
| <param ...> | <param /> |
Attribute values must be quoted
No more getting away with unquoted attributes <img ... border=0>.
You now need to quote every attribute, even if it's numeric using either single='quotes'
or double="quotes".
| HTML | XHTML |
|---|---|
| <img ... border=0> | <img ... border="0" /> |
Attribute Value Pairs Cannot Be Minimized
An attribute is minimized when there is only one possible value.
XML does not allow attribute minimization. Stand-alone attributes must be
expanded. For example: <td nowrap>text</td> would become <td
nowrap="nowrap">text</td>.
| HTML | XHTML |
|---|---|
| <dl compact> | <dl compact="compact"> |
| <ul compact> | <ul compact="compact"> |
| <option ... selected> | <option ... selected="selected"> |
| <td nowrap> text </td> | <td nowrap="nowrap"> text </td> |
| <input type="radio" ... checked> | <input type="radio" ... checked="checked" /> |
| <input type="checkbox" ... checked> | <input type="checkbox" ... checked="checked" /> |
<script> and <style> elements
In XHTML, the script and style elements are declared as having #PCDATA
content. As a result, < and & will be treated as the start of markup,
and entities such as < and & will be recognized as entity references
by the XML processor to < and & respectively. Wrapping the content
of the script or style element within a CDATA marked section avoids the expansion
of these entities. The only delimiter that is recognized in a CDATA is the
"]]>" string which ends the CDATA section.
| XHTML |
|---|
| <script language="JavaScript type="text/javascript"> <![CDATA[ document.write("<b>Hello World!</b>"); ]]> </script> |
If your browser recognised the CDATA, when using the script above you should see "Hello World!" in bold.
You can avoid using CDATA by using <script language="JavaScript" src="myscript.js"></script> to read your script code off the server, or by using <link href="mystylesheet.css" /> to load an external CSS file. This only applies when you're putting code inside these files.