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

Теги, которые нужно удалить из кода и заменять на современные аналоги.

Время чтения: 8 мин

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

Что делать, если в вашем проекте встретится один из таких тегов? Есть ли современная замена или альтернатива?

Попробуем разобраться.

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

Разметка текста

Скопировано

`<acronym>` — акронимы и аббревиатуры

Скопировано

Акро́ним — вид аббревиатуры. Акронимы образуются начальными звуками. Фактически, акроним представляет собой слово, являющееся сокращением, которое можно произнести слитно, в отличие от других видов аббревиатур, которые произносят «по буквам», например: СНГ — [эс-эн-гэ], МВД — [эм-вэ-дэ].

Когда использовалось

Скопировано

Для опциональной расшифровки аббревиатуры или целого текста пояснение отображается во всплывающей подсказке при наведении курсора.

Пример

Скопировано

        
          
          <acronym title="Graphics Interchange Format">  GIF</acronym> — устаревший формат графики
          <acronym title="Graphics Interchange Format">
  GIF
</acronym> — устаревший формат графики

Несмотря на то, что слово GIF очень похоже на аббревиатуру, произносят его одним словом «гиф», а не «джи-ай-эф» — даже в английском языке.

Чем заменить

Скопировано

Для <acronym> есть современная альтернатива — <abbr>.

`<blink>` — мигающий текст

Скопировано

Когда использовалось

Скопировано

Для визуального выделения текста, который в результате буквально будет мигать.

Пример

Скопировано

        
          
          <blink>Зачем кому-либо так делать? Выглядит не гуманно.</blink>
          <blink>Зачем кому-либо так делать? Выглядит не гуманно.</blink>

Чем заменить

Скопировано

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

        
          
          blink {  animation: 2s linear infinite condemned_blink_effect;}@keyframes condemned_blink_effect {  0% {    visibility: hidden;  }  50% {    visibility: hidden;  }  100% {    visibility: visible;  }}
          blink {
  animation: 2s linear infinite condemned_blink_effect;
}

