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"true"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 are ignored — only elements explicitly written in the source satisfy the requirement. Set ignoreOmittedElements to false if you want ghost elements to count as satisfying the requirement.

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