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 4 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" style="height: 53px; background-color: #F5F8F9; text-align: center; margin-bottom: 15px;">
    <h2>Section Title</h2>
</div>

2. 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="form-group" style="margin-top: 15px;">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" class="form-control" style="width: 100%;" />
</div>

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

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>

4. 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="form-group" style="margin-top: 15px;">
    <label for="comments">Your Comments:</label>
    <textarea id="comments" name="comments" rows="4" placeholder="Type here..." style="width: 100%;"></textarea>
</div>

5. 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;" />

6. Checkbox Group

  • 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="form-group" style="margin-top: 15px;">
    <div>
        <input type="checkbox" id="option1" name="options" value="Option 1" />
        <label for="option1">Option 1</label>
    </div>
    <div>
        <input type="checkbox" id="option2" name="options" value="Option 2" />
        <label for="option2">Option 2</label>
    </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="form-group" style="margin-top: 15px;">
    <input type="radio" id="yes" name="choice" value="Yes" />
    <label for="yes">Yes</label>
    <input type="radio" id="no" name="choice" value="No" />
    <label for="no">No</label>
</div>

This document only includes allowed tags and attributes based on the validator's configuration. Each example demonstrates practical usage for clarity.

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 the development team for validation.

  • No labels