Skip to content
Biome
Docs Enterprise Playground
Blog

noObsoleteAttributes (HTML)

Summary

Section titled β€œSummary”

How to configure

Section titled β€œHow to configure”
biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "noObsoleteAttributes": "error"
      }
    }
  }
}

Description

Section titled β€œ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

Section titled β€œExamples”

Invalid

Section titled β€œInvalid”
<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.
  
<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.
  
<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.
  
<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

Section titled β€œValid”
<table style="background-color: #ffffff"></table>
<div style="text-align: center">Content</div>
<a id="top">Back to top</a>
<iframe src="/page.html" style="border: 0"></iframe>
<input name="email" />

Resources

Section titled β€œResources”

See Also

Section titled β€œSee Also”
  • To disallow obsolete elements, such as <font> and <center>, see noObsoleteTags.
Section titled β€œRelated links”

Sponsored by

Copyright (c) 2023-present Biome Developers and Contributors.