This media is not supported in your browser
VIEW IN TELEGRAM
Атрибут poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Если атрибут poster не указан, браузер постарается отобразить первый кадр видео
➡️ @FrontendPortal | #HTML
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Если атрибут poster не указан, браузер постарается отобразить первый кадр видео
Please open Telegram to view this post
VIEW IN TELEGRAM
👍59🔥8👨💻4
Разделительные линии между option
А вы знали, что теперь вы можете добавлять элементы <hr> между элементами <option> внутри <select> для создания визуального разделения
Эта функция доступна в последних версиях всех основных браузеров, но может не работать в старых
Если вам нужна определенная группировка, с именами групп, используйте <optgroup>
➡️ @FrontendPortal | #HTML
А вы знали, что теперь вы можете добавлять элементы <hr> между элементами <option> внутри <select> для создания визуального разделения
Эта функция доступна в последних версиях всех основных браузеров, но может не работать в старых
Если вам нужна определенная группировка, с именами групп, используйте <optgroup>
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍54❤10🤯2
This media is not supported in your browser
VIEW IN TELEGRAM
Чем больше ты думаешь, что HTML мощный, тем больше понимаешь, что он ещё мощнее 😵
Один из таких недооценённых элементов/функций в HTML — это создание элемента datalist и привязка его к полям ввода, чтобы создать виджет подсказок.
Ты можешь подумать, что для реализации такого компонента нужно много JavaScript, но на самом деле — абсолютно0️⃣ JS
⚠️ Единственный недостаток в том, что нельзя стилизовать внешний вид выпадающего списка — стиль зависит от ОС.
➡️ @FrontendPortal | #HTML
Один из таких недооценённых элементов/функций в HTML — это создание элемента datalist и привязка его к полям ввода, чтобы создать виджет подсказок.
Ты можешь подумать, что для реализации такого компонента нужно много JavaScript, но на самом деле — абсолютно
⚠️ Единственный недостаток в том, что нельзя стилизовать внешний вид выпадающего списка — стиль зависит от ОС.
Различия между <select> и <datalist>
— Кроме функции автодополнения элемента <datalist>, основное отличие между <select> и этим тегом в том, что в элементе <select> нельзя выбрать или указать значение не из списка предлагаемых
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥34👍13❤5🤯4🤔2
Проверяем правописание
Атрибут
Атрибут применяется к тегам
Можно с помощью псевдоэлемента
➡️ @FrontendPortal | #HTML
Атрибут
spellcheck указывает браузеру проверять или нет правописание и грамматику в тексте. Атрибут применяется к тегам
input или textarea, а также к элементам, которым задан атрибут contenteditableМожно с помощью псевдоэлемента
::spelling-error стилизовать неправильно написанный текстовый сегмент (поддержка 86.01%)::spelling-error {
background-color: yellow;
}Please open Telegram to view this post
VIEW IN TELEGRAM
👍53❤10🔥4
Семантический способ выделить часть текста с помощью тега <mark>
Тег <mark> выделяет или подсвечивает важный фрагмент текста. По умолчанию браузеры добавляют <mark> жёлтый фоновый цвет
➡️ @FrontendPortal | #HTML
Тег <mark> выделяет или подсвечивает важный фрагмент текста. По умолчанию браузеры добавляют <mark> жёлтый фоновый цвет
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🤔2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Мягкий перенос в HTML (­)
В отличие от элемента <wbr>, который также указывает браузеру место, где возможен разрыв слова, при использовании мягкого переноса к концу строки добавляется дефис
➡️ @FrontendPortal | #HTML
В отличие от элемента <wbr>, который также указывает браузеру место, где возможен разрыв слова, при использовании мягкого переноса к концу строки добавляется дефис
Please open Telegram to view this post
VIEW IN TELEGRAM
❤53👍26🔥8🤯1
This media is not supported in your browser
VIEW IN TELEGRAM
Как создать доступный аккордеон в 2025 году?
В HTML есть встроенный тег
Мы можем создать аккордеон так:
По умолчанию содержимое скрыто. Чтобы отобразить его сразу при загрузке страницы, добавьте атрибут
Мы можем изменить иконку треугольника на что-то другое, используя псевдоэлемент
Мы также можем запускать CSS-анимации при добавлении атрибута
Однако пока нельзя анимировать
Но можно использовать
➡️ @FrontendPortal | #HTML
В HTML есть встроенный тег
<details>, который автоматически управляет состоянием открытия и закрытия. Нам не нужно добавлять ARIA-атрибуты, так как он изначально доступенМы можем создать аккордеон так:
<details>
<summary>Вопрос?</summary>
<div>Ответ</div>
</details>
По умолчанию содержимое скрыто. Чтобы отобразить его сразу при загрузке страницы, добавьте атрибут
openМы можем изменить иконку треугольника на что-то другое, используя псевдоэлемент
::marker:summary::marker {
content: "👉";
}
details[open] summary::marker {
content: "👇";
}Мы также можем запускать CSS-анимации при добавлении атрибута
openОднако пока нельзя анимировать
height: auto с помощью CSS, так как это не поддерживается всеми основными браузерами.Но можно использовать
Web Animation API и анимировать высоту через JavaScript. На CSS Tricks есть отличный туториал на эту темуPlease open Telegram to view this post
VIEW IN TELEGRAM
👍41🔥9❤5🤔2😁1
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37❤4
This media is not supported in your browser
VIEW IN TELEGRAM
HTML продолжает отбирать работу у JS
Теперь закрывать модалки можно прямо через HTML. Новый атрибут
🔸
🔸
🔸
Выглядит бодро, но пока эксперименталочка
➡️ @FrontendPortal | #HTML
Теперь закрывать модалки можно прямо через HTML. Новый атрибут
closedby в <dialog> управляет способом закрытия диалогов юзеромclosedby="none" — юзер ничего не закроет самclosedby="closerequest" — закрывается при нажатии клавиши ESC (или другого триггера закрытия)closedby="any" — модалка закрывается по клику снаружи или ESCВыглядит бодро, но пока эксперименталочка
Please open Telegram to view this post
VIEW IN TELEGRAM
👍145🔥33❤19👎2
Знаете ли вы, что соцсети и мессенджеры вроде WhatsApp умеют подтягивать метаданные из вставленной ссылки? Секрет в том, что сам сайт должен предоставить и описать эти детали
Сюда относятся:
🔸 Заголовок
🔸 Картинка для превью — баннер, изображение продукта и т.п.
🔸 Текстовое описание и другое
Всё это делается с помощью специальных мета-тегов по стандарту, известному как Open Graph Protocol.
Попробуйте включить их на своём сайте✌️
➡️ @FrontendPortal | #HTML #разное
Сюда относятся:
Всё это делается с помощью специальных мета-тегов по стандарту, известному как Open Graph Protocol.
Попробуйте включить их на своём сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍48❤27🔥7😱3👨💻1
Этот HTML-косяк непростителен 🦯
Не использовать атрибут
Улучшай UX, показывая подходящую клавиатуру под тип ввода.
Работает и на Android, и на iOS
➡️ @FrontendPortal | #HTML
Не использовать атрибут
inputmode в элементах input — серьёзная ошибкаinputmode подсказывает браузеру, какую экранную клавиатуру отобразить пользователю для конкретного поля ввода. Используется с элементами <input> и <textarea> Улучшай UX, показывая подходящую клавиатуру под тип ввода.
Работает и на Android, и на iOS
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍140❤35🔥26
Адаптивное изображение
Тег
Браузер анализирует каждый тег
Если тег
➡️ @FrontendPortal | #HTML
Тег
<picture> используется, когда для разных устройств или вариантов отображения нам нужны разные картинки<picture>
<source srcset="320.jpg" media="(max-width: 800px)">
<img src="640.jpg" alt="...">
</picture>
Браузер анализирует каждый тег
<source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги <source> не анализируются. Если тег
<picture> не поддерживается браузером или ни один из тегов <source> не подходит под условия, то отображается картинка из тега <img>Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍50❤19🔥4👎2
Да, для этого есть HTML-тег
Семантическая точность важна при написании HTML, так как она помогает с доступностью.
Элемент<figure> используется для вёрстки иллюстраций, изображений или другого автономного содержимого, которое может иметь поясняющую подпись в виде тега <figcaption>
Чаще всего так размечают изображение, иллюстрацию, кусок кода и тому подобное, на которые будут ссылаться из основного содержимого документа. При этом блок<figure> с содержимым (картинка + подпись) может быть перенесён в другую часть документа без нарушения целостности потока документа
➡️ @FrontendPortal | #HTML
Семантическая точность важна при написании HTML, так как она помогает с доступностью.
Элемент
Чаще всего так размечают изображение, иллюстрацию, кусок кода и тому подобное, на которые будут ссылаться из основного содержимого документа. При этом блок
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤61👍26😁9🤯4👎2
Правда, что можно собрать целый сайт, используя только
Существует куча семантических HTML-тегов, о которых стоит знать. Эти теги предназначены для конкретных сценариев, а не для замены универсального
Плюсы использования:
- Прокачивает доступность
У тегов уже есть дефолтные a11y-роли, которые передают корректный смысл скринридерам. Например,
- Прокачивает SEO
Поисковикам проще понять структуру твоего сайта, что помогает поднять SEO-оценку.
И это только верхушка айсберга. Таких прикольных HTML-тегов много. За подробностями смотри доку MDN по HTML-элементам.
➡️ @FrontendPortal | #HTML
<div> и <span>. Но это не весело. И к тому же совсем не про доступностьСуществует куча семантических HTML-тегов, о которых стоит знать. Эти теги предназначены для конкретных сценариев, а не для замены универсального
<div>.Плюсы использования:
- Прокачивает доступность
У тегов уже есть дефолтные a11y-роли, которые передают корректный смысл скринридерам. Например,
<output> указывает на активную область. А <strong> сообщает скринридерам, что текст важный (в отличие от <b>, который просто делает текст визуально жирным).- Прокачивает SEO
Поисковикам проще понять структуру твоего сайта, что помогает поднять SEO-оценку.
И это только верхушка айсберга. Таких прикольных HTML-тегов много. За подробностями смотри доку MDN по HTML-элементам.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍42🔥20❤13🤯2💯1
Разделительные линии между option
А вы знали, что теперь вы можете добавлять элементы <hr> между элементами <option> внутри <select> для создания визуального разделения
Эта функция доступна в последних версиях всех основных браузеров, но может не работать в старых
Если вам нужна определенная группировка, с именами групп, используйте <optgroup>
➡️ @FrontendPortal | #HTML
А вы знали, что теперь вы можете добавлять элементы <hr> между элементами <option> внутри <select> для создания визуального разделения
Эта функция доступна в последних версиях всех основных браузеров, но может не работать в старых
Если вам нужна определенная группировка, с именами групп, используйте <optgroup>
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍59❤26🤯4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
HTML тег
Означает «аббревиатура» и используется для обозначения аббревиатуры или сокращения на веб-странице. Атрибут
➡️ @FrontendPortal | #HTML
<abbr>Означает «аббревиатура» и используется для обозначения аббревиатуры или сокращения на веб-странице. Атрибут
title указывает полную расшифровку сокращенияPlease open Telegram to view this post
VIEW IN TELEGRAM
❤80👍43🔥14
This media is not supported in your browser
VIEW IN TELEGRAM
Автозаполнение инпута
HTML-элемент
- Различия между
Кроме функции автодополнения элемента
➡️ @FrontendPortal | #HTML
HTML-элемент
<datalist> содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>- Различия между
<select> и <datalist> :Кроме функции автодополнения элемента
<datalist>, основное отличие между <select> и этим тегом в том, что в элементе <select> нельзя выбрать или указать значение не из списка предлагаемыхPlease open Telegram to view this post
VIEW IN TELEGRAM
👍50❤16🔥5🤯2
This media is not supported in your browser
VIEW IN TELEGRAM
Атрибут poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Если атрибут
➡️ @FrontendPortal | #HTML
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Если атрибут
poster не указан, браузер постарается отобразить первый кадр видеоPlease open Telegram to view this post
VIEW IN TELEGRAM
👍57❤16🔥3😁3
Проверяем правописание
Атрибут
Атрибут применяется к тегам
Можно с помощью псевдоэлемента
➡️ @FrontendPortal | #HTML
Атрибут
spellcheck указывает браузеру проверять или нет правописание и грамматику в тексте. Атрибут применяется к тегам
input или textarea, а также к элементам, которым задан атрибут contenteditableМожно с помощью псевдоэлемента
::spelling-error стилизовать неправильно написанный текстовый сегмент (поддержка 86.01%)::spelling-error {
background-color: yellow;
}Please open Telegram to view this post
VIEW IN TELEGRAM
👍63❤14
Адаптивное изображение
Тег
Браузер анализирует каждый тег
Если тег
➡️ @FrontendPortal | #HTML
Тег
<picture> используется, когда для разных устройств или вариантов отображения нам нужны разные картинки<picture>
<source srcset="320.jpg" media="(max-width: 800px)">
<img src="640.jpg" alt="...">
</picture>
Браузер анализирует каждый тег
<source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги <source> не анализируются. Если тег
<picture> не поддерживается браузером или ни один из тегов <source> не подходит под условия, то отображается картинка из тега <img>Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤38👍9🔥3