invalid-attr

Warn if an attribute is a non-existent attribute or an invalid type value due to the specifications (or the custom rule).

This rule according to HTML Living Standard. It has settings in @markuplint/html-spec.

When a non-existent attribute name is similar to a valid attribute for the element, the error message includes a "Did you mean ...?" suggestion to help fix typos.

❌ Examples of incorrect code for this rule

<div unexist-attr>
  <button tabindex="non-integer">The Button</button>
  <a href="/" referrerpolicy="invalid-value">The Anchor</a>
</div>

✅ Examples of correct code for this rule

<div>
  <button tabindex="0">The Button</button>
  <a href="/" referrerpolicy="no-referrer">The Anchor</a>
</div>

note

This rule doesn't evaluate the element that has the spread attribute in some condition. For example, it disallows to set the target attribute to the a element that doesn't have the href attribute, but Markuplint can't evaluate because doesn't know whether the spread attribute includes the href property.

const Component = (props) => {
  return <a target="_blank" {...props}>;
}

Interface

{
  "invalid-attr": boolean
}

Options

{
  "invalid-attr": {
    "options": {
      "allowAttrs"?: (string | Attr)[] | Record<string, AttributeType | Pattern>
      "disallowAttrs"?: (string | Attr)[] | Record<string, AttributeType | Pattern>
      "ignoreAttrNamePrefix"?: string | string[]
      "allowToAddPropertiesForPretender"?: boolean
    }
  }
}

type Attr = {
  name: string;
  value: AttributeType | Pattern;
}

type Pattern = { pattern: string; };

AttributeType is The type API. Pattern is also part of the type API.

Property	Type	Default Value	Description
allowAttrs	(string | Attr)[] | Record<string, AttributeType | Pattern>	undefined	Specify the attributes to allow. This is useful when you want to intentionally specify attributes not present in the HTML Standard or when you want to avoid warnings for attributes required by frameworks. You can specify the attribute name only or provide patterns and data types for attribute values.
disallowAttrs	(string | Attr)[] | Record<string, AttributeType | Pattern>	undefined	Specify the attributes to disallow. Even if they are allowed in the HTML Standard, you can use this option to intentionally prohibit them based on your project's rules. The format for specifying disallowed attributes is the same as for allowAttrs, but the meanings are reversed.
ignoreAttrNamePrefix	string | string[]	undefined	Set prefixes to exclude special attributes or directives for the library and template engine that do not exist in the HTML specifications.
allowToAddPropertiesForPretender	boolean	"true"	Allow adding properties for a component that pretends to be an HTML native element. The default is true. It warns of finding a non-existence attribute if it is set false and you use the pretenders option.

Default Severity

error

Details

Setting allowAttrs option

caution

allowAttrs can override spec-level restrictions (such as noUse). When writing presets or shared configurations, use nodeRules to scope allowAttrs so it does not unintentionally allow attributes that the HTML specification disallows on specific elements.

The array can contain elements of both string and object types.

For strings, you can specify allowed attribute names, with attribute values being unrestricted. In the case of Objects, they should have both name and value properties, allowing you to specify more precise constraints for the attribute values.

{
  "invalid-attr": {
    "options": {
      "allowAttrs": [
        "x-attr",
        {
          "name": "x-attr2",
          "value": "Int"
        },
        {
          "name": "x-attr3",
          "value": {
            "enum": ["apple", "orange"]
          }
        },
        {
          "name": "x-attr4",
          "value": {
            "pattern": "/^[a-z]+$/"
          }
        }
      ]
    }
  }
}

You can use the types defined in The types API for the value property. Additionally, you can specify an enum property to limit the allowed values or use the pattern property to define a pattern for the values using regular expressions.

caution

In case of duplicate attribute names within the array, the one specified later will take precedence.

Setting disallowAttrs option

The format for specifying disallowed attributes is the same as for allowAttrs, but the meanings are reversed.

{
  "invalid-attr": {
    "options": {
      "disallowAttrs": [
        // Disallow `x-attr` attribute.
        "x-attr",

        // Disallow `x-attr2` attribute when the value is an integer.
        // If the value is not an integer, the attribute itself is allowed.
        {
          "name": "x-attr2",
          "value": "Int"
        },

        // Disallow `x-attr3` attribute when the value is "apple" or "orange".
        // If the value is not "apple" and "orange", the attribute itself is allowed.
        {
          "name": "x-attr3",
          "value": {
            "enum": ["apple", "orange"]
          }
        },

        // Disallow `x-attr4` attribute when the value matches the pattern.
        // If the value doesn't match the pattern, the attribute itself is allowed.
        {
          "name": "x-attr4",
          "value": {
            "pattern": "/^[a-z]+$/"
          }
        }
      ]
    }
  }
}

Setting ignoreAttrNamePrefix option

{
  "invalid-attr": {
    "options": {
      "ignoreAttrNamePrefix": [
        // If Angular
        "app",
        "*ng"
      ]
    }
  }
}

In some parser, detect an attribute as a directive so ignored. (Ex: Ignore directive that starts v- string in the vue-parser.)

Configuration Example

The Open Graph protocol and RDFa are specifications that are different from the HTML Standard. So you should specify it manually as follow if you need it:

The Open Graph protocol

{
  "nodeRules": [
    {
      "selector": "meta[property]",
      "rules": {
        "invalid-attr": {
          "options": {
            "allowAttrs": ["property", "content"]
          }
        }
      }
    }
  ]
}

RDFa (RDFa lite)

{
  "rules": {
    "invalid-attr": {
      "options": {
        "allowAttrs": [
          {
            "name": "vocab",
            "value": "URL"
          },
          "typeof",
          "property",
          "resource",
          "prefix"
        ]
      }
    }
  }
}

We recommend you use Microdata instead of RDFa if you need structured data.