Устаревшие атрибуты HTML
Список устаревших атрибутов HTML с указанием тегов, описанием и современными CSS-свойствами для замены, а также примерами миграции.
Устаревший атрибут HTML — это атрибут, который спецификация пометила как вышедший из употребления и не рекомендует использовать. Большинство атрибутов на этой странице были презентационными — они управляли тем, как выглядит контент (цвет, размер, выравнивание, отступы). Когда HTML5 пришёл на смену HTML 4.01, спецификация намеренно перенесла ответственность за оформление из HTML в CSS, чтобы разметка описывала структуру, а таблицы стилей — внешний вид.
Почему эти атрибуты были исключены
В эпоху HTML4 было принято писать <td bgcolor="#ff0000"> или <font size="5"> прямо в разметке. HTML5 убрал их, потому что смешение представления с HTML несёт реальные издержки:
- Разделение обязанностей. Стили находятся в CSS, поэтому одно правило может изменить оформление каждой ячейки, вместо того чтобы повторять атрибут на каждом теге.
- Удобство сопровождения. Изменение цвета на всём сайте означает правку одной таблицы стилей, а не поиск сотен встроенных атрибутов.
- Валидация. Валидатор разметки W3C и HTML-линтеры сообщают об устаревших атрибутах как об ошибках или предупреждениях, поэтому они не проходят современные проверки сборки и CI.
- Перспективность. Браузеры всё ещё обрабатывают большинство из них через устаревшие правила разбора, поэтому страница, использующая их, обычно выглядит нормально сегодня. Риск состоит не в немедленной поломке — а в том, что атрибут больше не является частью спецификации, и поддержка может быть прекращена в будущем.
Коротко говоря: устаревшие атрибуты, как правило, всё ещё работают, но их следует мигрировать на CSS. В столбце «Замена» ниже указано, какое свойство использовать.
Устаревший — не то же самое, что удалённый (obsolete). Устаревший атрибут не рекомендован, но браузеры его, как правило, всё ещё разбирают. Удалённая функция полностью исключена из спецификации — например, basefont здесь относится к полностью устаревшему элементу <basefont>, который современные браузеры могут игнорировать. Всё, что есть на этой странице, следует заменить, а удалённые функции могут уже ничего не делать.
До и после: замена устаревшего атрибута на CSS
Шаблон миграции всегда один и тот же — удалить презентационный атрибут и перенести его смысл в правило CSS. Например, красная ячейка таблицы:
<!-- Deprecated: presentation baked into the markup -->
<td bgcolor="#ff0000">Sale</td>
<!-- Modern: structure in HTML, color in CSS -->
<td class="sale">Sale</td>.sale {
background-color: #ff0000;
}Ещё несколько распространённых преобразований рядом:
<!-- align on a paragraph -->
<p align="center">Hello</p> → <p class="centered">Hello</p>
<!-- width/height on an image's wrapper, spacing around an image -->
<img src="logo.png" hspace="10" vspace="10"> → <img src="logo.png" class="spaced">
<!-- text color on the page body -->
<body text="#333333"> → <body> (styled in CSS).centered { text-align: center; }
.spaced { margin: 10px; }
body { color: #333333; }Список устаревших атрибутов HTML
Приведённые ниже атрибуты устарели в указанных тегах и должны быть заменены свойством, показанным в столбце Замена.
| Атрибуты | Описание | Устарел в | Замена |
|---|---|---|---|
| align | Задаёт выравнивание элемента | <caption>, <img>, <table>, <hr>, <div>, <h1>-<h6>, <p> | CSS-свойства text-align, float и vertical-align |
| alink | Задаёт цвет активной ссылки в документе | <body> | Псевдокласс CSS active |
| background | Задаёт фоновое изображение | <body> | CSS-свойство background-image |
| bgcolor | Задаёт цвет фона | <body>, <table>, <tr>, <td>, <th> | CSS-свойство background-color |
| border | Задаёт ширину рамки | <img>, <object> | CSS-свойство border-width |
| clear | Отменяет выравнивание по правому или левому краю | <br> | CSS-свойство clear |
| compact | Задаёт, что список должен отображаться меньше обычного | <ol>, <ul> | CSS-свойства font-size, margin и line-height для более компактного списка |
| height | Задаёт высоту элемента | <table> | CSS-свойство height |
| hspace | Задаёт пространство или отступ слева и справа от элемента | <img>, <object> | CSS-свойство padding |
| language | Задаёт язык сценария | <script> | Атрибут type |
| link | Задаёт цвет ссылок по умолчанию | <body> | Псевдокласс CSS link |
| noshade | Задаёт, что горизонтальная линия должна отображаться одним сплошным цветом (без тени) | <hr> | CSS-свойство border-style |
| nowrap | Задаёт, что текст не должен переноситься внутри ячейки таблицы | <td>, <th> | CSS-свойство white-space |
| size | Задаёт начальную ширину поля ввода и количество видимых строк элемента select | <basefont>, <font>, <hr> | CSS-свойство width |
| text | Задаёт цвет текста | <body> | CSS-свойство color |
| type | Задаёт тип списка | <li> | CSS-свойство list-style-type |
| vlink | Задаёт цвет посещённых ссылок | <body> | Псевдокласс CSS visited |
| valign | Задаёт вертикальное выравнивание содержимого ячейки | <td>, <th>, <tr> | CSS-свойство vertical-align |
| vspace | Задаёт пространство или отступ выше или ниже элемента | <img>,<object> | CSS-свойство padding |
| width | Задаёт ширину элемента | <hr>,<pre>,<td>,<th> | CSS-свойство width |
Не всё, что выглядит «старым», является устаревшим. Атрибут start у <ol> (задающий начальный номер) и атрибут value у <li> (задающий номер конкретного элемента) по-прежнему действительны в HTML5 — они влияют на семантику списка, а не только на его внешний вид, поэтому заменять их на CSS не нужно.
Что дальше
- Смотрите полный обзор HTML-атрибутов, чтобы узнать, как работают атрибуты и какие из них актуальны.
- Только начинаете переносить стили в таблицы стилей? Начните с CSS-синтаксиса и Введения в CSS.