Skip to main content

required-element

Warns if specified elements didn't appear on a document or an element. Use the selector to specify.

This is a generic rule for searching the required element.

info

Use the required-h1 rule if you expect to require the h1 element. Use the landmark-roles rule if you expect to require landmark elements. Use the permitted-contents rule if you expect to check conformance according to HTML Standard.

❌ Examples of incorrect code for this rule

<!-- "required-element": ["meta[charset=\"UTF-8\"]"] -->
<head>
  <title>Page title</title>
</head>

✅ Examples of correct code for this rule

<!-- "required-element": ["meta[charset=\"UTF-8\"]"] -->
<head>
  <meta charset="UTF-8" />
  <title>Page title</title>
</head>

Interface​

{
  "required-element": string[]
}

Options​

{
  "required-element": {
    "options": {
      "ignoreHasMutableContents"?: boolean
    }
  }
}
PropertyTypeDefault ValueDescription
ignoreHasMutableContentsboolean"true"Ignore if it has mutable child elements in a preprocessor language like Pug or a component library like Vue. (If use Pug or Vue need each @markuplint/pug-parser and @markuplint/vue-parser)

Default Severity​

error

Configuration Example​

If specified to rules, It searches the element from a document.

{
  "rules": {
    "required-element": ["meta[charset=\"UTF-8\"]"]
  }
}

If specified to nodeRules or childNodeRules, It searches the element from child elements of the target element.

{
  "nodeRules": [
    {
      "selector": "head",
      "rules": {
        "required-element": ["meta[charset=\"UTF-8\"]"]
      }
    }
  ]
}