163 lines
9.0 KiB
Plaintext
163 lines
9.0 KiB
Plaintext
== 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.
|
|
|
|
[frame=all]
|
|
[cols="^1,^1,^1a"]
|
|
|===
|
|
|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
|
|
|
|
[source,html,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
<table>
|
|
<tr>
|
|
<td width="50%">1st cell</td><!-- Noncompliant: 'width' attribute is deprecated -->
|
|
<td width="50%">1st cell</td>
|
|
</tr>
|
|
</table>
|
|
|
|
----
|
|
|
|
==== Compliant solution
|
|
|
|
[source,html,diff-id=1,diff-type=compliant]
|
|
----
|
|
<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, https://www.w3.org/TR/html5-diff[Differences in HTML5]
|
|
* WHATWG, https://html.spec.whatwg.org/multipage/obsolete.html[Obsolete Features]
|
|
* HTML Standard, https://html.spec.whatwg.org/#non-conforming-features[Non-conforming features]
|
|
|
|
ifdef::env-github,rspecator-view[]
|
|
|
|
'''
|
|
== Implementation Specification
|
|
(visible only on this page)
|
|
|
|
=== Message
|
|
|
|
Remove this deprecated "xxx" attribute.
|
|
|
|
|
|
'''
|
|
== Comments And Links
|
|
(visible only on this page)
|
|
|
|
=== on 27 Jun 2014, 14:16:43 Ann Campbell wrote:
|
|
\[~freddy.mallet] not all of these attributes are replaceable with CSS. E.G. summary attribute on table.
|
|
|
|
endif::env-github,rspecator-view[]
|