org.sonar.l10n.web.rules.Web.S1827.html Maven / Gradle / Ivy
Why is this an issue?
HTML5 is the fifth and current major version of HTML. HTML5 introduced many new elements, attributes, and behaviors. While HTML5 also aimed to be
backward-compatible with common parsing of older versions of HTML, many old attributes were deprecated.
The main reason these attributes were deprecated in HTML5 is to separate the concerns of content structure (HTML) and presentation (CSS). This is a
fundamental principle of modern web design known as the separation of concerns, which provides multiple advantages:
- Maintainability: By separating content and presentation, you can change the look and feel of a website without touching the HTML. You only need
to modify the CSS.
- Reusability: CSS styles can be reused across multiple pages, making it easier to keep a consistent look and feel across an entire website.
- Accessibility: Using CSS for presentation makes it easier to create websites that are accessible to users with disabilities. For example,
screen readers can more easily interpret web content when it’s separated from the presentation.
What is the potential impact?
Deprecated attributes are not guaranteed to be supported by all browsers, especially newer ones. This can lead to inconsistent behavior or
appearance across different browsers.
How to fix it
To ensure the best user experience, deprecated attributes should not be used. This table lists the deprecated attributes this rule is checking for,
and how to fix them.
Attribute
Removed from
Fix
accept
form
Use the accept attribute directly on the input elements instead
align
caption, col, div, embed, h1-h6, hr, iframe,
img, input, legend, object, p, table, tbody,
thead, tfoot, td, th, tr
Use CSS
alink
body
Use CSS
allowtransparency
iframe
Use CSS
archive
object
Use the data and type attributes to invoke plugins
axis
td, th
Use the scope attribute on the relevant th
background
body, table, thead, tbody, tfoot, tr, td,
th
Use CSS
bgcolor
body, table, td, th, tr
Use CSS
border
img (border="0" allowed), object
Use CSS
bordercolor
table
Use CSS
cellpadding
table
Use CSS
cellspacing
table
Use CSS
char
col, tbody, thead, tfoot, td, th, tr
Use CSS
charoff
col, tbody, thead, tfoot, td, th, tr
Use CSS
charset
a, link
Use an HTTP `Content-Type` header on the linked resource instead
classid
object
Use the data and type attributes to invoke plugins
clear
br
Use CSS
code
object
Use the data and type attributes to invoke plugins
codebase
object
Use the data and type attributes to invoke plugins
codetype
object
Use the data and type attributes to invoke plugins
color
hr
Use CSS
compact
dl, ol, ul
Use CSS
coords
a
Use area instead of a for image maps
datafld
a, applet, button, div, fieldset, frame,
iframe, img, input, label, legend, marquee, object,
param, select, span, textarea
Use script and a mechanism such as XMLHttpRequest to populate the page dynamically
dataformatas
button, div, input, label, legend, marquee,
object, option, select, span, table
Use script and a mechanism such as XMLHttpRequest to populate the page dynamically
datapagesize
table
Unnecessary. Omit it altogether
datasrc
a, applet, button, div, frame, iframe, img,
input, label, legend, marquee, object, option,
select, span, table, textarea
Use script and a mechanism such as XMLHttpRequest to populate the page dynamically
declare
object
Repeat the object element completely each time the resource is to be reused
event
script
Use DOM events mechanisms to register event listeners
for
script
Use DOM events mechanisms to register event listeners
frame
table
Use CSS
frameborder
iframe
Use CSS
height
td, th
Use CSS
hspace
embed, iframe, img, input, object
Use CSS
ismap
input
Unnecessary. Omit it altogether
language
script (language="javascript", case insensitive, allowed)
use the type attribute instead
link
body
Use CSS
lowsrc
img
Use a progressive JPEG image (given in the src attribute), instead of using two separate images
marginbottom
body
Use CSS
marginheight
body, iframe
Use CSS
marginleft
body
Use CSS
marginright
body
Use CSS
margintop
body
Use CSS
marginwidth
body, iframe
Use CSS
methods
a, link
Use the HTTP OPTIONS feature instead
name
a (name="[a's element id]" allowed), embed, img, option
Use the id attribute instead
nohref
area
Omitting the href attribute is sufficient; the nohref attribute is unnecessary. Omit it altogether
noshade
hr
Use CSS
nowrap
td, th
Use CSS
profile
head
Unnecessary. Omit it altogether
rules
table
Use CSS
scheme
meta
Use only one scheme per field, or make the scheme declaration part of the value
scope
td
Use th elements for heading cells
scrolling
iframe
Use CSS
shape
a
Use area instead of a for image maps
size
hr
Use CSS
standby
object
Optimize the linked resource so that it loads quickly or, at least, incrementally
summary
table
- Use a
p element before the table
- In the table’s
caption
- Before the table, in a
figcaption in the same figure as the table
target
link
Unnecessary. Omit it altogether
text
body
Use CSS
type
li, param, ul
param element is deprecated. Use the data attribute of the object element to set the URL of the
external resource. Use CSS for li and ul elements
urn
a, link
Specify the preferred persistent identifier using the href attribute
usemap
input
Use the img element for image maps
valign
col, tbody, thead, tfoot, td, th, tr
Use CSS
valuetype
param
param element is deprecated. Use the data attribute of the object element to set the URL of the
external resource
version
html
Unnecessary. Omit it altogether
vlink
body
Use CSS
vspace
embed, iframe, img, input, object
Use CSS
width
col, hr, pre, table, td, th
Use CSS
Code examples
Noncompliant code example
<table>
<tr>
<td width="50%">1st cell</td><!-- Noncompliant: 'width' attribute is deprecated -->
<td width="50%">1st cell</td>
</tr>
</table>
Compliant solution
<style>
.equal-width td { width: 50%; }
</style>
<table class="equal-width">
<tr>
<td>1st cell</td>
<td>2nd cell</td>
</tr>
</table>
Resources
Documentation
- W3C, Differences in HTML5
- WHATWG, Obsolete Features
- HTML Standard, Non-conforming features