About This CSS Issue
In earlier versions of HTML (HTML4 and XHTML), it was common to use attributes like align="center", bgcolor="#ff0000", or border="1" directly on elements to control their appearance. HTML5 enforces a clear separation between structure (HTML) and presentation (CSS). These presentational attributes are now considered obsolete, and the HTML specification instructs authors to use CSS for all visual styling.
This matters for several reasons:
- Standards compliance: Using obsolete attributes produces invalid HTML5, which can lead to unpredictable rendering across browsers.
- Maintainability: Scattering styling across HTML attributes makes it harder to update your site’s design. CSS allows you to manage styles from a single location.
- Accessibility: Screen readers and assistive technologies work best with well-structured, standards-compliant HTML. Mixing presentation into markup can confuse these tools.
- Future-proofing: Browsers may eventually drop support for obsolete attributes entirely, breaking your layout.
To fix this issue, identify the obsolete attribute in your HTML, determine the equivalent CSS property, remove the attribute, and apply the CSS rule using a style attribute, an internal <style> block, or an external stylesheet.
Here is a reference of common obsolete attributes and their CSS equivalents:
| Obsolete Attribute | CSS Equivalent |
|---|---|
align="center" |
text-align: center or margin: auto |
bgcolor="#fff" |
background-color: #fff |
border="1" |
border: 1px solid |
cellpadding="10" |
padding: 10px (on td/th) |
cellspacing="5" |
border-spacing: 5px (on table) |
width="500" |
width: 500px |
height="300" |
height: 300px |
valign="top" |
vertical-align: top |
Examples
Obsolete align on a paragraph
❌ Incorrect: Using the obsolete align attribute on a <p> element.
<p align="center">Welcome to my site.</p>
✅ Fixed: Use the CSS text-align property instead.
<p style="text-align: center;">Welcome to my site.</p>
Obsolete bgcolor on a table
❌ Incorrect: Using bgcolor on a <table> element.
<table bgcolor="#f0f0f0">
<tr>
<td>Data</td>
</tr>
</table>
✅ Fixed: Use background-color in CSS.
<table style="background-color: #f0f0f0;">
<tr>
<td>Data</td>
</tr>
</table>
Obsolete cellpadding and cellspacing on a table
❌ Incorrect: Using cellpadding and cellspacing attributes.
<table cellpadding="10" cellspacing="5">
<tr>
<td>Item</td>
<td>Price</td>
</tr>
</table>
✅ Fixed: Use border-spacing on the table and padding on the cells.
<table style="border-spacing: 5px;">
<tr>
<td style="padding: 10px;">Item</td>
<td style="padding: 10px;">Price</td>
</tr>
</table>
Obsolete width on an image
❌ Incorrect (in some contexts): Note that width and height on <img> elements are actually not obsolete — they are valid in HTML5 and recommended for layout stability. However, these attributes are obsolete on elements like <table>, <td>, <th>, and <hr>.
<table width="600">
<tr>
<td>Content</td>
</tr>
</table>
✅ Fixed: Apply width via CSS.
<table style="width: 600px;">
<tr>
<td>Content</td>
</tr>
</table>Using an external stylesheet (preferred approach)
For maintainability, move styles out of inline style attributes and into a stylesheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<style>
.data-table {
width: 600px;
background-color: #f0f0f0;
border-spacing: 5px;
}
.data-table td {
padding: 10px;
}
</style>
</head>
<body>
<table class="data-table">
<tr>
<td>Item</td>
<td>Price</td>
</tr>
</table>
</body>
</html>This approach keeps your HTML clean and semantic while giving you full control over presentation through CSS.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.