Простые поля для одноразовых кодов. Тайлер Стика показывает, как создать полностью рабочее поле для одноразового пароля (OTP) с помощью одного HTML-элемента — без JavaScript, CSS-хаков и сторонних библиотек. Достаточно атрибутов inputmode="numeric", autocomplete="one-time-code" и pattern="\d{6}", чтобы обеспечить автозаполнение, валидацию и доступность. Всё остальное можно добавить как прогрессивное улучшение. #html #a11y

https://cloudfour.com/thinks/simple-one-time-passcode-inputs/

Полное руководство по <input type="number">. Олли Уильямс о том, как убрать стрелки через CSS, как работают атрибуты step, min, max, и как браузеры обрабатывают десятичные разделители и inputmode. Хотя этот элемент критиковали раньше, например, для полей с номером карты или индексом, многие ошибки доступности уже исправлены. #html #a11y

https://olliewilliams.xyz/blog/guide-to-html-number-input

HTML-атрибут popover на практике. Мануэль Матузович возвращается со свежим видео HTMHell и разбирает новый атрибут popover: режимы auto, manual и hint, позиционирования рядом с кнопкой и управление через showPopover и popovertargetaction для доступных всплывающих элементов. #html #a11y

https://youtu.be/KX8YQW7stzs

Dialog и popover для слоистого UI. Дэвид Херрон рассказывает, как <dialog> и popover с поддержкой Baseline могут заменить самописные модальные окна, обеспечивая доступность, управление фокусом, верхний слой, а также анимированные появления с @starting-style, чтобы не изобретать велосипед. #html #baseline

https://web.dev/articles/baseline-in-action-dialog-popover

Как HTML меняется в ePub. Робин Уиттлтон объясняет, что ePub основан на веб-стандартах, но использует их необычно. В его основе XHTML с жёсткими XML-правилами, пространствами имён и ePub-атрибутами. CSS остаётся знакомым, но ограничен старыми движками и слабой поддержкой современных возможностей. Тулкит Standard Ebooks — хороший старт, если вы хотите создать свою электронную книгу. #html #epub

https://htmhell.dev/adventcalendar/2025/11/

Результаты State of HTML 2025. Опрос под руководством Саши Грифа и при авторстве Лии Веру показал, что разработчики по-прежнему ценят практичные UI-элементы, вроде форм, диалогов и выпадающих меню, выше модных технологий вроде AI и 3D. Основные проблемы — кастомизация и стилизация, хотя поддержка браузеров растёт. #html #survey

https://2025.stateofhtml.com/

IDREF: что это такое и как их использовать. Килиан Валкхоф объясняет, как атрибуты for, form и list создают связи между HTML-элементами, а ARIA IDREF повышают доступность, связывая подписи и элементы. Он подчёркивает важность уникальных ID и тестирования в разных браузерах и инструментах доступности. #html #a11y

https://htmhell.dev/adventcalendar/2025/5/

🛠 Phaser - быстрый фреймворк с открытым исходным кодом для разработки HTML5-игр для настольных компьютеров и мобильных браузеров. Вы можете создавать игры для iOS, Android и различных нативных приложений. Он имеет удобный для разработчиков API с отличной поддержкой и активно разрабатывается и поддерживается. Недавно была выпущена версия 3.0, которая содержит множество новых функций.

🌍 Сайт

Daily Coding #инструменты #HTML

🛠 Toast UI - редактор markdown и WYSIWYG, который позволяет вам легко переключаться между режимами markdown и WYSIWYG во время записи. Он предлагает предварительный просмотр отображаемого HTML-кода в реальном времени, немедленную проверку синтаксических ошибок и синхронизированную прокрутку между режимами markdown и предварительного просмотра. Редактор также поддерживает мощные расширения, такие как средство выбора цвета, блок кода диаграммы, блок кода UML и многое другое.

🌍 Сайт

Daily Coding #инструменты #HTML

Представляем HTML-элемент <geolocation>. В Chrome 144 появился контрол для декларативного запроса геолокации по клику, который заменяет большинство прямых вызовов Geolocation API, уменьшает объём кода и лучше отражает намерение пользователя. Origin trial ранее показали меньше ошибок, больше успешных сценариев и лучшее восстановление после отказа. #html #api

