Halfmoon - интерфейсный фреймворк со встроенным темным режимом и полной настройкой с помощью переменных CSS; отлично подходит для создания информационных панелей и инструментов.

#html #css

Вкладывание тэгов

Всем знаком сайт Can I use(caniuse.com), где можно проверить какая поддержка CSS свойств браузерами.

Еще один не менее полезный ресурс Can I include, где можно проверить, можно ли вкладывать какой-то определенный тэг в другой.

Очень важно, чтобы разметка сайта была валидна!
Поэтому, если есть сомнения, проверьте на данном сайте.

Ссылка на сайт

#html

fetchpriority - HTML атрибут, который позволяет определить приоритет загрузки различных ресурсов. Его можно использовать с тэгами link, img, script и iframe. 

Данный атрибут помогает улучшить производительность сайта, а в частности показатель LCP(Largest Contenful Paint). Основным содержимым для LCP обычно является самый крупный элемент. Этим элементом может быть изображение, видео или просто большой блок текста. И как долго загружается этот контент, влияет на LCP.

Подробно об атрибуте fetchpriority и как его использовать для оптимизации читайте в статье.

Ссылка на статью

#html

<template>

Как часто вы используете тэг <template> в работе?

Элемент <template> предназначен для хранения разметки, невидимой и предназначенной для вставки куда-либо.

Его отличие от обычных тегов в том, что его содержимое обрабатывается особым образом. Оно не только скрыто, но и считается находящимся вообще «вне документа». А при вставке автоматически «оживает», выполняются из него скрипты, начинает проигрываться видео и другое.

Подробнее о его преимуществах и случаях использования читайте в статье.

Ссылка на статью

#html

HTML-элементы, которые никто не использует

В HTML существует масса полезных тэгов, но при этом редко используемых.

Например, <datalist> позволяет добавлять список предложенных вариантов для автозаполнения у элементов ввода. 

Полный список читайте в статье!

Ссылка на статью

#html

CSS Layout Generator - это инструмент для создания верстки страниц или отдельных компонентов.

С помощью него можно строить разнообразные сетки. Нужно выбрать за основу один из шаблонов и настроить его под свои нужды. На выходе готовый HTML и CSS!

Ссылка

#html #css

Meta Tags Generator - это онлайн-инструмент для создания полного списка метатегов HTML для сайта.

Результат включает общие метатеги, open graph, schema.org и метатеги социальных сетей.

Ссылка

#html

Атрибут srcset

Атрибут srcset для тэга <img> используется для подключения картинок разного размера на разных разрешениях экрана. Браузер выбирает нужный вариант и отображает его. 

Но существует проблема, что браузер иногда подключает не ту картинку, которая ожидается. В чем причина рассказывается в статье!

Ссылка

#html

htmx - это библиотека, которая предлагает свежий взгляд на создание динамичного веб-интерфейса за счет использования таких функций, как Ajax и CSS transitions прямо в HTML.

Подробнее о библиотеке и как она работает читайте в статье.

Ссылка

#html

👩‍💻Как использовать html-элемент <dialog>?

В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().

Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.

Ссылка

#html

Скрытые возможности элемента <input>

Элемент <input> в HTML самый интересный.

Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента <input> может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике).

Элемент <input> отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье я опишу не только различные типы <input>, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях.

Ссылка

#html

Почему текст в нижнем регистре сжимается лучше

Буквы в нижнем и верхнем регистре содержат одинаковое количество данных — по 1 байту каждая, поэтому удивительно, что замена заглавных букв на строчные снижает объём данных.

Пример: я взял главную страницу Hacker News и переписал заголовок каждой статьи, капитализировав только первые буквы в предложениях (sentence case) вместо первых букв во всех словах (title case). Это позволило мне снизить размер на 31 байт.

Cсылка

#html

HTML: плохие стороны

Вероятно, вы слышали заявления типа «HTML и так по умолчанию обладает accessibility» или «Не нужно изобретать заново этот абсолютно идеальный элемент управления HTML». Я считаю, что это общие заявления, а не универсальные истины. Веб-разработчикам крайне важно осознавать недостатки платформы, поэтому я решил собрать несколько примеров того, когда у HTML возникают трудности, с точки зрения как accessibility, так и usability.

Ссылка

#html

История HTML. Часть 1. Гипертекст и гипермедиа

Появления языка HTML, обычно датируют концом 80-х — началом 90-х годов двадцатого века. В этот период свет увидели первые идеи связывания удаленных ресурсов посредством гипертекстовых ссылок, и, как следствие, появилась необходимость удобного и простого способа такие ссылки создавать и добавлять в документ. Но как вообще возникли понятие «гипертекст» и «гипермедиа»? В этом статье мы заглянем еще дальше в прошлое и попробуем проследить путь становления этих терминов от самого их зарождения.

Ссылка

#html

Не стоит недооценивать HTML

«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…

В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.

Ссылка

#html

Костыли из 90-х и принцип HTML First

На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML First.

В разных областях информатики применим принцип минимальных привилегий. Среди прочего он означает, что для решения любой задачи следует выбирать самый простой подходящий инструмент. Другими словами, не нужно усложнять решение без необходимости. А самый лучший код — это его отсутствие.

В применении на веб-разработку это означает, что если нам для задачи достаточно базового HTML, то не нужно усложнять решение.

Ссылка

#html

Бесплатный онлайн-справочник по HTML (если вдруг у вас с ним проблемы)

Справочник хорош тем, что показывает всё наглядно: не просто «вот тег <a> делает то-то», но и покажет пример использования тега

Перейти к справочнику

#html