HTML Coding Conventions

From OrangeHRM

All new HTML should validate as XHTML 1.0

Although we currenly use a doctype of xhtml 1.0 transitional in most places in OrangeHRM, there are many places with validation errors.

From now on, we should make sure that any new pages validates correctly as xhtml 1.0.

There is no need to make changes to existing pages, but new pages should be valid xhtml 1.0

You can easily validate html in OrangeHRM using Firefox's "Web developer toolbar". First open just the main frame (without the top level menus etc. - "right click - this frame -> show only this frame" in firefox) and use the 'Tools->Validate Local HTML" option in the web developer toolbar.

Some common things in our code which are not valid xhtml are:

1. Tables, cells not closed properly

2. Elements not closed eg:

<input type="text >

Fixed by changing to:

<input type="text" />

3. Attributes not quoted: eg: <option value=0>Select</option>

   Fixed by changing to: <option value="0">Select</option>

3. height attribute in tables:

<table height="100">

If height is needed, can be converted to a style: eg:

<table style="height:100px">

Note that external css is preferred to inline style attribute. So the preferred solution would be:

    <table class="abc">

and a css rule

    table.abc {
       height: 100px;
    }

4. Tables with empty bodies also do not validate. eg:

<table></table> or <table><tbody></tbody></table>

5. <script> tag for inline javascript should be as follows:

<script type="text/javascript">
//<![CDATA[
function test() {
}
//]]>
</script>

Note that

<script language="Javascript">

which we have in some places is not valid.

6. All url's in HTML (not in javscript code) should use &amp; instead of &

eg:

./lib/controllers/CentralController.php?uniqcode=EMP&VIEW=MAIN

7. All <img tags should have the alt attribute. You can use alt="" for images used just for style.

8. <textarea> should have cols and rows attributes. eg:

<textarea cols="25" rows="3" name="xx"></textarea>