skip to main content

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

html

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

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

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

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

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

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

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

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

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

Пример 🔗

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

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

Чем заменить 🔗

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

<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;
}
}

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

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

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

Пример 🔗

Летели два <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; /* Тень */
}

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

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

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

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

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

Пример 🔗

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

See the Pen <nobr> by doka (@y-doka) on CodePen.

Чем заменить 🔗

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

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

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

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

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

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

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

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

Пример 🔗

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

Чем заменить 🔗

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

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

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

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

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

  1. Молоко
  2. Хлеб
  3. Яйца
  4. Сыр

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

<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>

Чем заменить 🔗

Современные браузеры поддерживают «встраиваемое содержимое» с помощью тега <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">

Чем заменить 🔗

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

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

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

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

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

Пример 🔗

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

Чем заменить 🔗

<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;
}

<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>

See the Pen marquee by doka (@y-doka) on CodePen.

Чем заменить 🔗

Современных аналогов нет, можно сымитировать анимацию с помощью 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>
.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);
}
}

See the Pen marquee fallback by doka (@y-doka) on CodePen.

Вывод 🔗

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

Автор: Роман,