https://developer.chrome.com/blog/geolocation-html-element

🛠 Hover Buttons - набор HTML-кнопок с анимированными эффектами при наведении курсора мыши. Кнопки бывают разных форм и размеров, и есть множество отличных анимаций на выбор. Библиотека создана с использованием SCSS, поэтому вы можете легко удалить ненужные кнопки или изменить стили по своему вкусу.

🌍 Сайт

Daily Coding #инструменты #HTML

Полифил для HTML-элемента switch. Томас Штайнер предлагает полифил, который даёт почти нативный <input type="checkbox" switch> в браузерах помимо Safari: с доступностью, поддержкой высокой контрастности и загрузкой без FOUC-прыжков. #html #polyfill

https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/

Практическое руководство по элементу <img>: от основ до LCP. Джоан Леон разбирает атрибуты srcset и sizes для адаптивных изображений, <picture> с AVIF и WebP, а также loading=lazy, width и height против CLS, decoding и fetchpriority. Отдельно о том, когда стоит добавить preload для LCP-картинок и почему иногда всё-таки нужны CDN. #performance #html

https://joanleon.dev/en/guia-practica-elemento-img/

🛠 Bojler - это стандартное программное обеспечение для электронной почты и руководство по написанию HTML-кода, который будет корректно отображаться в каждом из самых популярных почтовых клиентов. Оно включает в себя систему с 12 столбцами, подобную Bootstrap, большое разнообразие стилизованных компонентов и другие полезные служебные классы.

🌍 Сайт

Daily Coding #инструменты #HTML

Новый мета-тег для поддержки масштабирования текста на мобильных. Мануэль Матузович показывает элемент <meta name="textscale"> — предложение, которое позволяет сайтам учитывать настройки размера текста ОС на мобильных устройствах. Относительные единицы em и rem масштабируются с настройками пользователя, а пиксельные значения остаются без изменений. Пока доступно только в Chrome Canary. Firefox уже реагирует на настройки ОС, но масштабирует весь вьюпорт целиком. #html #a11y

https://youtu.be/XVIgKEOVfVg

Вы не знаете HTML-таблицы. Фрэнк Тейлор выходит за пределы базовых понятий и разбирает терминологию таблиц, API Table Object Model, семантику заголовочных ячеек с атрибутами scope и headers, а также практические паттерны для создания доступных и хорошо структурированных таблиц с <thead>, <tbody>, <tfoot> и хелперами на JavaScript. #html #a11y

https://blog.frankmtaylor.com/2026/03/05/you-dont-know-html-tables/

Неожиданные кастомные селекты. Патрик Броссет создаёт три креативные демки с новым кастомизируемым элементом <select>: изогнутую стопку папок с CSS-трансформациями и sibling-index(), веер игральных карт с anchor positioning и круговой эмодзи-пикер на тригонометрических функциях CSS. Все демки сохраняют доступность и адекватно деградируют в неподдерживающих браузерах. #css #html

https://css-tricks.com/abusing-customizable-selects/

Кастомные элементы с поддержкой форм на практике. Роб Левин делится опытом добавления поддержки Form-Associated Custom Element в библиотеку AgnosticUI с помощью ElementInternals API. Статья описывает две стратегии валидации: делегирование нативным элементам формы и реализацию валидации напрямую, с пошаговыми примерами для input, radio и combobox, включая проблемы изоляции Shadow DOM. #webcomponents #html

https://frontendmasters.com/blog/form-associated-custom-elements-in-practice/

Squarespace и веб-стандарты: как мы помогли добавить ленивую загрузку видео и аудио в HTML. Скотт Джел рассказывает, как инженеры Squarespace предложили loading="lazy" для элементов <video> и <audio>, работали с WHATWG, написали Web Platform Tests и сотрудничали с командами Mozilla, Apple и Chromium, чтобы фича стала официальным стандартом 23 марта 2026 года. #html #performance

https://engineering.squarespace.com/blog/2026/squarespace-and-web-standards-how-we-helped-bring-html-video-and-audio-lazy-loading-to-todays-browsers