Required attributes

Warns if specified attributes or required attribute on specs are not appeared on an element.

This rule refer HTML Living Standard based MDN Web docs. It has settings in @markuplint/html-spec.

Rule Details

The src attribute is required on <img> element on HTML Living Standard based MDN Web docs.

👎 Example of incorrect code for this rule

<img />

👍 Example of correct code for this rule

<img src="/path/to/image.png" />

Custom setting

When the alt attribute is required, set {"required-attr": "alt"}.

👎 Example of incorrect code for this rule

<img src="/path/to/image.png" />

👍 Example of correct code for this rule

<img src="/path/to/image.png" alt="alternative text" />

Setting value

{
    "rules": {
        "required-attr": "alt"
    }
}

{
    "rules": {
        "required-attr": ["alt", "src"]
    }
}

Type: string | string[]

Configuration Example

Since we ordinary want to configure required attributes for each element type, required-attr rule should be configured in the nodeRules option.

Example configuration that alt attribute must be required on <img> element:

{
    "rules": {
        "required-attr": true
    },
    "nodeRules": [
        {
            "tagName": "img",
            "rules": {
                "required-attr": "alt"
            }
        }
    ]
}

Note

This rule doesn't evaluate the element that has the spread attribute. In the below code, it doesn't evaluate whether the img element includes the src attribute. Because markuplint can't know whether the spread attribute includes the src property.

const Component = (props) => {
    return <img {...props}>;
}