Deprecated (устаревшие) теги и атрибуты: чего избегать в современном HTML

🔥 Почему deprecated — это не просто "устаревшее"

HTML эволюционирует, как живой язык. Некоторые теги и атрибуты стали "латинским" веб-разработки — они ещё работают, но их использование может: - Ломать доступность - Ухудшать SEO - Замедлять загрузку - Вызывать ошибки валидации

Пример из прошлого:

<font color="red">Текст</font> <!-- Так делали в 2000-х -->

Сегодня это заменяется CSS:

<p style="color: red;">Текст</p>

🚫 Топ-5 самых опасных устаревших тегов

1. <center> — король выравнивания 90-х

<!-- Плохо -->
<center>Контент</center>

<!-- Хорошо -->
<div style="text-align: center;">Контент</div>

Проблема: Устаревший семантически, не адаптивен для мобильных устройств.

2. <marquee> — анимированный кошмар

<!-- Избегайте этого! -->
<marquee behavior="scroll" direction="left">Бегущая строка</marquee>

Чем заменить: CSS-анимации или JavaScript.

3. <frame> и <frameset> — навигационный ретро-стиль

<!-- Устаревший подход -->
<frameset cols="25%,75%">
  <frame src="menu.html">
  <frame src="content.html">
</frameset>

Современная альтернатива: <iframe> или SPA-архитектура.

⚠️ Атрибуты-призраки: они всё ещё среди нас

border="1" в таблицах

<!-- Устаревший вариант -->
<table border="1">...</table>

<!-- Современный подход -->
<table style="border: 1px solid #000;">...</table>

align и valign

<!-- Так больше не делаем -->
<img src="logo.png" align="right">

<!-- Так правильно -->
<img src="logo.png" style="float: right;">

🛠️ Как проверить свой код на устаревшие элементы

1. W3C Validator — официальный инструмент проверки
   validator.w3.org

2. ESLint с плагином для HTML
   bash npm install eslint-plugin-html

3. VS Code с расширением HTMLHint

💡 Золотое правило модернизации

Каждый раз, когда хочется использовать устаревший тег:

1. Спроси себя: "Есть ли семантическая альтернатива?"
2. Проверь: "Можно ли это сделать через CSS?"
3. Убедись: "Не нарушает ли это доступность?"

Пример трансформации:

<!-- Было -->
<strike>текст</strike>

<!-- Стало -->
<del>текст</del> <!-- Семантически корректно! -->