Как работает ping в HTML
- 7 июля 2025
Атрибут ping
используется в теге <a>
для отправки фонового POST-запроса на указанный URL, когда пользователь переходит по ссылке. Это позволяет отслеживать переходы без изменения поведения самой ссылки.
Функция находится в статусе ограниченной доступности в Baseline, что означает: она поддерживается не во всех браузерах, и может быть отключена настройками безопасности.
Как работает ping
в HTML
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Когда пользователь кликает по ссылке с атрибутом ping
, браузер:
- Выполняет стандартный переход по
href
. - Одновременно отправляет POST-запрос на адрес, указанный в
ping
. - Запрос содержит заголовки
Ping-From
иPing-To
, чтобы сервер-аналитика знал, откуда и куда был переход.
Пример:
<a href="https://example.com" ping="https://analytics.example.com/ping">Перейти на сайт</a>
В этом примере при клике произойдёт переход на https://example.com
, а на https://analytics.example.com/ping
отправится POST-запрос.
Когда это удобно
- Аналитика переходов. Без JavaScript и без редиректов можно отслеживать, как пользователи взаимодействуют с внешними ссылками.
- Микросервисы и учётные системы. Используется для регистрации кликов, не нарушая приватность основного сайта.
- Производительность. Запрос выполняется асинхронно и не влияет на загрузку целевой страницы.
Что важно знать
Работает только для
<a>
, не поддерживается в<form>
или других тегах.ping
может принимать один или несколько URL через пробел:<a href="..." ping="https://a.com https://b.com">
Не отправляется, если пользователь открывает ссылку в новой вкладке (
Ctrl + click
,Cmd + click
).Может быть заблокирован настройками браузера или расширениями.
Некоторые браузеры (например, Safari) не поддерживают или отключают
ping
по умолчанию.
Пример: отслеживание переходов
<a
href="https://partner.example.com"
ping="https://track.htmlacademy.ru/outbound">
Перейти к партнёру
</a>
При клике браузер отправит POST-запрос на track.htmlacademy.ru
, а пользователь перейдёт на сайт партнёра.
Заключение
Атрибут ping
— простой способ реализовать отслеживание переходов без использования JavaScript. Он не влияет на навигацию, не нарушает работу ссылок и может быть полезен для учёта кликов в аналитических системах. Однако его использование стоит сочетать с другими методами, так как поддержка в браузерах не абсолютна.
Больше обзоров веб-функций — в телеграм-канале HTML Academy.
Нашли ошибку или опечатку? Напишите нам.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Использование CSS функций pow, sqrt, hypot, log и exp
С 7 декабря 2023 года (Baseline: Newly Available) в CSS появились нативные математические функции, которые позволяют выполнять вычисления прямо в стилях — без JavaScript, препроцессоров и переменных. Это важный шаг к более гибкому и выразительному управлению размерами, отступами и другими параметрами оформления.
Теперь вы можете применять привычные математические операции, такие как:
pow(x, y)
— возведение числаx
в степеньy
;sqrt(x)
— извлечение квадратного корня;log(x)
— натуральный логарифм;exp(x)
— экспонента (e в степени x).
Все эти функции используются внутри calc()
, так как именно calc()
позволяет комбинировать числа и единицы измерения. Это значит, что вы можете не просто считать, а подставлять вычисленные значения в реальные CSS-свойства.
Пример:
.element {
width: calc(pow(2, 3) * 10px); /* Результат: 8 * 10px = 80px */
}
Такой подход даёт больше свободы в оформлении без использования JavaScript. Например, вы можете рассчитывать ширины, высоты, пропорции или даже динамически адаптировать отступы в зависимости от других значений — прямо в CSS.
- 8 июля 2025

Методы окон alert, confirm и prompt в JavaScript
JavaScript предоставляет три простых метода для взаимодействия с пользователем: alert()
, confirm()
и prompt()
. Эти функции встроены в глобальный объект window
и доступны в любом браузере. Они позволяют быстро отобразить сообщение, запросить подтверждение действия или получить текстовый ввод.
С 29 января 2018 года эти методы находятся в статусе «Widely Available» по Baseline, то есть их можно использовать без ограничений на совместимость.
- 7 июля 2025

Как использовать классы в JavaScript
Классы — это удобный синтаксис, который появился в JavaScript в стандарте ES2015 (ES6) и с 8 сентября 2018 года считается широко поддерживаемым (Baseline: Widely Available). Они позволяют создавать объекты по шаблону — с общими свойствами и методами — и писать более структурированный, понятный код.
За кулисами классы используют ту же прототипную модель, что и раньше. Но теперь вы можете описывать «объектные» структуры так, как это делается в других языках, вроде Java, Python или C# — с конструкторами, методами и наследованием.
- 5 июля 2025

Использование атрибута inert для отключения взаимодействия
С 11 апреля 2023 года (Baseline: Newly Available) в HTML официально поддерживается атрибут inert
. Он делает элемент и всех его потомков полностью неинтерактивными: они не могут получать фокус, не реагируют на нажатия клавиш, клики мыши и вообще исключаются из всех пользовательских взаимодействий. Но при этом остаются в DOM и продолжают рендериться.
Это особенно полезно, если нужно временно отключить часть интерфейса — например, при открытии модального окна, активации блокировки, загрузке, или при переключении между вкладками.
- 4 июля 2025

CSS-свойство cursor для управления отображением курсора
Свойство cursor
управляет тем, как выглядит указатель мыши, когда пользователь наводит его на элемент. Оно помогает визуально показать, что элемент интерактивный, требует внимания или, наоборот, недоступен. Это особенно важно для улучшения удобства и предсказуемости интерфейса.
Хотя cursor
— базовое CSS-свойство, оно находится в статусе ограниченной доступности в Baseline, что значит: часть значений может не поддерживаться в старых браузерах или иметь особенности в поведении.
- 2 июля 2025

Цвет текста в CSS: свойство и изменение
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Доступно в Baseline в статусе «Widely Available» с 2018-01-29
Цвет CSS — это свойство, которое устанавливает основной цвет для текста, границ и линий украшения. Оно влияет на визуальную сторону элементов и помогает сделать интерфейс более приятным и читаемым. Можно задавать цвет через названия, HEX, RGB или HSL, выбирая подходящий способ в зависимости от задачи.
Пример установки цвета текста:
<p style="color: #ff5733;">Этот текст будет оранжево-красным</p>
Больше обзоров веб-функций — в телеграм-канале HTML Academy.
Нашли ошибку или опечатку? Напишите нам.
- 25 июня 2025