После того, как мы рассмотрели некоторые крутые вещи, которые может делать CSS, пришло время сделать аналогичное для HTML.
Иногда не верится, что мы можем делать такое, используя лишь HTML.
1. Dropdown с поиском по тексту
2. Окно диалога
3. Полоса прогресса
Стилизовать их — непростая задача, я соглашусь. Но всегда существуют некоторые workarounds, и они прекрасно описаны на сайте CSS Tricks.
4. Раскрыть, скрыть детали
5. Показать соответствующую полю мобильную клавиатуру
6. Добавить простой выбор цвета
7. Выделить текст
8. Создать ссылку на номер телефона
Аналогично ссылкам на email через mailto: мы можем сделать ссылки на номера телефонов в международном формате
<a href="tel:+917272727272">+91-7272727272</a>
9. Показать удаление и вставку текста
10. Отредактировать содержимое страницы
Хотите сделать собственный редактор в браузере? Можно реализовать и это — How to make browser editor with html
Замечание: Не все браузеры поддерживают эти элементы и аттрибуты. Но мы всё равно можем использовать их с прогрессивным улучшением. ?
HTML — ядро любой web страницы, поэтому было бы мудро обратить пристальное внимание на его особенности. Семантическая разметка не только помогает в SEO, но и в доступности.
Если вы встречали и другие крутые вещи, которые может сделать чистый HTML, пишите в комментариях.
Подписывайтесь на меня в Twitter ради новых интересных вещей.
11. Datepicker
Десктоп
Мобильные
<h1>Date picker</h1>
<label>Choose a date: <input type="date"></label>
Проверка совместимости
Не забывайте проверять canisue прежде чем использовать функции из этого поста.
В большинстве случаев в зоне риска оказывался Safari.
