12 простых HTML-сниппетов

Пипетка для выбора цвета

Для создания пипетки можно воспользоваться <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.

Прокрутить вверх