w3docs logo

HTML тег <marquee>

Тег <marquee> используется для создания бегущей строки на сайте. При помощи этого тега можно перемещать текст или изображения по горизонтали и вертикали.

Тег <marquee> считается устаревшим, и W3D не рекомендует его использовать. В случае использования тега у вас могут возникнуть проблемы с валидностью кода.

Синтакс

Тег <marquee> - парный тег, состоящий из двух частей: открывающий тег (<marquee>) и закрывающий (</marquee> ).

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
   <body>
<marquee> Бегущая строка, созданная при помощи HTML тега Marquee </marquee>
   </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
       <marquee direction="down"> Бегущая строка, созданная при помощи HTML тега Marquee.</marquee>
 </body>
</html>

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
     <marquee behavior="scroll" direction="up">
      <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" />
    </marquee>
  </body>
</html>
Используйте CSS свойства width и background-color для стилизации элемента <marquee>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <style> 
      marquee {
        width: 100%;
        padding: 10px 0;
        background-color: lightblue;
      }
    </style>
    <marquee direction="scroll">Прокручиваемый текст, созданный с помощью элемента HTML Marquee и стилизованный со свойствами CSS.</marquee>
  </body>
</html>

Атрибуты

Атрибуты Значение Описание
behavior slide
alternate
scroll 		Тип движения
slide - останавливается, достигнув края
alternate - меняет направление, достигнув края
scroll - появляется с противоположной стороны
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 Цвет фона
direction up
down
left
right		 Направление движения
height pixels
%		 Высота области прокрутки
hspace pixels Горизонтальные поля вокруг тега
loop number Количество прокруток контента. Если данный атрибут не указан, контент будет прокручиваться постоянно.
scrollamount number Скорость прокрутки. Размер задается в пикселях. Значение по умолчанию 6.
scrolldelay seconds Величина задержки в миллисекундах между движениями. Значение по умолчанию - 85. Значения ниже 60 игнорируются.
truespeed seconds Позволяет использовать значения атрибута scrolldelay равные меньше 60-и миллисекунд.
vspace pixels Отступ по вертикали.
width pixels
%		 Ширина области прокрутки.

Тег <marquee> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <marquee> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <marquee>:

Цвет текста внутри тега <marquee>:

Стили форматирования текста для тега <marquee>:

Другие свойства для тега <marquee>:

Поддержка браузера

chrome edge firefox safari opera
✓ ✓ ✓ ✓ ✓

Практикуйте свои знания

Какие атрибуты может иметь HTML-тег 'marquee'?
❮ Назад Вперед ❯
Считаете ли это полезным?