All rules

Sheath rule

best-practices-no-obsolete-tags

Disallow obsolete HTML elements.
Package
Core
Category
Best Practices
Default severity
warning by default
Auto-fix
Manual fix

#Why

These elements are non-conforming in current HTML. Several also carry no useful semantics for assistive technology. For example, <center> and <font> describe presentation that belongs in CSS, while <acronym> has been replaced by <abbr>.

#Examples

#Bad

<!-- Obsolete presentation elements -->

<center>Centered content</center>

<font color="red">Red text</font>

<big>Large text</big>

<strike>Struck text</strike>

<tt>Monospace text</tt>

<marquee>Scrolling text</marquee>

<blink>Blinking text</blink>



<!-- Obsolete structural elements -->

<frame src="page.html">

<frameset>

    <frame src="nav.html">

</frameset>

<applet code="App.class">

#Good

<!-- Use CSS for styling -->

<div class="text-center">Centered content</div>

<span class="text-red">Red text</span>

<span class="text-large">Large text</span>

<del>Struck text</del>

<code>Monospace text</code>



<!-- Use modern HTML -->

<iframe src="page.html"></iframe>

<nav>Navigation</nav>

#Obsolete Elements

Replace obsolete elements with their current HTML alternatives.

Element Use Instead
<applet> <object> or <embed>
<acronym> <abbr>
<basefont> CSS font properties
<big> CSS font-size
<blink> CSS animations
<center> CSS text-align or flexbox
<font> CSS color, font-family, font-size
<frame>, <frameset>, <noframes> <iframe> or CSS layout
<isindex> <form> with <input>
<marquee> CSS animations
<nobr> CSS white-space: nowrap
<strike> <del> or <s>
<tt> <code> or CSS font-family: monospace

#Options

Use this option when a legacy element must remain temporarily.

Option Type Default Description
allow array [] Tag names (case-insensitive) to exempt from the check 
<?php



'best-practices-no-obsolete-tags' => ['warning', [

    'allow' => [

        'spacer',

    ],

]],

Use allow for custom or framework components whose names overlap obsolete HTML elements. Only exact names are exempted.

#Notes

  • Completely obsolete elements are included
  • Some deprecated elements like <b> and <i> are still valid in HTML5 (with changed semantics)
  • Consider accessibility when replacing obsolete elements

#References

#Related Rules