HTML — это один из фундаментальных строительных блоков Интернета. Но, как и лучшие практики и методы веб-дизайна со временем меняются, так меняется и код, который мы используем. По мере того, как HTML эволюционирует, некоторые его старые элементы становятся устаревшими, в то время как другие части получают новое назначение.
Но создаёт ли это для нас больше проблем? Возможно, было бы лучше начать всё заново, чтобы мы могли убедиться, что все работают с одним и тем же языком, вместо того чтобы пытаться редактировать ненужные или устаревшие элементы?
Проблемы, связанные с удержанием устаревшего HTML
Давайте рассмотрим, что происходит, когда мы изменяем правила HTML со временем и как это влияет на Интернет:
1. Оставлять устаревший HTML рискованно
Независимо от того, устарели ли определённые функции и их нужно удалить, или браузеры полностью прекратили поддержку некоторых тегов, устаревший код в конечном итоге становится проблемой.
Вы можете найти длинный список устаревших элементов HTML на сайте HTML.com.
Многие из этих HTML-тегов и атрибутов были заменены более эффективными стилями CSS. Также есть примеры устаревания HTML из-за того, что функции стали неактуальными (например, фреймы).
Тем не менее, всё ещё существуют сайты, которые содержат устаревший HTML.
В некоторых случаях HTML просто остаётся на другой стороне сайта, не вызывая проблем. Однако если такого неиспользуемого кода накопится достаточно много, дополнительные символы и директивы могут замедлить время обработки сервером и сделать загрузку страниц медленнее, чем обычно.
В других случаях HTML нарушает работу функций на фронтенде сайта. Например, возьмите это предупреждение от Mozilla относительно тега `<nobr>`:
Использование устаревшего кода может создавать непоследовательный и неудовлетворительный опыт для пользователей на фронтенде. И когда все браузеры наконец решат перестать поддерживать какой-либо HTML-тег, пользователи будут сталкиваться с некорректным интерфейсом.
Таким образом, хотя HTML5 и исключил устаревший HTML, который больше не нужен или не полезен, это не мешает некоторым людям продолжать использовать его или оставлять его на старых сайтах.
2. Устаревший код сосредоточен на стиле, а не на семантике
Как я уже упоминал, многие устаревшие элементы HTML были заменены CSS-стилями. И это хорошая новость.
Приведем простой пример...
Моя любимая книга — *«Противостояние»* Стивена Кинга. В первый раз, когда я её прочитал, я не спал *три дня*. К счастью, когда я возвращаюсь к ней каждый год, у меня меньше кошмаров, и я могу лучше оценить её повествование.
В приведённом выше абзаце я использовал тег `<i>` для выделения курсивом нескольких слов.
В ранние дни HTML тег `<i>` использовался для обозначения "курсива" (как и тег `<b>` для "жирного" шрифта). Однако в HTML5 тег `<i>` по-прежнему отображает текст курсивом, но его семантическое значение стало более узким. Теперь он используется для обозначения стилистических изменений, что важно для таких вещей, как названия книг и фильмов, иностранные слова и т.д. Для выделения акцента на тексте теперь используется тег `<em>`.
Сохранение устаревших тегов `<i>` и `<b>` может привести к проблемам.
В приведённом выше примере я выделил курсивом название книги (*«Противостояние»*) и количество бессонных ночей, которые я провёл (*три дня*), с помощью тега `<i>`. Если дизайнер в будущем решит изменить способ оформления литературных или кинематографических ссылок, мой выбор HTML станет для него препятствием.
Поскольку весь мой курсивный текст обозначен с помощью тега `<i>`, стили не могут быть применены к определённому контенту (например, к упоминанию книги). Вместо этого дизайнеру придётся пройтись по коду и исправить его, чтобы он выглядел следующим образом:
Моя любимая книга — *«Противостояние»* Стивена Кинга. В первый раз, когда я её прочитал, я не спал <em>три дня</em>. К счастью, когда я возвращаюсь к ней каждый год, у меня меньше кошмаров, и я могу лучше оценить её повествование.
Это позволит сохранить семантически выделенный курсивом контент, в то время как дизайнер или разработчик сможет настроить стили заголовка книги здесь и на всём сайте. (Хотя, на самом деле, первая фраза, выделенная курсивом, должна быть окружена тегом `<cite>`, так как это было бы более семантически правильно.)
Хотя хорошо, что мы создали правила использования устаревшего HTML, сохранение старого кода может запутать авторов, дизайнеров и других специалистов, знакомых с предыдущим способом форматирования контента. Если мы сбросим HTML, избавимся от старых стилей и создадим единый язык, который будет последовательно использоваться по всему интернету, это избавит нас от лишней работы в будущем.
3. Устаревший код препятствует доступности
Ещё одной важной причиной, по которой перепрофилированный и устаревший HTML представляет проблему, является доступность.
Во-первых, когда вы оставляете устаревший и неподдерживаемый код, это, вероятно, вызовет проблемы для экранных читалок, поисковых систем и браузеров, которые используют HTML для получения информации о содержимом страницы.
Теги заголовков (например, `<h1>`, `<h2>`, `<h3>`) используются не только для видимого разделения больших блоков текста. Теги заголовков и, более конкретно, их иерархия, предоставляют важную информацию о взаимосвязи между темами на странице — именно это воспринимают экранные читалки и поисковые системы.
Поэтому нам нужно быть очень осторожными с кодом, который мы оставляем за кулисами, даже если пользователи на фронтенде его не видят. Давайте рассмотрим пример того, как это может повлиять на доступность:
Есть ли меню *à la carte* или сегодня только *prix fixe*?
Если экранная читалка прочитает это предложение, французские фразы будут озвучены с тем же акцентом, что и любые другие слова, выделенные курсивом на странице.
Именно поэтому HTML5 поощряет использование семантического кода вместо чисто стилистического.
Правильный способ написания HTML в приведённой выше строке будет следующим:
Есть ли меню <i lang="fr">à la carte</i> или сегодня только <i lang="fr">prix fixe</i>?
Есть две причины сделать это:
1. Указать экранным читалкам на изменение языка.
2. Облегчить дизайнерам или разработчикам создание пользовательского стиля для иностранных фраз.
Семантическое кодирование особенно важно для дизайнеров, работающих на многоязычных веб-сайтах.
Как объясняет Консорциум Всемирной паутины (W3C), такие языки, как японский, не используют курсив или жирное выделение для акцента — по крайней мере, не так, как это делают англоговорящие пользователи.
Таким образом, для правильного перевода страницы с английского языка японскому дизайнеру потребуется убрать курсив или жирное выделение и добавить квадратные скобки вокруг слов. Однако если всё закодировано с помощью тегов `<i>` и `<b>`, или имеется смесь тегов `<i>`, `<em>`, `<b>` и `<strong>`, будет очень сложно выполнить замену правильного HTML-кода.
Таким образом, если вас волнуют вопросы доступности или интернационализации, крайне важно использовать правильный HTML.
Заключение
Дело в том, что переписывание правил HTML требует много усилий. И хотя было бы здорово сбросить HTML, я не уверен, что это будет практично.
Всё, что мы действительно можем сделать, это следить за тем, что происходит с языком HTML, удалять устаревший код с наших веб-сайтов, как только он становится устаревшим, и всегда использовать поддерживаемые теги и атрибуты. Играя с устаревшим или перепрофилированным кодом, мы ставим под угрозу опыт пользователей, поэтому лучше потратить время на очистку старого кода при любой возможности.
Если мы все придём к единому мнению по этому вопросу, проблемный устаревший HTML со временем исчезнет с наших веб-сайтов и из нашей памяти.
Обновление HTML и удаление устаревшего кода не только улучшает доступность и производительность сайта, но и положительно влияет на работу серверных систем, таких как MySQL. Оптимизация фронтенда снижает нагрузку на сервер, что особенно важно для хостинга MySQL, где базы данных MySQL играют ключевую роль в обеспечении быстрой и надёжной работы сайта. Избавление от старого HTML кода помогает минимизировать избыточные запросы к базе данных, что улучшает общую производительность и сокращает время отклика сервера.