Sahana HTML Convention

Introduction

Sahana uses semantically correct, valid XHTML 1.0 Strict for structural markup of web pages. The use of web standards enables Sahana to be accessible to the highest number of users, including differently-abled people and people using alternative browsing devices such as mobile phones and PDAs. It also allows Sahana interfaces to be light and fast loading, and be consistent across a wide number of web browsers.

Basic Guidelines

Use the W3C XHTML 1.0 Specification as reference for all clarifications.

XHTML is XML, so general XML syntax rules apply.

In addition:

  • Open with the proper DOCTYPE & Namespace
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  • All XHTML tags and attributes must be typed in lowercase, or your document will not validate.
  • Quote all attribute values (E.g.: <img src=“foo.png” alt=“Elvis has left the building” />)
  • Use semantically correct markup (i.e. Use <table>s only for tabular data, Do not use presentational markup tags such as <i> and <b> but do use <em> and <strong> instead).
  • Attribute minimization is not supported in XHTML; Attribute-value pairs must be written in full. (E.g.: <input type=“text” disabled=“disabled” />
  • Validate your markup using the W3C HTML Validator

XHTML Elements

h1 - Level 1 Heading

The main page header is always the application name, “Sahana”. Please reserve h1 for this purpose only.

h2 - Level 2 Heading

A secondary level header may be used for any form of important page-level header. More than one may be used per page. This is used in the Navigation section headers (main menu and sub menu), as well as for each page's content header.

h3, h4, h5, h6

A third level header h3 may be used for any form of page-level header which falls below the h2 header in a document hierarchy. More than one may be used per page. For all headers below third-level, follow the guidelines listed above. Only use lower header levels when necessary.

Basic Guidelines to Follow when Outputting HTML using PHP

This is mainly for keeping the dynamicaly generated HTML code clean. In the PHP coding when the php code block is escaped and normal HTML is written try to start the HTML tags from the beginning and use normal indentation for the HTML. e.g;

function show_init_vals($legend)
{
    $vals = rms_get_initvals();
?>
<fieldset>
<legend><?php print $legend ?></legend>
    <label><?php print _("Request Date") ?></label><value><?php print $vals['req_date']?></value><br/>
    <label><?php print _("Requester Name") ?></label><value><?php print $vals['req_name']?></value><br/>
    <label><?php print _("Requester Contact") ?></label><value><?php print $vals['req_contact']?></value><br/>
    <label id="txtarea"><?php print _("Requester Address") ?></label><value id="txtarea"><?php print $vals['req_address']?></value><br/>
    <label><?php print _("Site Name") ?></label><value><?php print $vals['req_site_name']?></value><br/>
    <label><?php print _("Site District") ?></label><value><?php print $vals['req_site_district']?></value><br/>
    <label id="txtarea"><?php print _("Site Address") ?></label><value id="txtarea"><?php print $vals['req_site_address']?></value><br/>
    <label id="txtarea"><?php print _("Comments") ?></label><value id="txtarea"><?php print $vals['req_comments']?></value><br/>
</fieldset>
<?php
}

Navigation
QR Code
QR Code dev:html_convention (generated for current page)