Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

Purpose

This document outlines the allowed HTML tags and CSS properties within the application to ensure consistent, secure, and compliant usage.

1. Allowed Tags Overview

Tags with action="validate" are allowed. Here are the approved categories and their attributes:

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 regex rules defined in <common-regexps>:

    • id: Letters and numbers only.

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

3.2 Value Restrictions

  • Only use values explicitly listed in <literal-list> or <regexp-list>.

3.3 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.

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.

  • No labels