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