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. Allowed Tags Overview

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:

<div class="cp_secondaryTitle">
    // Section Title Goes Here //
</div>

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:

<hr style="height: 3px; background-color: #f5f8f9; margin-top: 40px; margin-bottom: 40px;"/>

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:

<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="cp_">Enter your text:</label>
        <textarea class="form-control" name="REPLACE" id="REPLACE" rows="3" style="width: 100%;"></textarea>
    </div>
</div>

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:

<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="cp_"></label>
        <input type="text" name="REPLACE" id="REPLACE" class="form-control" style="width: 100%;"/>
    </div>
</div>

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:

<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="cp_">Select a date:</label>
        <input type="date" name="REPLACE" id="REPLACE" class="form-control" placeholder="dd/mm/yyyy"/>
    </div>
</div>

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:

<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <p>Choose options:</p>
    </div>
    <div class="col-sm-12">
        <div class="form-check col-xs-12 pull-left">
            <input class="form-check-input form-control" type="checkbox" name="REPLACE" id="REPLACE1" value="Option1"/>
            <label class="col-xs-10 pull-right" for="REPLACE1">Option 1</label>
        </div>
        <div class="form-check col-xs-12 pull-left">
            <input class="form-check-input form-control" type="checkbox" name="REPLACE" id="REPLACE2" value="Option2"/>
            <label class="col-xs-10 pull-right" for="REPLACE2">Option 2</label>
        </div>
    </div>
</div>

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:

<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <p>Choose one:</p>
    </div>
    <div class="col-sm-12">
        <div class="form-check">
            <input class="form-check-input col-xs-1" type="radio" name="REPLACE" id="Yes" value="Yes">
            <label class="form-check-label col-xs-10" for="Yes">Yes</label>
        </div>
        <div class="form-check">
            <input class="form-check-input col-xs-1" type="radio" name="REPLACE" id="No" value="No">
            <label class="form-check-label col-xs-10" for="No">No</label>
        </div>
    </div>
</div>

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

<fieldset class="pro-only">
    // Restricted content goes here //
</fieldset>

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:

<details>
    <summary>
        <div class="row collapsable-section-title-container cp_secondaryTitle">
            <div class="col-sm-12">
                <h3>Click to Expand</h3>
            </div>
        </div>
    </summary>
    <p>This is the content inside the collapsible section.</p>
</details>

Professional Lock Example:

<fieldset class="pro-only">
    <details>
        <summary>
            <div class="row collapsable-section-title-container cp_secondaryTitle">
                <div class="col-sm-12">
                    <h1>Clickable Title for the Section</h1>
                </div>
                <span class="icon details-closed"></span>
            </div>
        </summary>
        <p>This is restricted collapsible content.</p>
    </details>
</fieldset>

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

-- tag rules
tag name="iframe"
tag name="label"
tag name="form"
tag name="button"
tag name="input"
tag name="select"
tag name="option"
tag name="optgroup"
tag name="textarea"
tag name="h1"
tag name="h2"
tag name="h3"
tag name="h4"
tag name="h5"
tag name="h6"
tag name="p"
tag name="i"
tag name="b"
tag name="u"
tag name="strong"
tag name="em"
tag name="small"
tag name="big"
tag name="pre"
tag name="code"
tag name="cite"
tag name="samp"
tag name="sub"
tag name="sup"
tag name="strike"
tag name="center"
tag name="blockquote" action="va
tag name="hr"
tag name="br"
tag name="s"
tag name="ins"
tag name="del"
tag name="strike"
tag name="tt"
tag name="big"
tag name="caption"
tag name="q"
tag name="font"
tag name="a"
tag name="base"
tag name="style"
tag name="span"
tag name="div"
tag name="img"
tag name="ul"
tag name="ol"
tag name="li"
tag name="dd"
tag name="dl"
tag name="dt"
tag name="thead"
tag name="tbody"
tag name="tfoot"
tag name="table"
tag name="td"
tag name="th"
tag name="tr"
tag name="colgroup"
tag name="col"
tag name="fieldset"
tag name="details"
tag name="summary"
tag name="legend"




