Как сделать баннер на сайте: HTML, CSS и проверка

Сделать баннер на сайте можно обычным HTML-блоком, CSS и небольшим обработчиком закрытия. Для первого результата используйте компактную полоску внутри страницы, одно сообщение и одну кнопку. Не перекрывайте весь экран без обязательной причины: посетитель должен сразу видеть основное содержание и уметь закрыть предложение.

Определите задачу и место баннера

Баннер должен вести к одному результату: сообщить об изменении, показать предложение, пригласить на событие или предупредить о работе сайта. Если в блоке несколько несвязанных кнопок, он превращается в дополнительное меню и конкурирует с основной страницей.

• Верхняя полоска подходит для короткого уведомления.
• Блок внутри текста подходит для предложения по теме страницы.
• Нижняя закреплённая панель требует проверки, что она не закрывает кнопки и поля.
• Полноэкранное окно допустимо только при обязательном ограничении и отдельной проверке.
• Картинка без HTML-текста хуже читается, переводится и адаптируется.

Один баннер, одно обещание, одно действие. Всё остальное оставьте основной странице.

Соберите минимальную разметку

Используйте смысловой контейнер, обычный текст, ссылку и кнопку закрытия. Текст должен оставаться в HTML, а не быть нарисован внутри картинки. Так его можно увеличить, озвучить, перевести и изменить без новой графики.

<aside class="site-banner" aria-label="Важное сообщение">
  <p>Новая инструкция уже доступна.</p>
  <a href="/guide/">Открыть инструкцию</a>
  <button type="button" class="banner-close"
          aria-label="Закрыть сообщение">×</button>
</aside>

Кнопка закрытия остаётся кнопкой, а не ссылкой без адреса. Визуальный крест дополняется понятной подписью aria-label. Если баннер связан с основной шапкой, сначала проверьте структуру и адаптив шапки.

Добавьте стили без перекрытия страницы

.site-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 48px 12px 16px;
  background: #fff2e8;
  color: #241f1b;
  position: relative;
}
.banner-close {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 600px) {
  .site-banner { align-items: flex-start; flex-direction: column; }
}

Не делайте высоту фиксированной: текст может стать длиннее на телефоне или после перевода. Следите за контрастом, видимым фокусом и размером области нажатия. Если баннер закреплён снизу, добавьте странице достаточный отступ и проверьте экранную клавиатуру.

По теме: Как сделать сайт-каталог сайтов: структура и проверка в 2026

Сделайте закрытие предсказуемым

Если баннер информационный и должен оставаться закрытым между визитами, можно сохранить флаг в localStorage. MDN указывает, что данные localStorage относятся к источнику страницы и сохраняются между сеансами браузера. Свойство и ограничения описаны в справке MDN.

const banner = document.querySelector('.site-banner');
const closeButton = document.querySelector('.banner-close');

if (localStorage.getItem('banner-2026-08') === 'closed') {
  banner.hidden = true;
}

closeButton.addEventListener('click', () => {
  banner.hidden = true;
  localStorage.setItem('banner-2026-08', 'closed');
});

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

Не превращайте баннер в навязчивое окно

Google рекомендует небольшие баннеры вместо полноэкранных рекламных вставок, потому что перекрывающие диалоги мешают людям и поисковым системам понимать содержимое. Примеры и исключения для обязательных ограничений приведены в документации Google Search.

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

Если нужен диалог с формой, используйте правила из гайда по модальным окнам и попапам. Баннер остаётся простым уведомлением, а не полноценным приложением поверх страницы.

Проверьте баннер перед публикацией

Откройте страницу в чистом профиле и повторите полный цикл: появление, переход, закрытие, обновление и новый визит. Затем проверьте клавиатуру, телефон и страницу с самым длинным заголовком.

1. Убедитесь, что баннер не скрывает главный заголовок и действие.
2. Перейдите по ссылке и проверьте ожидаемый адрес.
3. Вернитесь, закройте баннер и обновите страницу.
4. Пройдите элементы клавишей Tab и закройте кнопкой.
5. Уменьшите ширину окна и проверьте перенос текста.
6. Очистите флаг хранения и убедитесь, что сообщение появляется снова.
7. Отключите JavaScript: содержание страницы должно остаться доступным.

По теме: Как сделать женский сайт без стереотипов в 2026 году

Диагностика частых сбоев

Если баннер перекрывает страницу, проверьте position: fixed, высоту и отступ основного контейнера. Если закрытие не запоминается, откройте консоль, проверьте ключ и ограничения хранилища. Если ссылка работает не везде, используйте обычный href, а не только JavaScript-обработчик.

• Крест не нажимается: другой слой лежит выше или область кнопки слишком мала.
• Баннер появляется рывком: заранее задайте место в макете либо показывайте его без сдвига важного контента.
• Текст обрезан: уберите фиксированную высоту и overflow: hidden.
• На телефоне закрыта нижняя кнопка: измените положение и учтите безопасную область.
• После обновления показывается снова: ключ записи и чтения не совпадает.
• Поисковик видит только предложение: баннер слишком большой или основное содержимое скрыто.

Когда баннер не подходит

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

Перед запуском сверяйте общий результат по чек-листу хорошего сайта: баннер не должен ухудшать чтение, скорость и мобильный путь.

Частые вопросы

Нужна ли картинка для баннера?

Нет. Текстовый HTML-блок легче адаптировать и обновлять. Картинка может дополнять сообщение, но не заменять обязательный текст.

Где лучше разместить баннер?

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

Как показать баннер только один раз?

Сохраните версию закрытого сообщения в браузере или в профиле пользователя. Предусмотрите работу, если сохранение недоступно.

Можно ли закрывать баннер автоматически?

Для важного сообщения лучше оставить управление человеку. Автоматическое исчезновение может не дать прочитать текст или нажать ссылку.