Устаревшие теги HTML

В этой главе объясняется, какие теги HTML считаются устаревшими, почему они вышли из употребления и что использовать вместо них. Если вы работаете со старой разметкой или скопировали фрагмент из устаревшего руководства — эта глава поможет найти современную замену.

Почему теги HTML устаревают

У большинства устаревших тегов одна общая причина: они смешивают представление (то, как выглядит контент) со структурой (то, что означает контент). В ранних версиях HTML были теги вроде <font>, <center> и <big>, которые управляли цветами, выравниванием и размерами непосредственно в разметке. Такой подход плохо масштабируется: чтобы изменить внешний вид сайта, приходилось редактировать каждую страницу вручную.

Современная веб-разработка следует принципу разделения ответственности: HTML описывает структуру и смысл контента, а CSS отвечает за всё оформление. Это делает страницы удобнее в сопровождении, легче при загрузке и гибче при изменении стилей. Кроме того, это улучшает доступность — программы чтения с экрана и другие вспомогательные технологии опираются на осмысленную, семантическую разметку, а не на визуальные приёмы. Для более полного понимания современного, семантического подхода см. Семантические элементы в HTML5 и введение в HTML5.

Устаревшие и запрещённые теги

Эти два понятия часто путают, но они не одинаковы:

• Устаревший (deprecated) — тег по-прежнему допустим, большинство браузеров его отображают, однако его использование не рекомендуется. В будущем он может быть удалён.
• Запрещённый (obsolete) — спецификация HTML5 указывает, что этот тег не должен использоваться. Браузеры могут продолжать его отображать только для обратной совместимости, но писать новую разметку с ним нельзя.

До и после: замена устаревшего тега

Классический пример — тег <font>, который задавал цвет, размер и гарнитуру шрифта непосредственно в разметке. Ниже показан старый способ рядом с его CSS-эквивалентом.

Устаревший подход — представление в HTML:

<font color="red" size="5" face="Arial">Important notice</font>

Современный подход — структура плюс CSS:

<p class="notice">Important notice</p>

.notice {
  color: red;
  font-size: 1.5rem;
  font-family: Arial, sans-serif;
}

Во втором варианте то, чем является текст (абзац-уведомление), отделено от того, как он выглядит. Вы можете переоформить каждый элемент .notice на сайте, отредактировав одно CSS-правило. Подробнее — на страницах CSS font и text-align.

Замечания о доступности

Некоторые устаревшие теги не рекомендуются именно потому, что они создают барьеры для пользователей:

• <blink> и <marquee> создают мигающий или движущийся текст. Движение и мигание отвлекают многих читателей, могут сделать текст нечитаемым для людей с когнитивными особенностями или нарушениями внимания, а быстрое мигание способно даже вызвать припадок у пользователей с фотосенситивной эпилепсией. Если анимация действительно необходима, используйте CSS animation — и уважайте пользовательскую настройку prefers-reduced-motion, чтобы её можно было отключить.
• <acronym> был заменён тегом <abbr>, потому что различие между «акронимом» и «аббревиатурой» было запутанным и непоследовательным. Единый элемент <abbr> охватывает оба случая, а вспомогательные технологии могут зачитывать пользователям расширенный текст из атрибута title.

Список устаревших тегов HTML

Практика

Следующие шаги

Теперь, зная, чего следует избегать, изучите современные, семантически выверенные альтернативы в разделах HTML Elements и Семантические элементы в HTML5, а затем перенесите всё визуальное оформление в CSS.