--CSS rules
property name="azimuth"
property name="background" 
property name="background-attachment
property name="background-color
property name="background-image
property name="background-position
property name="background-repeat
property name="background-size
property name="border-collapse
property name="border-color
property name="border-top
property name="border-right
property name="border-bottom
property name="border-left
property name="bottom"
property name="caption-side
property name="clear"
property name="color" 
property name="cue-after
property name="cue-before
property name="direction"
property name="display"
property name="elevation"
property name="empty-cells
property name="float"
property name="font-size
property name="font-size
property name="font-stretch
property name="font-style
property name="font-variant
property name="font-weight
property name="height"
property name="left"
property name="letter-spacing
property name="line-height
property name="list-style
property name="list-style
property name="list-style
property name="marker-offset
property name="max-height
property name="max-width
property name="min-height
property name="min-width
property name="orphans"
property name="outline-color
property name="overflow"
property name="page-break
property name="page-break
property name="page-break
property name="pause-after
property name="pause-before
property name="pitch"
property name="pitch-range
property name="position"
property name="richness"
property name="right"
property name="size"
property name="speak"
property name="speak-header
property name="speak-numeral
property name="speak-punctuation
property name="speech-rate
property name="stress"
property name="table-layout
property name="text-indent
property name="text-transform
property name="top"
property name="unicode-bidi
property name="vertical-align
property name="visibility"
property name="volume"
property name="white-space
property name="widows"
property name="width"
property name="word-spacing
property name="word-wrap
property name="border-style
property name="border-top
property name="border-right
property name="border-bottom
property name="border-left
property name="border-top
property name="border-right
property name="border-bottom
property name="border-left
property name="border-width
property name="margin" 
property name="margin-top
property name="margin-right
property name="margin-bottom
property name="margin-left
property name="outline-style
property name="outline-width
property name="padding" 
property name="padding-top
property name="padding-right
property name="padding-bottom
property name="padding-left
property name="border" 
property name="border-top
property name="border-right
property name="border-bottom
property name="border-left
property name="cue" 
property name="list-style
property name="marks"
property name="outline" 
property name="pause" 
property name="text-decoration
property name="border-spacing
property name="clip"
property name="counter-increment
property name="clip"
property name="cursor"
property name="text-shadow
property name="font" 
property name="font-family
property name="page" 
property name="play-during
property name="text-align
property name="voice-family
property name="position"
property name="border-radius
property name="opacity"

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.

Care Plan HTML and CSS usage

1. Allowed Tags Overview

1.1 Structural Tags

1.2 Text Formatting Tags

1.3 List Tags

1.4 Table Tags

1.5 Image Tags

1.6 Anchor Tags

1.7 Empty Tags

2. Allowed CSS Properties

2.1 Text Styling

2.2 Box Model

2.3 Background and Positioning

3. Usage Rules

3.1 General Attributes

3.2 Empty Tags

Appendix: Working Examples

1. Section Divider

2. Separator

3. Textarea

4. Text Input

5. Date Input

6. Checkbox

7. Radio Buttons

8. Professional Lock Sections

9. Collapsible Section

Professional Lock Example:

Appendix: Allowed CSS Properties

1. General Properties

1.1 position

1.2 border-radius

1.3 opacity

2. Background Properties

2.1 background

2.2 background-attachment

2.3 background-color

3. Text and Visual Properties

3.1 color

3.2 text-shadow

3.3 letter-spacing

3.4 line-height

3.5 word-spacing

4. Box Model Properties

4.1 margin

4.2 border-spacing

4.3 clip

4.4 overflow

5. List and Display Properties

5.1 list-style-type

5.2 list-style-position

5.3 list-style-image

6. Interactive and Cursor Properties

6.1 cursor

6.2 outline-color

Appendix: Raw XML list

Notes

1.1 `position`

1.2 `border-radius`

1.3 `opacity`

2.1 `background`

2.2 `background-attachment`

2.3 `background-color`

3.1 `color`

3.2 `text-shadow`

3.3 `letter-spacing`

3.4 `line-height`

3.5 `word-spacing`

4.1 `margin`

4.2 `border-spacing`

4.3 `clip`

4.4 `overflow`

5.1 `list-style-type`

5.2 `list-style-position`

5.3 `list-style-image`

6.1 `cursor`

6.2 `outline-color`