noObsoleteAttributes (HTML)

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.

Attribute names are case-insensitive. Elements inside <svg> and custom components in template languages, such as <Table />, are ignored.

Examples

Invalid

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

code-block.html: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
<div align="center">Content</div>

code-block.html:1:6 lint/nursery/noObsoleteAttributes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The align attribute on <div> is obsolete.
  
  > 1 │ <div align="center">Content</div>
      │      ^^^^^^^^^^^^^^
    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.html: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.html: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="background-color: #ffffff"></table>
2
<div style="text-align: center">Content</div>
3
<a id="top">Back to top</a>
4
<iframe src="/page.html" style="border: 0"></iframe>
5
<input name="email" />

Resources

HTML specification: Non-conforming features