Неиспользуемые теги

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

Теги заменены стилями CSS

Речь пойдёт о тегах, которые влияют на внешний вид контента — делают текстым жирным (<b>), зачёркнутым (<s>) и т.д. На вопрос о том, как мы должны отображать такие и подобные тексты, нет однозначного ответа. Где-то вы прочитаете, что можно пользоваться этими тегами, а где-то — что они остались в языке для совместимости и в современных сайтах не должны использоваться. Я склоняюсь к мнению, что всё же следует полностью разделять HTML, CSS и JavaScript, поэтому призываю отказаться от тегов, о которых пойдёт речь в этом абзаце, а использовать вместо них стилевые правила CSS, применяя их к тегу <span> и к другим.

Добавим конкретики. У нас есть два способа сделать какой-то текст жирным, и это два концептуально разных подхода. Первый — поместить текст внутрь <b>, который по умолчанию во всех браузерах показывается жирным. Второй — поместить текст в <span>, задать для него класс и правила CSS.

                

                <p>Далеко-далеко за словесными, <b>горами в стране</b> гласных и согласных
живут рыбные тексты. Большой не даже всемогущая, своих правилами имени жизни,
вопроса свою?</p>

<p>Далеко-далеко за словесными, <span class="bold">горами в стране</span> гласных
 и согласных живут рыбные тексты. Большой не даже всемогущая, своих правилами
имени жизни, вопроса свою?</p>

Во втором случае мы прописываем для класса bold аналогичное правило и получаем такой же жирный текст. У этого подхода есть несколько преимуществ перед первым примером. Если нам в дальнейшем понадобится при помощи JavaScript сделать текст вновь обычным, всё, что мы должны сделать — убрать класс, что довольно просто. Если у нас будет тег <b>, то придётся убирать весь тег, а на его место вставлять его текстовое содержимое, это более затратная операция и для браузера, и для разработчика.

Представим, что нам нужно сделать текст не просто жирным, но ещё и зачёркнутым. Вновь есть два решения:

                

                <p>Далеко-далеко за словесными, <b><s>горами в стране</s></b> гласных и согласных живут
 рыбные тексты. Большой не даже всемогущая, своих правилами имени жизни, вопроса свою?</p>

<p>Далеко-далеко за словесными, <span class="bold striked">горами в стране</span> гласных
 и согласных живут рыбные тексты. Большой не даже всемогущая, своих правилами имени
 жизни, вопроса свою?</p>

Мы можем добавить ещё тег <s>, а можем добавить к <span> класс striked, для которого будут описаны соответствующие правила. Как вы можете догадаться, ещё один тег <s> не сделает наш код проще, а изменить его при помощи JavaScript на данном этапе уже становится проблемой. Если мы работаем с классами, то убрать жирное или зачёркнутое отображение не составит труда.

Эти тексты из примера — это не просто выдумка разработчика, или кого бы то ни было. Это так называемые «рыбные» тексты.
Они генерируются редакторами кода. Для генерации рыбного текста, как правило, достаточно открыть html файл в редакторе кода, написать «Lorem» и нажать клавишу TAB. Это создаст рыбный текст на латыни из 30 слов (в Sublime Text 3, в других редакторах длина текста может отличаться). Текст будет начинаться с «Lorem ipsum dolor sit amet». Это автоматически сгенерированный текст, и такие тексты используются повсеместно в разработке.
Дело в том, что, когда дизайнер рисует прототип, а затем дизайн сайта, у него ещё нет текстов, которые будут размещаться на готовом сайте. Поэтому дизайнер наполняет сайт такими рыбными текстами. На момент начала разработки почти всегда этих текстов тоже нет, поэтому разработчик тоже создаёт сайт, состоящий почти полностью из «Lorem ipsum». Только на каком-то этапе готовности сайта в дело вступает копирайтер и пишет увлекательные, продающие тексты.

Основные «команды» Lorem ipsum:

Lorem + TAB — создаст текст на латыни
Lorem40 + TAB — создаст текст на латыни длиной в 40 слов
Loremru + TAB — создаст текст на русском языке
Loremru40 + TAB — создаст текст на русском языке длиной в 40 слов

Имея набор определённых классов, как bold, striked, underlined (подчёркнутый текст) и пр., мы можем присваивать их любым текстам, например целому абзацу, ссылке:

                

                <p class="underlined">Далеко-далеко за словесными, горами в стране гласных и согласных
 живут рыбные тексты. Большой не даже всемогущая, своих правилами имени жизни,
 вопроса свою?</p>

