# svelte/no-restricted-html-elements

disallow specific HTML elements

# 📖 Rule Details

This rule reports to usage of resticted HTML elements.

<script>
  /* eslint svelte/no-restricted-html-elements: ["error", "h1", "h2", "h3", "h4", "h5", "h6"] */
</script>

<!-- ✓ GOOD -->
<div>
  <p>Hi!</p>
</div>

<!-- ✗ BAD -->

Unexpected use of forbidden HTML element h1. (svelte/no-restricted-html-elements)
<h1>foo</h1>

<div>
  
Unexpected use of forbidden HTML element h2. (svelte/no-restricted-html-elements)
<h2>bar</h2>
</div>
<script>
  /* eslint svelte/no-restricted-html-elements: ["error", { "elements": ["marquee"], "message": "Do not use deprecated HTML tags" }] */
</script>

<!-- ✓ GOOD -->
<div>
  <p>Hi!</p>
</div>

<!-- ✗ BAD -->

Do not use deprecated HTML tags (svelte/no-restricted-html-elements)
<marquee>foo</marquee>

<div>
  
Do not use deprecated HTML tags (svelte/no-restricted-html-elements)
<marquee>bar</marquee>
</div>

# 🔧 Options

This rule takes a list of strings, where each string is an HTML element name to be restricted:

{
  "svelte/no-restricted-html-elements": ["error", "h1", "h2", "h3", "h4", "h5", "h6"]
}

Alternatively, the rule also accepts objects.

{
  "svelte/no-restricted-html-elements": [
    "error",
    {
      "elements": ["h1", "h2", "h3", "h4", "h5", "h6"],
      "message": "Prefer use of our custom <Heading /> component"
    },
    {
      "elements": ["marquee"],
      "message": "Do not use deprecated HTML tags"
    }
  ]
}

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v2.31.0

# 🔍 Implementation