In Confidence

Summary of available client records
[Client type] name: [Client name] [Indicator A]
[Client ID type]: [Client ID] Account: [Account type and sequence No.] [Indicator B]
BSB & Account No.: [BSB & Account no.] Role: [Role] [Indicator C]
TAN: [Tax Agent no.] Period: [Period dates] [Indicator D]
Assessment: [Assessment no] [Indicator E]
Transaction: [Transaction ID] [Indicator F]
You are here:

  • This is a process directional message, triggered by the class "direction" on the <li> element in this branch of the document tree. The <li> is contained within a <ul> with a class of "messages".
  • This is a process error message, triggered by the class "error" on the <li> element in this branch of the document tree. The <li> is contained within a <ul> with a class of "messages".
  • This is a process success message, triggered by the class "success" on the <li> element in this branch of the document tree. The <li> is contained within a <ul> with a class of "messages".
  • This is a process alert message, triggered by the class "alert" on the <li> element in this branch of the document tree. The <li> is contained within a <ul> with a class of "messages".

Main page title (always a <h2></h2>)

Directional text, relating to the wider functional aspects of this group of screens or task.

Page sub-header (usually a <h3> in this context, <h4>'s are also used further down the document tree)

Sample output from a text input field:
data value
Sample output from a select menu:
data value
Sample output from using radio buttons:
Yes/No
Sample output from a date control:
dd/mm/yyyy
Sample output from a text area:
Each form input and its label text uses this html assembly (including the output from radio buttons and date inputs):

<dl class="section">
   <dt>Label text:</dt>
   <dd>data value</dd>
   </dl>

In the View screen, we use the markup for a definition list—above—because the structure of the html correlates quite strongly with that of the form inputs, enabling us to apply visual styling via CSS with minimal difference ie: we can declare the same CSS values for both the Add and View screens in a single line of CSS code. This markup also provides a label/data structure which provides the data with some contextual information relating the data to its heading.
Sample output from a text input field:
data value

A sub-heading, using <h4></h4>

Sample output from a select menu:
data value
Sample output from a using a checkbox:
value

Example table using the caption element for a heading
Heading Heading Heading Heading Heading
Data Data Data Data Data
Data Data Data Data Data
Data Data Data Data Data
Displaying X to XX of XXX records found < previous 1 2 3 4 5 6 7 8 9 10 next >

In Confidence