noObsoleteAttributes (JavaScript)

Summary

Rule available since: v2.6.3
Diagnostic Category: lint/nursery/noObsoleteAttributes
This rule doesn’t have a fix.
The default severity of this rule is warning.
Sources:
- Same as @html-eslint/no-obsolete-attrs

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noObsoleteAttributes": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow obsolete attributes on HTML elements.

The HTML specification marks these attributes as obsolete, so they should no longer be used. Browsers might ignore them or handle them differently from each other. Most of them changed how a page looks, which is now done with CSS. Others have a modern replacement, such as the id attribute instead of name on <a> elements.

Element and attribute names must match exactly, including uppercase and lowercase letters. The rule reports both the HTML spelling of an attribute, such as cellpadding, and its React spelling, such as cellPadding. Components such as <Table /> and elements inside <svg> are ignored.

Attributes with the value false, null, or undefined are also ignored, because they are not added to the page.

Examples

Invalid

1
<table bgcolor="#ffffff"></table>;

code-block.jsx:1:8 lint/nursery/noObsoleteAttributes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The bgcolor attribute on <table> is obsolete.
  
  > 1 │ <table bgcolor="#ffffff"></table>;
      │        ^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Obsolete attributes should no longer be used. Browsers might ignore them or handle them differently from each other.
  
  ℹ Use CSS instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<table cellPadding="5"></table>;

code-block.jsx:1:8 lint/nursery/noObsoleteAttributes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The cellPadding attribute on <table> is obsolete.
  
  > 1 │ <table cellPadding="5"></table>;
      │        ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Obsolete attributes should no longer be used. Browsers might ignore them or handle them differently from each other.
  
  ℹ Use CSS instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<a name="top">Back to top</a>;

code-block.jsx:1:4 lint/nursery/noObsoleteAttributes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The name attribute on <a> is obsolete.
  
  > 1 │ <a name="top">Back to top</a>;
      │    ^^^^^^^^^^
    2 │ 
  
  ℹ Obsolete attributes should no longer be used. Browsers might ignore them or handle them differently from each other.
  
  ℹ Use the id attribute instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<iframe src="/page.html" frameBorder="0"></iframe>;

code-block.jsx:1:26 lint/nursery/noObsoleteAttributes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The frameBorder attribute on <iframe> is obsolete.
  
  > 1 │ <iframe src="/page.html" frameBorder="0"></iframe>;
      │                          ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Obsolete attributes should no longer be used. Browsers might ignore them or handle them differently from each other.
  
  ℹ Use CSS instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<table style={{ backgroundColor: "#ffffff" }}></table>;
2
<a id="top">Back to top</a>;
3
<iframe src="/page.html" style={{ border: 0 }}></iframe>;
4
<input name="email" />;
5
<Table bgcolor="#ffffff" />;
6
<a name={undefined}>Back to top</a>;

Resources

HTML specification: Non-conforming features