Пипетка для выбора цвета
Для создания пипетки можно воспользоваться <input type="color">. А вот создание подобного функционала с нуля отнимет у вас много времени.
Цитата
При написании статей может возникнуть желание выделить свои любимые цитаты.
Это можно сделать при помощи тега <blockquote>. Добавьте собственные стили, и получите красивый элемент, выделяющийся на фоне остального текста.
Аудиоплеер
Написание собственного аудиоплеера с нуля — нетривиальная задача. Но вы можете использовать встроенный тег <audio>. Он дает базовый функционал для проигрывания ваших аудиофайлов.
Видеоплеер
На сайтах также часто используется видео. Опять же, нельзя просто включить ссылку на видеофайл в свой HTML-код и рассчитывать, что видео станет проигрываться.
Для воспроизведения видео применяется встроенный тег <video>.
Аккордеон
Иногда вам может быть нужно спрятать часть контента и дать возможность пользователю открывать его самостоятельно. Такая необходимость может возникнуть, например, чтобы сэкономить место в зоне просмотра.
Это можно сделать при помощи чистого HTML, а именно — тега <details>.
Выбор даты
Работа с датами — одна из наиболее частых причин, по которым разработчики начинают подыскивать внешнюю библиотеку.
HTML предоставляет тег <input type="date">. Он обеспечит вам возможность выбирать дату при помощи кликов. Интерфейс получится довольно приятный.
Ползунок
Ползунок — распространенный компонент для получения пользовательского инпута в определенном числовом диапазоне.
Чтобы получить полностью функциональный ползунок, используйте <input type="range">. При этом можно установить минимальное, максимальное и текущее значение.
Редактор контента
Для редактирования контента не обязательно использовать поля input или textarea и устанавливать дефолтные значения для них.
Вместо этого можно использовать атрибут contenteditable. Таким образом можно сделать редактируемым контент div (например).
Тег picture
Для улучшения производительности и UI/UX вы можете захотеть отображать на странице разные картинки в зависимости от размеров экранов.
Вместо использования дефолтного тега <img>, определения зоны просмотра и создания метода для переключения между картинками, можно просто использовать встроенный тег <picture>.
Индикатор выполнения
Тег <progress> позволяет вывести на экран прогресс выполнения задачи.
Вы можете использовать этот тег в разных сценариях: для показа прогресса загрузки / передачи файла или инсталляции чего-либо.
Выпадающий список
Бывает, нужно получить от пользователя input путем выбора из нескольких доступных вариантов. Вместо того чтобы перечислять все доступные опции на экране, можно поместить их в выпадающий список.
Использование тега <datalist> позволит пользователям выбирать опции из списка, а также вводить собственные значения.
Контекстное окно — подсказка
Если вам нужно дать подробное описание чего-либо, можно добавить всплывающее окно. В HTML предусмотрена такая функция: нужно использовать атрибут title.
