`no-unknown-attr`

Warn if an attribute is not defined by the specification (or the custom rule) for the element.

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.

This rule checks name eligibility only. A defined attribute that isn't allowed in the current context (noUse, an unmet condition, or is on an autonomous custom element) is no-disallowed-attr's concern; an invalid value on an otherwise-known attribute is no-invalid-attr-value's.

❌ Examples of incorrect code for this rule

<div unexist-attr></div>

✅ Examples of correct code for this rule

<div></div>

Interface

{
  "no-unknown-attr": boolean
}

Options

{
  "no-unknown-attr": {
    "options": {
      "allowAttrs"?: (string | Attr)[] | Record&lt;string, AttributeType | Pattern&gt;
      "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 attribute names to treat as known, beyond what the spec defines. 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. The value type, if given, is used by the `no-invalid-attr-value` rule to validate the attribute's value.
`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

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: the value type is used by no-invalid-attr-value to validate the attribute's value — set the same allowAttrs on both rules so the two stay in sync.

{
  "no-unknown-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 `ignoreAttrNamePrefix` option

{
  "no-unknown-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.) Set the same ignoreAttrNamePrefix on no-disallowed-attr too.

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": {
        "no-unknown-attr": {
          "options": {
            "allowAttrs": ["property", "content"]
          }
        }
      }
    }
  ]
}

RDFa (RDFa lite)

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

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

Interface​

Options​

Default Severity​

Details​

Setting allowAttrs option​

Setting ignoreAttrNamePrefix option​

Configuration Example​

The Open Graph protocol​

RDFa (RDFa lite)​