Хабрахабр

[Перевод] HTML — это и есть веб

Что нынче с HTML во фронтенде? В последнее время я разговаривал со многими разработчиками. Похоже, что некоторые даже не разбираются в HTML. В смысле, кое-что они понимают. Они понимают, что такое div и что такое span, и когда всё выглядит хорошо и работает по щелчку, им этого хватает. До такой степени, что многие на вопрос о HTML отвечают: «О, да я сейчас всё делаю в React или Vue». Но на самом деле не имеет значения, что вы пишете только Javascript. Если вы разрабатываете веб-сайты, то HTML — это самое главное для вас. Это и есть веб.

Это UI и UX. Речь о том, что потребляется пользователем. В порядке убывания важности: HTML, CSS и поведение (которое может быть обеспечено Javascript — а может и нет). Вот весь пакет.

Наименьший общий знаменатель Сети. Я вижу проблему внизу этой технологической пирамиды. Ритм-группа. Основа. Это HTML. Савоярди всех десертов веба. Любой компонент, будь то шаблон блога, новостной сайт, панель маркетинговой статистики или регистрационная формы — это часть документа. И мне всё больше кажется, что целый пласт фронтенд-инженеров не знают или не понимают главной технологии фронтенда.
Веб-страница — это документ. В интернете речь идёт не только о визуальных элементах или архитектуре, что предоставляет ваша платформа. У документов есть структура. Заголовки должны быть заголовками, списки должны быть списками, кнопки должны быть кнопками, а таблицы должны быть таблицами. Речь идёт о выборе семантически правильных элементов, чтобы ваша веб-страница, компонент, что угодно, была правильно структурно отформатирована. Это зависит от вас, но это определённо должен быть заголовок, и я могу с вами подраться, если сделаете его как div. Вы можете стилизовать их (в значительной степени), как вам нравится — заголовок не обязан быть большим и жирным с отступом внизу.

Я не считал, но вполне уверен, что там всего около 116 элементов, и большинство вам никогда не понадобится. HTML ведь не так трудно выучить, особенно если вы уже знаете JavaScript-фреймворки. Почему бы не выучить их?

Я занимаюсь HTML и CSS, поэтому мне легко призывать всех выучить то, что я уже знаю (для записи, я не знаю всего — у нас в офисе по-прежнему идут горячие дебаты, как лучше всего пометить определённый компонент). Я из тех ребят, которые работают на самом краю фронтенда. Если вы пишете код, который что-то отображает в браузере, то это однозначно ваша работа. Дело не в том, что моя работа важнее вашей.

Если вы не считаете важной семантическую структуру вашей веб-страницы или приложения, по сути, вы говорите: «Ну, у меня всё работает, можно выпускать». Речь идёт о юзабилити и доступности. Поисковые системы должны читать ваш контент, а не наслаждаться стремительными анимациями или причудливыми градиентами. Не думаю, что Javascript здесь достаточно, как и CSS. Пользователи без мыши должны работать с вашим сайтом. Скрин-ридер должен читать ваш контент. Все эти технологии должны воспринимать содержимое как цельный контент, а не просто строки текста, завёрнутые в бессмысленные теги. Кто знает, какая технология будет следующей и как она воспримет ваше приложение, но готов поспорить на последний биткоин, что ей наверняка поможет возможность легко читать, анализировать и перемещаться по контенту. Сделайте всё div'ами — и им придётся чертовски потрудиться, чтобы распознать такие вещи. Они должны видеть, что такое таблица и как её представить, что такое список и как его представить, что такое кнопка и что такое флажок.

Я просто пишу шаблоны .jsx» «Но мой фреймворк берёт всё на себя.

Нет. Напишите правильный HTML в своём JSX. Вы можете это сделать. Просто потому что вы используете React или Vue или что-то ещё, вы не обязаны всё писать div'ами. Не обязаны.

«Эта библиотека везде добавляет атрибуты WAI-Aria, так что с доступностью всё в порядке»

Отлично. Если бы вы написали правильный HTML, большинство этих атрибутов вообще не понадобилось бы. Вы бесплатно получаете целую кучу функций accessibility, просто используя реальный button вместо div со слушателем событий onClick. БЕСПЛАТНО. Это доступность, производительность и удобство для пользователя, бесплатно. БЕСПЛАТНО!

Если их не соблюдать, это медленно (на самом деле не так медленно) ломает веб. Это действительно важные вещи. Если вы называете себя фронтенд-инженером, то ваша ответственность — узнать и использовать основы веба, общие для всех браузеров, платформ, устройств или бытовых приборов, которые могут получить доступ к интернету. По крайней мере, делает его менее доступным для людей, которые будут использовать ваш продукт.

Сделайте интернет лучше, ответственно подойдите к разработке. Пожалуйста, сделайте это. В Сети достаточно ресурсов, которые могут помочь, вот несколько для начала:

  • Узнайте, как разметить документ в HTML. Попробуйте простые мысленные упражнения, когда смотрите на концертный плакат или газетную страницу — и представляете, как она будет структурирована в HTML. Если есть время, напишите этот HTML. Используйте эти знания в повседневной работе.
  • MDN — отличный ресурс с блогами, учебниками и полезными ссылками.
  • Обратитесь к людям в сообществе. Читайте блоги (например, недавний пост Энди Белла об использовании семантического HTML) и смотрите видео.
  • Когда я учился, просмотр исходников был ещё полезен. Мы коллективно сломали это для нынешнего и будущих поколений, но могу впечатлить вас мощью «Инструментов разработчика» в браузере
  • Узнайте, как работают в вебе ассистивные технологии
  • Посмотрите на спецификации HTML или даже просто на список HTML-элементов и примеры их использования
  • Если вы работаете в команде, обсудите разметку. Реально поспорьте, будет правильно вставить какой-то элемент в виде table или dl (Description List Element, MDN). Будет очень весело, обещаю.
  • Узнайте, кто в вашей команде лучший знаток HTML, и попросите его просмотреть ваш код. Если это я, всегда рад поговорить.
Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть