1. Allowed Tags Overview

Patients Know Best’s care plans accept HTML and CSS for rich multimedia displays of information to the patient. For security purposes, PKB cannot accept all tags in the medical record. This guide shows what care tags work and how they work within a care plan.

1.1 Structural Tags

• <div>: General block container.

• <span>: General inline container.

1.2 Text Formatting Tags

• <p>, <h1>–<h6>, <b>, <i>, <u>, <strong>, <em>, <small>, <sub>, <sup>, <blockquote>, <code>.

1.3 List Tags

• <ul>, <ol>, <li>.

1.4 Table Tags

• <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>.

1.5 Image Tags

• <img>:

  • Allowed attributes: src, alt, width, height.

1.6 Anchor Tags

• <a>:

  • Allowed attributes: href, target="_blank".

1.7 Empty Tags

Tags explicitly allowed to be empty:

• <br>, <hr>.

2. Allowed CSS Properties

Only the following CSS properties are allowed:

2.1 Text Styling

• font-size

• font-style

• font-weight

• text-align

• text-decoration

• line-height

• letter-spacing

• color

2.2 Box Model

• margin

• padding

• border

• width

• height

2.3 Background and Positioning

• background-color

• background-image

• position (only static, inherit)

3. Usage Rules

3.1 General Attributes

• The following attributes are allowed on all tags:

  • id

  • class

  • lang

  • title

• Attribute values must comply with:

  • id: Letters and numbers only.

  • Colours: #hex, named colours, rgb().

3.2 Empty Tags

• Use <br> or <hr> for line breaks or horizontal rules without adding content.

Appendix: Working Examples

1. Section Divider

• Tag: <div>

• Purpose: The <div> tag is used to create a section divider with specific styling, such as a background colour or alignment.

• Allowed Attributes:

  • class: Specifies a CSS class, e.g., cp_secondaryTitle.

  • Inline styles (style): Only validated properties such as:

    • height

    • background-color

    • text-align

    • margin-bottom

Example:

2. Separator

• Tag: <hr>

• Purpose: Creates a horizontal line to visually separate content.

• Allowed Attributes:

  • Inline styles (style): Only validated properties such as:

    • height

    • background-color

    • margin-top

    • margin-bottom

Example:

3. Textarea

• Tag: <textarea>

• Purpose: Allows users to input multi-line text.

• Allowed Attributes:

  • id: Unique identifier following [a-zA-Z0-9\-_\$]+.

  • name: Required and follows the same pattern as id.

  • rows: Specifies the number of visible lines (positive integer).

  • placeholder: Optional text hint for the input area.

  • Inline styles (style): Only validated properties such as:

    • width

Example:

4. Text Input

• Tag: <input>

• Purpose: Creates a single-line text box where users can type information.

• Allowed Attributes:

  • type: Specifies the type of input, e.g., text.

  • id: Unique identifier following [a-zA-Z0-9\-_\$]+.

  • name: Used to identify the input when the form is submitted.

  • class: Assigns a CSS class to the input.

  • Inline styles (style): Only validated properties such as:

    • width

Example:

5. Date Input

• Tag: <input>

• Purpose: Creates a date picker field for users to select a date.

• Allowed Attributes

  • type: Must be set to date.

  • id: Unique identifier following the regex pattern [a-zA-Z0-9\-_\$]+.

  • name: Specifies the name for the input element in the form submission, following the same regex as id.

  • placeholder: Provides a hint to the user, allowing any text string.

  • class: Assigns a CSS class to apply predefined styles (e.g., form-control).

  • style: Allows inline styles with validated CSS properties, such as width.

  • value: Specifies a pre-filled date value, matching the yyyy-mm-dd format.

Example:

6. Checkbox

• Tags: <input> and <label>

• Purpose: Allows users to select multiple options from a group.

• Allowed Attributes:

  • type: Must be checkbox.

  • id: Unique identifier.

  • name: Groups related checkboxes for submission.

  • value: Specifies the value of the checkbox.

Example:

7. Radio Buttons

• Tags: <input> and <label>

• Purpose: Allows users to select one option from a group.

• Allowed Attributes:

  • type: Must be radio.

  • id: Unique identifier.

  • name: Groups related radio buttons.

  • value: Specifies the value of the button.

Example:

8. Professional Lock Sections

• Tag: <fieldset>

• Purpose: The <fieldset> tag groups form elements and is used here to define content restricted for professional users.

• Allowed Attributes:

  • class: Used to apply specific styles; in this case, pro-only.

  • Inline styles (style): None

9. Collapsible Section

• Tags: <details> and <summary>

• Purpose: Creates an expandable section where the user can toggle visibility of the content by clicking a title.

• Allowed Attributes:

  • <details>: No specific attributes are required for basic functionality.

  • <summary>: Can include other valid tags (e.g., <div> and <span>) for styling.

Basic Example:

Professional Lock Example:

This document only includes allowed tags and attributes based on the validator's configuration. Each example demonstrates practical usage for clarity. The examples given conform with WCAG AA accessibility and system styling. It is strongly recommended to use these examples to maintain this useability.

Appendix: Allowed CSS Properties

This section lists all the CSS properties and their permissible values that are allowed through the validator.

1. General Properties

1.1 position

• Allowed Values:

  • relative, absolute, static, inherit.

1.2 border-radius

• Allowed Values:

  • Length values (e.g., px, em, %).

1.3 opacity

• Allowed Values:

  • Numbers (0.0–1.0) or percentage values.

2. Background Properties

2.1 background

• Description: Shorthand for other background-related properties.

• Allowed Sub-Properties:

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

2.2 background-attachment

• Allowed Values:

  • scroll, fixed, inherit.

2.3 background-color

• Allowed Values:

  • Named colours (e.g., red, blue).

  • Hex codes (e.g., #ff0000, #fff).

  • RGB values (e.g., rgb(255, 0, 0)).

  • transparent, inherit.

3. Text and Visual Properties

3.1 color

• Allowed Values:

  • Named colours (e.g., red, blue).

  • Hex codes (e.g., #ffffff, #000).

  • RGB values (e.g., rgb(255, 0, 0)).

  • System colours.

3.2 text-shadow

• Allowed Values:

  • none, inherit.

  • Length values for offsets and colour values for shadows.

3.3 letter-spacing

• Allowed Values:

  • normal, inherit, length values.

3.4 line-height

• Allowed Values:

  • normal, inherit, number, length, or percentage.

3.5 word-spacing

• Allowed Values:

  • normal, inherit, length values.

4. Box Model Properties

4.1 margin

• Allowed Values:

  • auto, inherit, positive lengths or percentages.

4.2 border-spacing

• Allowed Values:

  • inherit, lengths (positive only).

4.3 clip

• Allowed Values:

  • auto, inherit.

4.4 overflow

• Allowed Values:

  • visible, hidden, scroll, inherit.

5. List and Display Properties

5.1 list-style-type

• Allowed Values:

  • disc, circle, square, decimal, lower-roman, upper-roman.

5.2 list-style-position

• Allowed Values:

  • inside, outside, inherit.

5.3 list-style-image

• Allowed Values:

  • none, inherit.

6. Interactive and Cursor Properties

6.1 cursor

• Allowed Values:

  • auto, pointer, move, text, default, inherit.

6.2 outline-color

• Allowed Values:

  • Colour values, invert, inherit.

Appendix: Raw XML list

This list represents all CSS properties and their values that the validator allows.

Notes

If specific use cases fall outside these guidelines, consult with a PKB team member for validation.