Контент и разметка 2 мин чтения

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

font, center, marquee и другие следы старой вёрстки: почему их пора заменить и чем именно.

Часть тегов исключена из стандарта HTML. Браузеры их пока отображают — из уважения к старым сайтам, — но поддержка не гарантируется, а поведение в разных браузерах уже расходится.

Что чем заменить

Устарело Что делало Замена
<font> Цвет, размер, шрифт текста CSS: color, font-size, font-family
<center> Выравнивание по центру CSS: text-align: center или flex
<big>, <small>* Размер текста CSS: font-size
<strike>, <s>* Зачёркнутый текст <del> для удалённого, CSS text-decoration
<u>* Подчёркивание CSS: text-decoration: underline
<marquee> Бегущая строка CSS-анимация (и лучше вообще без неё)
<blink> Мигание Ничем. Никогда
<frame>, <frameset> Разбиение окна на фреймы Нормальная вёрстка; для встраивания — <iframe>
<applet> Java-апплеты Не существует как задача
<tt> Моноширинный шрифт <code> или CSS font-family: monospace
Атрибуты bgcolor, align, border, cellpadding Оформление CSS

* <small>, <s> и <u> в HTML5 переосмыслены и допустимы, но только в новом смысловом значении (мелкий шрифт для примечаний, зачёркнутое как «более неактуальное»). Как средство оформления они устарели.

Почему это стоит чинить

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

Смешение оформления и содержимого. Стили, разбросанные по разметке, невозможно менять централизованно: смена фирменного цвета превращается в поиск по всем файлам.

Раздутый HTML. Оформление в атрибутах повторяется на каждом элементе и утяжеляет документ.

Доступность. Устаревшие теги не несут смысла для программ экранного доступа. <marquee> вдобавок прямо нарушает рекомендации: движущийся текст нельзя остановить, а это проблема для людей с нарушениями внимания и вестибулярными расстройствами.

Прямого понижения в выдаче за такие теги нет — поисковики оценивают результат, а не способ его получить. Но их наличие обычно означает, что вёрстке пятнадцать лет, и рядом найдутся вещи посерьёзнее: отсутствие адаптивности, таблицы вместо блоков, отсутствующий doctype.

Как найти

  • Пункт аудита «Устаревшие теги» перечисляет найденные теги с количеством вхождений.
  • В консоли браузера:
['font','center','big','strike','marquee','blink','tt','frame']
    .forEach(t => { const n = document.getElementsByTagName(t).length; if (n) console.log(t, n); });
  • Валидатор W3C (validator.w3.org) выдаёт полный список нарушений стандарта, включая устаревшие атрибуты.

С чего начинать замену

Не бросайтесь переписывать сайт целиком. Соберите повторяющееся оформление в CSS-классы и заменяйте по шаблонам: обычно устаревшие теги приходят из одного-двух мест — шапки, подвала или старого блока в шаблоне товара. Правка в одном файле убирает сотни вхождений.

А что с этим на вашем сайте?

Аудит «Кверху» проверяет этот пункт вместе с остальными пятьюдесятью и показывает конкретику: какие страницы затронуты и что именно исправить. Первая полная проверка проекта — бесплатно.

Проверить сайт бесплатно