Вы наверняка знакомы с базовыми HTML-тегами: p, a или img. А слышали ли вы когда-нибудь о progress или details? На самом деле у HTML гораздо больше возможностей, чем кажется, и некоторые теги умеют по-настоящему удивлять.
Рассказываю, как простые и неочевидные HTML-теги могут существенно упростить разработку современных сайтов и почему их стоит попробовать прямо сегодня.
HTML умеет работать с медиа — изображениями, аудио, видео — уже давно. Раньше для проигрывания видео и музыки нужны были сторонние плагины, например Flash. Всё изменил стандарт HTML5: теперь audio и video работают «из коробки» в браузере и становятся только функциональнее.
<img width="825" height="209" loading="lazy" decoding="async" alt="HTML-элемент
Современный audio-плеер смотрится лаконично и удобно: есть кнопки «пауза/воспроизведение», шкала времени, индикатор прогресса и управление громкостью. Внешний вид зависит от браузера — например, Chrome добавляет отдельную кнопку для выключения звука. Такой плеер легко встроить без усилий, а при необходимости — настроить дизайн под свой сайт.
Плюс в том, что этот тег работает практически во всех браузерах и позволяет добавить звук за пару минут. Если нужен сложный функционал — подключайте JavaScript, но в большинстве случаев стандартных возможностей хватит с головой.
HTML — декларативный язык: он отвечает за содержание, а не за точную отрисовку. Для оформления есть CSS. Но если нужна работа с пикселями напрямую — рисование, графика, спецэффекты — пригодится тег canvas. С его помощью можно выводить любую графику, рисовать фигуры и даже делать игры прямо в браузере.
Но использовать canvas для вывода текста или стандартных интерфейсных элементов — не лучшая идея. Это инструмент для задач, где нужен тотальный контроль над картинкой: визуализации, графики, мини-игры или уникальные визуальные эффекты.
Лайфхак: если кликнуть правой кнопкой по canvas в браузере, можно сохранить получившееся изображение как обычную картинку.
Малоизвестный, но очень полезный тег, который добавляет подсказки и автодополнение для отдельных полей форм. Если связать его с текстовым полем, пользователь получит выпадающий список готовых вариантов — никаких JS-библиотек и сложных скриптов не потребуется!
Принцип простой: создаёте datalist с нужными значениями и связываете его с полем ввода через id.
На этом всё не заканчивается: datalist работает и с другими инпутами, например с выбором цвета — браузер предложит сразу несколько рекомендуемых оттенков.
Справедливости ради: поддержка datalist разная в зависимости от браузера, поэтому желательно протестировать работу формы на разных устройствах. Однако, если datalist не поддерживается, поле ввода всё равно останется рабочим.
details — очень мощный тег, о котором часто забывают. С его помощью можно скрывать и показывать содержимое по клику, создавать аккордеоны и выпадающие разделы без JS — иногда достаточно минимум CSS для красоты.
Этот тег отлично подходит для раскрываемых разделов, FAQ, пояснений, тестовых вопросов, а при желании — и для реализации вкладок.
Использование до предела простое: помещаете то, что хотите скрыть, внутрь details. Чтобы стилизовать заголовок, добавьте тег summary.
Тег mark существует уже давно, но до сих пор используется не так широко, как мог бы. Он выделяет нужные фрагменты текста жёлтым фоном — словно вы их подчеркнули маркером.
По умолчанию браузеры подсвечивают mark жёлтым, так что важные слова и результаты поиска сразу бросаются в глаза.
mark удобно использовать для подсказок, выделения изменений, сравнения вариантов, создания ярких акцентов или отображения результатов поиска прямо в тексте.
Отдельно хочется отметить теги, которые позволяют обойтись без громоздких JS-виджетов и сделать всё стандартными средствами. progress — как раз такой: с его помощью за пару строк можно добавить аккуратный прогресс-бар, чтобы показывать ход загрузки или выполнения задачи прямо на сайте.
Значение можно задавать диапазоном от 0 до 1 или с помощью максимального и текущего числового значения.
Если убрать параметр значения, браузер автоматически покажет анимацию «бесконечной» загрузки — например, когда мы не знаем статус загрузки.
Многие думают, что picture — просто оболочка для img, но это не так. Его главная задача — делать изображения действительно адаптивными для любых устройств, экранов и ситуаций.
Подпишитесь на рассылку — делюсь фишками HTML, о которых знают только профи!
Внешне отличий может и не быть, но за кулисами picture автоматически предоставляет браузеру картинку подходящего размера, разрешения или даже формата (например, WebP или JPEG), в зависимости от характеристик устройства, плотности пикселей, темы оформления и других критериев.
Внутри picture размещаете несколько тегов source — в каждом прописываете условия, при которых нужна та или иная версия изображения. img служит страховкой, если никакие условия не сработали.
Настроить picture чуть сложнее, чем обычный img, но так вы экономите время и силы на поддержку мобильных, планшетных и десктоп-версий сайта.
В заключение — один из самых продвинутых HTML-тегов для динамических страниц. Работает в паре с JavaScript и делает работу с повторяющимися блоками куда проще.
Как видно из названия, template — это контейнер, в котором вы храните «шаблонную» разметку. Сами блоки невидимы для пользователя, но уже присутствуют в DOM-дереве. Благодаря этому можно быстро создавать новые элементы на лету.
Без template пришлось бы программно создавать элементы (createElement, createTextNode, appendChild) или использовать менее безопасный innerHTML. С template достаточно один раз прописать всю разметку, а затем клонировать её методом clone и вставлять в DOM с помощью importNode. Просто, быстро и безопасно!
Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!
Премиум подписка — это доступ к эксклюзивным материалам, чтение канала без рекламы, возможность предлагать темы для статей и даже заказывать индивидуальные обзоры/исследования по своим запросам!
Подробнее о том, какие преимущества вы получите с премиум подпиской, можно узнать здесь
Также подписывайтесь на нас в:
- Telegram: https://t.me/gergenshin
- Youtube: https://www.youtube.com/@gergenshin
- Яндекс Дзен: https://dzen.ru/gergen
- Официальный сайт: https://www-genshin.ru