<a href="#" class="underlined">Подробнее о рыбных текстах</a>

Такой подход весьма удобен: если мы хотим сделать какой-либо текст подчёркнутым, нам не нужно оборачивать текст в дополнительные теги <b>, <s>, <u> и пр., а нужно всего лишь добавить класс, и совершенно неважно, к какому тегу мы его добавим.

К тегам, которые предназначены для изменения внешнего вида текста, относятся:
<b> — выделяет текст жирным шрифтом. Эквивалент CSS-правила font-weight: 700.
<i> — выделяет текст курсивным шрифтом. Эквивалент CSS-правила font-style: italic.
<s>,<strike> — отображают зачёркнутый текст. Эквивалент CSS-правила text-decoration: line-through.
<u> — подчёркивает текст линией снизу. Эквивалент CSS-правила text-decoration: underline.
<small> — отображает дополнительный текст к основному. Браузер показывает содержимое тега уменьшенным на 1 условную единицу шрифтом.

                

                <p>
    Для выполнения входа в систему введите свой логин и пароль, а также укажите адрес
 хоста, к которому хотите подключиться. <small>Обратите внимание, что пользователям
 даётся только 3 попытки для установления соединения. </small>
</p>

Как видите, тег <small> обладает предопределённым CSS правилом для размера шрифта (font-size). По этому правилу содержимое тега имеет меньший шрифт, чем его родитель. Коэффициент, на который уменьшается шрифт, равен 1.2. Тег <small> можно указать несколько раз, вкладывая один в другой. В таком случае от вложенности будет зависеть текущий размер шрифта. Так, если у нас текст в <p> будет размером 16px, то текст внутри первого <small> будет в 1.2 раза меньше (13.3px), внутри следующего по вложенности <small> будет ещё в 1.2 раза меньше (11.1px) и т.д.

Эта информация вам, впрочем, нужна исключительно для расширения кругозора, поскольку данный тег не рекомендуется к использованию. Используйте вместо него <span> и дополнительные классы с нужным значением CSS-свойства font-size.

                

                <p>
Для выполнения входа в систему введите свой логин и пароль, а также укажите адрес
хоста, к которому хотите подключиться. <span class="smaller-font">Обратите внимание,
что пользователям даётся только 3 попытки для установления соединения. </span>
</p>

Прочие теги

Хотя причины, по которым следующие теги попали в этот урок, различные, мы их объединяем в этом абзаце, чтобы не создавать слишком уж много заголовков и разделов. Некоторые из них вы вряд ли вообще когда-нибудь встретите в коде, однако, если такое произойдёт, помните, что есть причины, по которым от них отказались.

<hr>
— тег, рисующий горизонтальную линию. Не имеет внутреннего содержимого. Предназначен для тематического разделения контента:

                

                <p>Далеко-далеко за словесными горами, в стране гласных и согласных живут рыбные тексты.
Языкового пор лучше несколько что.</p>
<hr>
<p>Ещё один абзац, но уже не с рыбным текстом, а с иным содержимым по своему смыслу.</p>

На самом деле это довольно популярный тег даже в наши дни, и многие опытные разработчики станут кидать в меня камни за то, что я отнёс его к неиспользуемым тегам. Возможно, они будут правы. Так в чём же дело, спросите вы? Проблема этого тега в том, что он не может иметь содержимого. Мы можем, конечно, создать линию при помощи него и даже стилизовать её нужным нам образом, однако в будущем, если нам потребуется поместить в неё какой-то контент (пока что вам непонятно, для чего, но, поверьте, иногда в этом есть потребность), то как раз в этот момент у нас возникает серёзная проблема. Проблема настолько серьёзная, что нам придётся изменять вёрстку, т.е. менять тег <hr> на что-то более универсальное. Более универсальным является, как можно догадаться, обыкновенный <div class="delimiter"> (delimiter — с англ. разделитель). Мы добавляем его вместо <hr> и стилизуем нужным нам образом. В случае, если потом от нас руководитель или заказчик потребует каких-то анимаций или визуальных эффектов, связанных с этим разделителем, то мы вполне сможем добавить внутрь этого дива всё, что требуется. Именно поэтому <hr> недостаточно универсален и вам лучше от него отказаться, хотя, безусловно, вы ещё встретите его в коде много раз.

<meter>,<progress>
— создают индикатор\шкалу прогресса, например (браузер Google Chrome):

                

                <meter
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
</meter>
<br>
<progress value="70" max="100"></progress>

Думаю, вы можете сами догадаться, для чего могут понадобиться эти теги: для создания индикаторов загрузки, визуального отображения каких-то величин и пр. Кстати, нечто подобное есть и на сайте BabyFrontent. Progress-bar (так называются в веб-разработке подобные элементы-шкалы) в личном кабинете показывает прогресс по накопленным очкам за решение тестов. По мере того, как вы набираете очки, полоска прогресса растёт.

Такие прогресс бары встречаются очень часто на сайтах различных сервисов, где ведутся какие-то балансы и пр. Можно было бы подумать, что эти теги поэтому получили большое распространение, однако это вовсе не так. Дело в том, что данные теги, как и ещё некоторые, нельзя стилизовать при помощи CSS. Точнее, можно, но только частично, так что достичь результата, который нам необходим по дизайну, скорее всего будет невозможно. Кроме того, эти теги в разных браузерах могут выглядеть по-разному, при том отличия будут весьма сильные. По этим двум причинам разработчики уже давно сделали шаг в сторону собственных библиотек, создающих прогресс-бар, кастомные <select> и прочие элементы из обычных <div>, обрабатывающих клики и события выбора пунктов при помощи JavaScript. Вероятно, элементы вроде <meter> ещё очень не скоро получат возможность полноценной стилизации при помощи CSS, поэтому вышеупомянутые библиотеки элементов будут популярны ещё долгие годы.

Ещё раз повторим: вы не должны использовать <meter> и <progress> в коммерческой разработке, как бы вам того ни хотелось. Вместо них используйте созданные как раз для этого библиотеки, либо создавайте свои <div> и стилизуйте их. Если вы хотите почитать больше об этих тегах, смотрите справочник:
<meter> и <progress>.

<menu>,<menuitem>
— теги, предназначенные для создания списков различных команд, которые можно выполнить, например список с кнопками действий в личном кабинете клиента, и т.д. Эти теги не получили распространения, а <menuitem> в настоящий момент запрещён и не поддерживается ни одним современным браузером. Хотя <menu> не запрещён, но он может быть полностью заменён обыкновенным <ul>. Поскольку задумывался <menu> непосредственно для создания меню действий, работающего вместе с <menuitem>, необходимость применять именно <menu> отсутствует. Впрочем, для разнообразия семантики вы можете применять его вместе с <li>.
Страница тега в справочнике.

<dialog>
— представляет собой вспомогательное (модальное) окно, например окно подтверждения действия, информационное и пр. Данный тег поддерживается не всеми браузерами (поддержка только 75%), а потому не должен использоваться в коммерческой разработке. Функционал данного тега легко заменяется обыкновенными стилизованными <div> и JavaScript. Документацию и пример смотрите в
справочнике.

<object>,<param>,<embed>
— как уже было сказано в уроке по мультимедиа, данные теги «жили» только в определённый небольшой промежуток времени. По различным причинам, о которых тоже было сказано, они потеряли актуальность. Весь функционал, что они предлагали, теперь полностью обеспечивают другие, более безопасные, удобные и современные теги. Не используйте <object>,<param>,<embed>!

Ещё раз подробно об истории тегов.

Страница тега <object>

Страница тега <embed>

<param> уже официально перешёл в раздел устаревших и осуждаемых тегов, об этом ниже.

<portal>
— некоторое подобие <iframe>, служит для отображения другого сайта\ресурса внутри документа html. В отличие от <iframe>, с <portal> невозможно взаимодействовать пользователю, поэтому он, по сути, предоставляет всего лишь предпросмотр страницы, указанной в src. Данный тег, хотя официально и не запрещён, не поддерживается ни одним известным браузером и не должен использоваться.
Страница тега в справочнике.

Запрещённые теги

Помимо всех вышеперечисленных, в HTML есть также группа тегов, которые официально, на уровне документации W3C, объявлены устаревшими и не должны использоваться. Таких тегов довольно много, и мы о них, разумеется, говорить не будем. Но вам следует хотя бы раз пробежать глазами их список, чтобы у вас сложилось представление. В дальнейшем, когда вы будете писать свой или анализировать чужой код, вы должны постоянно заглядывать в различные учебники и справочники. Мы уже говорили, что это совершенно нормально в работе разработчика.

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