🦕 7 HTML-привычек, которые выдают в тебе динозавра

Подробные атрибуты тегов <style> и <script>

Браузеры уже очень давно (чуть ли не с 2008 года) способны понять, что в <style> определяются CSS-стили, а в <script> – JavaScript-код. Поэтому нет смысла подробно расписывать атрибуты:

Пишите просто:

Использование JS без реальной необходимости

HTML и CSS постоянно развиваются – теперь с их помощью можно реализовать многое из того, для чего когда-то был необходим JavaScript. Вот так, например, без всякого JS, можно сделать аккордеон:

А в этой статье показано, как без использования JS сделать:

• Всплывающее подменю:

• Табы (вкладки):

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

По одному <header> и <footer> на страницу

Очень многие фронтендеры считают, что <header> и <footer> обозначают шапку и подвал страницы. На самом деле, эти элементы относятся к ближайшему секционирующему элементу, и это означает, что они являются дочерними элементами <article>, <aside>, <nav> и <section>. Поэтому можно (и на самом деле даже нужно) использовать элементы <header> и/или <footer> при создании каждого из таких смысловых разделов на странице:

Использование frameborder="0" для удаления рамки вокруг <iframe>

Атрибут frameborder для элемента <iframe> устарел в те же времена, что и align для выравнивания текста. Вместо этого для управления рамками <iframe> следует использовать CSS-свойство border. Стоит заметить, что при копировании кода для встраивания видео с YouTube или Vimeo до сих пор можно получить <iframe> с атрибутом frameborder="0":

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

Поддержка древних версий IE

Многие фронтендеры до сих пор заботятся о поддержке IE, используя скрипт html5shiv.js:

Однако Microsoft прекратила поддержку IE 11 еще в июне 2022 года. Стало быть, и нам можно о нем забыть.

Беспорядочное использование тегов заголовков

При использовании заголовков (<h1> до <h6>) важно понимать, что их порядок должен соответствовать структуре страницы, а не визуальному дизайну. Основные принципы:

• Один <h1> на странице. Этот тег используется для основного заголовка страницы и должен появляться только один раз на странице.
• Последовательный порядок. Заголовки должны следовать в логическом, последовательном порядке: после <h1> следует <h2>, затем <h3>, и так далее, без пропуска уровней. Например, после <h2> не следует сразу <h4>, а должен следовать <h3>.

Неправильно:

Правильно:

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

Неправильное использование булевых атрибутов

Если булевый атрибут присутствует в теге, он является true, независимо от его значения. Например, если у вас есть атрибут disabled в теге input, он будет считаться true независимо от того, что стоит после него. Для установки булевого атрибута в true достаточно просто указать его имя без значения:

• Неправильно: <input type="text" value="This input is disabled" disabled="1" />
• Правильно: <input type="text" value="This input is disabled" disabled />

В этом примере добавление значения "1" к атрибуту disabled излишне и вызовет ошибку при валидации по стандартам W3C.

Оригинал статьи здесь.

А какие устаревшие HTML-практики ты все еще используешь по привычке? Поделись в комментариях!

Если ты хочешь разобраться, как работает современный веб, и сделать свой первый интернет-магазин, посмотри курс Frontend Basic. Вот что ты получишь:

• Основы HTML, CSS и JavaScript – все, что нужно для старта.
• Практика: шаг за шагом создашь свой первый проект.
• Полезные инструменты, как у профи: Git и GitHub.
• Понимание адаптивного дизайна для любых устройств.
• Первое портфолио, чтобы показать, что ты умеешь.