@keyframes condemned_blink_effect {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

`` — стилизация текста

Скопировано

Когда использовалось

Скопировано

До полноценной поддержки браузерами стилизации текста с помощью CSS это был единственный способ изменить цвет, шрифт или размер. К сожалению, для вёрстки писем под клиентов, не поддерживающих CSS, это остаётся единственной возможностью изменить внешний вид текста.

Пример

Скопировано

        
          
          Летели два <font size="+1">крокодила</font>.Один — <font color="green">зелёный</font>, а другой — в Африку.
          Летели два <font size="+1">крокодила</font>.
Один — <font color="green">зелёный</font>, а другой — в Африку.

Чем заменить

Скопировано

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

        
          
          h1 {  font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */  font-size: 150%; /* Размер текста */  font-weight: lighter; /* Светлое начертание */}.text_color_green {  color: green; /* Цвет текста */}.text_style_italic {  font-style: oblique; /* Наклонный шрифт */}.text_transform_uppercase {  text-transform: uppercase; /* Все буквы — заглавные */}.text_emphasis {  letter-spacing: .5em; /* Межбуквенный интервал (трекинг) */  word-spacing: 2em; /* Расстояние между словами (ширина пробела) */  text-shadow: 3px 5px 6px #6C9; /* Тень */}
          h1 {
  font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */
  font-size: 150%; /* Размер текста */
  font-weight: lighter; /* Светлое начертание */
}

.text_color_green {
  color: green; /* Цвет текста */
}

.text_style_italic {
  font-style: oblique; /* Наклонный шрифт */
}

.text_transform_uppercase {
  text-transform: uppercase; /* Все буквы — заглавные */
}

.text_emphasis {
  letter-spacing: .5em; /* Межбуквенный интервал (трекинг) */
  word-spacing: 2em; /* Расстояние между словами (ширина пробела) */
  text-shadow: 3px 5px 6px #6C9; /* Тень */
}

`` — неразрывный текст

Скопировано

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

Тег никогда не был частью спецификации W3C, его поддержка — личная инициатива каждого браузера.

Когда использовалось

Скопировано

Хорошим тоном считается использование склеивания союзов и предлогов с последующим словом, единиц измерения.

Пример

Скопировано

        
          
          Современные технологии достигли<nobr>такого уровня…</nobr>кластеризации усилий.
          Современные технологии достигли
<nobr>такого уровня…</nobr>
кластеризации усилий.

Открыть демо в новой вкладке

Чем заменить

Скопировано

Для коротких текстов, когда нужно соединить пару слов или символов, можно использовать неразрывный пробел ( ,   и другие):

        
          
          В&nbsp;вашей корзине товаров на&nbsp;1&thinsp;200&nbsp;₽
          В&nbsp;вашей корзине товаров на&nbsp;1&thinsp;200&nbsp;₽

Для остальных случаев есть соответствующее CSS-свойство:

        
          
          Современные технологии достигли<span style="white-space: nowrap">такого уровня…</span>кластеризации усилий.
          Современные технологии достигли
<span style="white-space: nowrap">такого уровня…</span>
кластеризации усилий.

Для больших объёмов текста проще воспользоваться программами-типографами, которые могут автоматически расставить символы неразрывного пробела, например типограф Артемия Лебедева или типограф Евгения Лепёшкина.

`<strike>` — зачёркнутый текст

Скопировано

Когда использовалось

Скопировано

Для обозначения текста, который потерял свою актуальность, например, изменения цены: «Распродажа: ~~1200~~ 990 ₽»

Пример

Скопировано

        
          
          Распродажа: <strike>1200</strike> 990 ₽
          Распродажа: <strike>1200</strike> 990 ₽

Чем заменить

Скопировано

В HTML5 добавили семантический тег: <del>, который отлично дополняется тегом <ins>, содержащим обновлённую информацию:

        
          
          Распродажа: <del>1200 ₽</del> <ins>990 ₽</ins>
          Распродажа: <del>1200 ₽</del> <ins>990 ₽</ins>

А для ситуации, когда нужно просто зачеркнуть текст, добавили более сокращённую запись: <s>:

        
          
          Список покупок:<ol>  <li><s>Молоко</s></li>  <li><s>Хлеб</s></li>  <li><s>Яйца</s></li>  <li>Сыр</li></ol>
          Список покупок:
<ol>
  <li><s>Молоко</s></li>
  <li><s>Хлеб</s></li>
  <li><s>Яйца</s></li>
  <li>Сыр</li>
</ol>

Список покупок:

~~Молоко~~
~~Хлеб~~
~~Яйца~~
Сыр

Блочные элементы

Скопировано

`<applet>` — встраиваемый Java-апплет

Скопировано

Поддержка этого тега сохранилась только в Internet Explorer и Safari.

Когда использовалось

Скопировано

До заката эпохи Adobe Flash возможности динамического контента в браузере были весьма ограничены. Тег <applet> позволял встроить в страницу целую программу со своим интерфейсом, написанную на Java.

Пример

Скопировано

        
          
          <applet code="game.class" archive="game.zip" height="250" width="350">  <param name="difficulty" value="easy">  <p>Извините, у вас не установлена Java,    или ваш браузер не поддерживает встраиваемые Java-апплеты.</p></applet>
          <applet code="game.class" archive="game.zip" height="250" width="350">
  <param name="difficulty" value="easy">
  <p>Извините, у вас не установлена Java,
    или ваш браузер не поддерживает встраиваемые Java-апплеты.</p>
</applet>

Чем заменить

Скопировано

Современные браузеры поддерживают «встраиваемое содержимое» с помощью тега <object>:

        
          
          <object type="application/pdf"  data="/media/examples/In-CC0.pdf"  width="250"  height="200"></object>
          <object type="application/pdf"
  data="/media/examples/In-CC0.pdf"
  width="250"
  height="200">
</object>

`<bgsound>` — фоновая музыка

Скопировано

Когда использовалось

Скопировано

Для автоматического воспроизведения музыкального файла. В отличие от современного использования встраивания аудио-контента с помощью <embed> или <audio>, не отображает на странице кнопок управления (стоп, пауза, громкость). Такая бесконтрольность допускала злоупотребление этим эффектом. Поддержка тега была реализована только в Internet Explorer.

Пример

Скопировано

        
          
          <bgsound src="sound2.mid" loop="infinite">
          <bgsound src="sound2.mid" loop="infinite">

Чем заменить

Скопировано

Для контролируемого воспроизведения аудиофайлов — <embed> или <audio>.

`<center>` — центрирование контента

Скопировано

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

Когда использовалось

Скопировано

Для выравнивания содержимого по центру родительского блока.

Пример

Скопировано

        
          
          <center>Мама, смотри — я в центре!</center>
          <center>Мама, смотри — я в центре!</center>

Чем заменить

Скопировано

        
          
          <div class="title-center">Мама, смотри — я в центре!</div><div class="parent">  <div class="child">    Этот вложенный блок отцентрирован по горизонтали.  </div></div>
          <div class="title-center">Мама, смотри — я в центре!</div>

<div class="parent">
  <div class="child">
    Этот вложенный блок отцентрирован по горизонтали.
  </div>
</div>

        
          
          .title-center {  text-align: center;}.parent {  width: 500px;  border: solid;}.child {  margin: 0 auto;  width: 400px;  height: 400px;  border: solid;}
          .title-center {
  text-align: center;
}

.parent {
  width: 500px;
  border: solid;
}

.child {
  margin: 0 auto;
  width: 400px;
  height: 400px;
  border: solid;
}

`<marquee>` — бегущая строка

Скопировано

Тег <marquee> позволяет задать область, в которой содержимое будет зациклено двигаться по заданной траектории (горизонтально, вертикально или отражаясь от краёв).

Когда использовалось

Скопировано

Чётких рекомендаций, когда был бы полезен этот приём, нет. Скорее всего, именно поэтому <marquee> был впоследствии удалён из спецификации. Была идея перенести эффект в CSS, но от неё отказались.

Пример

Скопировано

        
          
          <marquee>Этот текст будет двигаться справа налево</marquee><marquee direction="up">Этот текст будет двигаться снизу вверх</marquee><marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">  <marquee behavior="alternate">    Этот текст будет отражаться от стенок  </marquee></marquee>
          <marquee>Этот текст будет двигаться справа налево</marquee>

<marquee direction="up">Этот текст будет двигаться снизу вверх</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    Этот текст будет отражаться от стенок
  </marquee>
</marquee>

Открыть демо в новой вкладке

Чем заменить

Скопировано

Современных аналогов нет, можно сымитировать анимацию с помощью JavaScript или CSS.

        
          
          <div class="marquee">  <div class="marquee__inner" aria-hidden="true">    <span class="marquee__content">Showreel</span>    <span class="marquee__content">Showreel</span>    <span class="marquee__content">Showreel</span>    <span class="marquee__content">Showreel</span>  </div></div>
          <div class="marquee">
  <div class="marquee__inner" aria-hidden="true">
    <span class="marquee__content">Showreel</span>
    <span class="marquee__content">Showreel</span>
    <span class="marquee__content">Showreel</span>
    <span class="marquee__content">Showreel</span>
  </div>
</div>

        
          
          .marquee {  position: relative;  overflow: hidden;  --offset: 20vw;  --move-initial: calc(-25% + var(--offset));  --move-final: calc(-50% + var(--offset));}.marquee__inner {  width: fit-content;  display: flex;  position: relative;  transform: translate3d(var(--move-initial), 0, 0);  animation: marquee 5s linear infinite;  animation-play-state: paused;}.marquee__content {  font-size: 10vw;  padding: 0 2vw;}.marquee:hover .marquee__inner {  animation-play-state: running;}@keyframes marquee {  0% {    transform: translate3d(var(--move-initial), 0, 0);  }  100% {    transform: translate3d(var(--move-final), 0, 0);  }}
          .marquee {
  position: relative;
  overflow: hidden;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
}

.marquee__inner {
  width: fit-content;
  display: flex;
  position: relative;
  transform: translate3d(var(--move-initial), 0, 0);
  animation: marquee 5s linear infinite;
  animation-play-state: paused;
}

.marquee__content {
  font-size: 10vw;
  padding: 0 2vw;
}

.marquee:hover .marquee__inner {
  animation-play-state: running;
}

@keyframes marquee {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }

  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
}

Анимация воспроизводится при наведении курсора или при тапе:

Открыть демо в новой вкладке

Вывод

Скопировано

Авторы спецификаций постоянно ведут работу над улучшением пользовательского и разработческого опыта (UX и DX), потенциально вредные теги (<blink>, <marquee>, <bgsound>) удаляются из спецификации, заменяются на семантические (<del> вместо <strike>) или переносят управление на уровень CSS (, <center>). Некоторые из таких тегов можно встретить в коде и сейчас, но разработчики браузеров не гарантируют, что в скором времени сохранится их поддержка — их лучше заменить на современный аналог или пересмотреть, на сколько целесообразно его использование в принципе.

Разметка текста

<acronym> — акронимы и аббревиатуры

Когда использовалось

Пример

Чем заменить

<blink> — мигающий текст

Когда использовалось

Пример

Чем заменить

<font> — стилизация текста

Когда использовалось

Пример

Чем заменить

<nobr> — неразрывный текст

Когда использовалось

Пример

Чем заменить

<strike> — зачёркнутый текст

Когда использовалось

Пример

Чем заменить

Блочные элементы

<applet> — встраиваемый Java-апплет

Когда использовалось

Пример

Чем заменить

<bgsound> — фоновая музыка

Когда использовалось

Пример

Чем заменить

<center> — центрирование контента

Когда использовалось

Пример

Чем заменить

<marquee> — бегущая строка

Когда использовалось

Пример

Чем заменить

Вывод

Читайте также

font

<div>

CSS-анимации

`<acronym>` — акронимы и аббревиатуры

`<blink>` — мигающий текст

`<font>` — стилизация текста

`<nobr>` — неразрывный текст

`<strike>` — зачёркнутый текст

`<applet>` — встраиваемый Java-апплет

`<bgsound>` — фоновая музыка

`<center>` — центрирование контента

`<marquee>` — бегущая строка

`font`

`<div>`