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
      "ignoreOmittedElements"?: 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)
ignoreOmittedElementsboolean"false"Ignore omitted (ghost) elements that are implicitly created by the HTML parser. When true, only explicitly written elements satisfy the requirement.

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\"]"]
      }
    }
  ]
}

Setting ignoreOmittedElements option​

HTML allows certain tags to be omitted (e.g., <tbody>). The HTML parser implicitly creates these omitted elements as ghost nodes. By default, these ghost elements satisfy the requirement. Set ignoreOmittedElements to true to require that elements are explicitly written in the source.

{
  "nodeRules": [
    {
      "selector": "table",
      "rules": {
        "required-element": {
          "value": ["tbody"],
          "options": {
            "ignoreOmittedElements": true
          }
        }
      }
    }
  ]
}