Вкладывание тэгов
Всем знаком сайт Can I use(caniuse.com), где можно проверить какая поддержка CSS свойств браузерами.
Еще один не менее полезный ресурс Can I include, где можно проверить, можно ли вкладывать какой-то определенный тэг в другой.
Очень важно, чтобы разметка сайта была валидна!
Поэтому, если есть сомнения, проверьте на данном сайте.
Ссылка на сайт
#html
Всем знаком сайт Can I use(caniuse.com), где можно проверить какая поддержка CSS свойств браузерами.
Еще один не менее полезный ресурс Can I include, где можно проверить, можно ли вкладывать какой-то определенный тэг в другой.
Очень важно, чтобы разметка сайта была валидна!
Поэтому, если есть сомнения, проверьте на данном сайте.
Ссылка на сайт
#html
fetchpriority - HTML атрибут, который позволяет определить приоритет загрузки различных ресурсов. Его можно использовать с тэгами link, img, script и iframe.
Данный атрибут помогает улучшить производительность сайта, а в частности показатель LCP(Largest Contenful Paint). Основным содержимым для LCP обычно является самый крупный элемент. Этим элементом может быть изображение, видео или просто большой блок текста. И как долго загружается этот контент, влияет на LCP.
Подробно об атрибуте fetchpriority и как его использовать для оптимизации читайте в статье.
Ссылка на статью
#html
Данный атрибут помогает улучшить производительность сайта, а в частности показатель LCP(Largest Contenful Paint). Основным содержимым для LCP обычно является самый крупный элемент. Этим элементом может быть изображение, видео или просто большой блок текста. И как долго загружается этот контент, влияет на LCP.
Подробно об атрибуте fetchpriority и как его использовать для оптимизации читайте в статье.
Ссылка на статью
#html
<template>
Как часто вы используете тэг <template> в работе?
Элемент <template> предназначен для хранения разметки, невидимой и предназначенной для вставки куда-либо.
Его отличие от обычных тегов в том, что его содержимое обрабатывается особым образом. Оно не только скрыто, но и считается находящимся вообще «вне документа». А при вставке автоматически «оживает», выполняются из него скрипты, начинает проигрываться видео и другое.
Подробнее о его преимуществах и случаях использования читайте в статье.
Ссылка на статью
#html
Как часто вы используете тэг <template> в работе?
Элемент <template> предназначен для хранения разметки, невидимой и предназначенной для вставки куда-либо.
Его отличие от обычных тегов в том, что его содержимое обрабатывается особым образом. Оно не только скрыто, но и считается находящимся вообще «вне документа». А при вставке автоматически «оживает», выполняются из него скрипты, начинает проигрываться видео и другое.
Подробнее о его преимуществах и случаях использования читайте в статье.
Ссылка на статью
#html
HTML-элементы, которые никто не использует
В HTML существует масса полезных тэгов, но при этом редко используемых.
Например, <datalist> позволяет добавлять список предложенных вариантов для автозаполнения у элементов ввода.
Полный список читайте в статье!
Ссылка на статью
#html
В HTML существует масса полезных тэгов, но при этом редко используемых.
Например, <datalist> позволяет добавлять список предложенных вариантов для автозаполнения у элементов ввода.
Полный список читайте в статье!
Ссылка на статью
#html
Meta Tags Generator - это онлайн-инструмент для создания полного списка метатегов HTML для сайта.
Результат включает общие метатеги, open graph, schema.org и метатеги социальных сетей.
Ссылка
#html
Результат включает общие метатеги, open graph, schema.org и метатеги социальных сетей.
Ссылка
#html
Атрибут srcset
Атрибут srcset для тэга <img> используется для подключения картинок разного размера на разных разрешениях экрана. Браузер выбирает нужный вариант и отображает его.
Но существует проблема, что браузер иногда подключает не ту картинку, которая ожидается. В чем причина рассказывается в статье!
Ссылка
#html
Атрибут srcset для тэга <img> используется для подключения картинок разного размера на разных разрешениях экрана. Браузер выбирает нужный вариант и отображает его.
Но существует проблема, что браузер иногда подключает не ту картинку, которая ожидается. В чем причина рассказывается в статье!
Ссылка
#html
👩💻Как использовать html-элемент <dialog>?
В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().
Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.
Ссылка
#html
В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().
Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.
Ссылка
#html
Скрытые возможности элемента <input>
Элемент <input> в HTML самый интересный.
Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента <input> может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике).
Элемент <input> отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.
В этой статье я опишу не только различные типы <input>, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях.
Ссылка
#html
Элемент <input> в HTML самый интересный.
Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента <input> может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике).
Элемент <input> отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.
В этой статье я опишу не только различные типы <input>, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях.
Ссылка
#html
Почему текст в нижнем регистре сжимается лучше
Буквы в нижнем и верхнем регистре содержат одинаковое количество данных — по 1 байту каждая, поэтому удивительно, что замена заглавных букв на строчные снижает объём данных.
Пример: я взял главную страницу Hacker News и переписал заголовок каждой статьи, капитализировав только первые буквы в предложениях (sentence case) вместо первых букв во всех словах (title case). Это позволило мне снизить размер на 31 байт.
Cсылка
#html
Буквы в нижнем и верхнем регистре содержат одинаковое количество данных — по 1 байту каждая, поэтому удивительно, что замена заглавных букв на строчные снижает объём данных.
Пример: я взял главную страницу Hacker News и переписал заголовок каждой статьи, капитализировав только первые буквы в предложениях (sentence case) вместо первых букв во всех словах (title case). Это позволило мне снизить размер на 31 байт.
Cсылка
#html
HTML: плохие стороны
Вероятно, вы слышали заявления типа «HTML и так по умолчанию обладает accessibility» или «Не нужно изобретать заново этот абсолютно идеальный элемент управления HTML». Я считаю, что это общие заявления, а не универсальные истины. Веб-разработчикам крайне важно осознавать недостатки платформы, поэтому я решил собрать несколько примеров того, когда у HTML возникают трудности, с точки зрения как accessibility, так и usability.
Ссылка
#html
Вероятно, вы слышали заявления типа «HTML и так по умолчанию обладает accessibility» или «Не нужно изобретать заново этот абсолютно идеальный элемент управления HTML». Я считаю, что это общие заявления, а не универсальные истины. Веб-разработчикам крайне важно осознавать недостатки платформы, поэтому я решил собрать несколько примеров того, когда у HTML возникают трудности, с точки зрения как accessibility, так и usability.
Ссылка
#html
История HTML. Часть 1. Гипертекст и гипермедиа
Появления языка HTML, обычно датируют концом 80-х — началом 90-х годов двадцатого века. В этот период свет увидели первые идеи связывания удаленных ресурсов посредством гипертекстовых ссылок, и, как следствие, появилась необходимость удобного и простого способа такие ссылки создавать и добавлять в документ. Но как вообще возникли понятие «гипертекст» и «гипермедиа»? В этом статье мы заглянем еще дальше в прошлое и попробуем проследить путь становления этих терминов от самого их зарождения.
Ссылка
#html
Появления языка HTML, обычно датируют концом 80-х — началом 90-х годов двадцатого века. В этот период свет увидели первые идеи связывания удаленных ресурсов посредством гипертекстовых ссылок, и, как следствие, появилась необходимость удобного и простого способа такие ссылки создавать и добавлять в документ. Но как вообще возникли понятие «гипертекст» и «гипермедиа»? В этом статье мы заглянем еще дальше в прошлое и попробуем проследить путь становления этих терминов от самого их зарождения.
Ссылка
#html
Не стоит недооценивать HTML
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Ссылка
#html
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Ссылка
#html