Author Topic: XHTML compatibility (Read 11353 times)

datahell · « **on:** January 07, 2008, 08:57:50 »

This post is a practical guide on what you should take care about in order your applications to be valid XHTML.
Elxis DocType is: XHTML 1.0 Transitional meaning that Elxis pages are html pages having elements terminated as those in xml files.

The proper declarations for XHTML 1 transitional documents are described in this file:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
which is always declared in Elxis CMS headers.
Download this document, open it with a text editor such as notepad and study it!

1. For tags that do not have a closing pair you should terminate them like you do in XML files
So instead of using this: <input type="text name="test" value="">
You should use this: <input type="text name="test" value="" />

If there is a closing tag you don't have to do anything special:
<strong>blah blah</strong> (both html, xml valid)

2. You should always declare the type element where needed.
This is wrong: <script>alert('hello');</script>
Use this: <script language="javascript" type="text/javascript">alert('hello');</script>

3. You should always use double quotes where needed:
Wrong:
<div align=center><span style='color:#ff0000;'>test</span></div>
Right:
<div align="center"><span style="color:#ff0000;">test</span></div>

4. IDs should be unique in the document
Wrong:
<div id="my1"><span id="my1">test</span></div>
Right:
<div id="my1"><span id="my2">test</span></div>

Due to the above better use classes than ids in your css documents to format text.

5. Images should always have alt elements:
<img src="mypic.jpg" alt="my picture" title="my picture" border="0" />
If you wish you can also add a title element.

6. Use labels for input tags
<label for id="usename1">username</label>: <input type="text" name="username" id="username1" value="" />

7. Do not forget to close all open tags.
Wrong:
<table>
<tr>
<td>test</td>
</table>

Right:
<table>
<tr>
<td>test</td>
</tr>
</table>

8. Do not insert style inside the body area of the document.
Wrong:
<body>
...
<style type="text/css">...</style>

Workaround:
a. Use an external CSS file that is loaded in the pages header.
a1. You can do this from the template's index.php file
a2. You can append custom headers to the page headers if headers have not yet been echoed (not good for modules).
example:
$mainframe->addCustomHeadTag('<link href="mycss.css" rel="stylesheet" type="text/css" />');

b. If you don't have to add too much css write it directly inside the html using the style attribute.
example:
<div style="font-size: 0.9em; color: #ff9900;">test</div>

9. Tags and attributes should be lowercase
Wrong:
<DIV ALIGN="CENTER">test</DIV>
Right:
<div align="center">test</div>

10. Validate your documents to ensure they are XHTML valid
http://validator.w3.org

Author Topic: XHTML compatibility (Read 11353 times)

datahell

XHTML compatibility