Tag HTML <marquee>
A tag marquee do HTML era obsoleta e rolava texto ou imagens pela página. Saiba por que foi removida e como rolar conteúdo com animações CSS.
O elemento <marquee> é uma tag HTML obsoleta e não padronizada que era usada para criar texto ou imagens com rolagem. Ela fazia o conteúdo rolar horizontalmente ou verticalmente pela página web. Assim como o elemento <blink> do Netscape, foi amplamente criticada por seus problemas de usabilidade.
Não use <marquee> em código novo. Ela foi removida do HTML Living Standard e é oficialmente obsoleta. Os exemplos nesta página existem apenas para que você possa reconhecer e substituir código legado — não são uma recomendação. Para efeitos de rolagem hoje, use a substituição moderna com CSS abaixo. Veja também a lista de tags HTML depreciadas.
Esta página aborda o que o <marquee> fazia, por que foi removido, como reproduzir seu efeito com animações CSS compatíveis com os padrões atuais, e as regras de acessibilidade que devem ser seguidas quando o conteúdo se move na tela.
Por que o <marquee> foi removido
Embora a maioria dos navegadores ainda renderize o <marquee> por compatibilidade retroativa, você deve tratá-lo como obsoleto:
- Não faz parte de nenhuma especificação atual. Os fabricantes de navegadores podem remover o suporte a qualquer momento, e ferramentas, linters e validadores o sinalizam como erro.
- É apresentação em marcação. Animação pertence ao CSS, não a elementos HTML.
- Prejudica a acessibilidade. Conteúdo em movimento contínuo pode violar o WCAG (veja Acessibilidade abaixo).
Substituição moderna com CSS
O efeito marquee é simplesmente um elemento traduzido pelo seu contêiner em loop. Você pode reproduzi-lo com @keyframes do CSS e a propriedade transform — sem JavaScript e sem tags obsoletas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.marquee {
overflow: hidden; /* hide the text outside the box */
white-space: nowrap; /* keep the text on one line */
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%; /* start fully off-screen on the right */
animation: scroll-left 12s linear infinite;
}
@keyframes scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* Pause the animation when the user hovers, giving them control. */
.marquee:hover span {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="marquee">
<span>A scrolling text created with CSS animation instead of marquee.</span>
</div>
</body>
</html>Como o movimento agora está no CSS, você controla a velocidade com animation-duration, a direção trocando os valores de translateX, e a suavidade com as propriedades transition e animation — todas padrão e totalmente suportadas.
Aviso de acessibilidade
Conteúdo em movimento é uma preocupação real de acessibilidade, não uma preferência estética.
- O Critério de Sucesso 2.2.2 do WCAG (Pausar, Parar, Ocultar) exige que qualquer conteúdo que se mova, pisque ou role automaticamente por mais de cinco segundos possa ser pausado, parado ou ocultado pelo usuário. Um
<marquee>simples não oferece esse controle, portanto falha neste critério. - Respeite
prefers-reduced-motion. Alguns usuários pediram explicitamente ao sistema para minimizar animações (elas podem causar náusea ou vertigem). Desative a rolagem para eles:
@media (prefers-reduced-motion: reduce) {
.marquee span {
animation: none;
}
}- Forneça um controle de pausa. O exemplo CSS acima pausa ao passar o mouse via
animation-play-state, mas o hover não está disponível para usuários de teclado ou toque. Para conteúdo importante, adicione um botão visível de Pausar/Reproduzir que alterneanimation-play-statepara que todos possam parar o movimento.
Alternativas à tag HTML <marquee>
Além da abordagem puramente com CSS acima, você pode criar efeitos de rolagem mais ricos combinando CSS e JavaScript. Leia nosso snippet para saber mais sobre esse método.
Sintaxe legada (apenas para referência)
Os exemplos nesta seção são código legado mantidos aqui apenas para ajudar você a reconhecê-lo e migrá-lo. Não adicione <marquee> a novas páginas — use a substituição moderna com CSS.
A tag <marquee> vem em pares. O conteúdo é escrito entre as tags de abertura (<marquee>) e fechamento (</marquee>).
Exemplo de uso da tag HTML <marquee>:
Exemplo da tag HTML <marquee>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
marquee{
font-size: 30px;
font-weight: 800;
color: #8ebf42;
font-family: sans-serif;
}
</style>
</head>
<body>
<marquee>A scrolling text created with HTML Marquee element.</marquee>
</body>
</html>Use o atributo direction do elemento <marquee> para alterar a direção do texto ou da imagem. Veja outro exemplo onde o texto rola de cima para baixo.
Exemplo de texto com rolagem:
Exemplo da tag <marquee> com o atributo direction
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<marquee direction="down">A scrolling text created with HTML Marquee element.</marquee>
</body>
</html>Agora vamos ver um exemplo de uso do elemento <marquee> para exibir uma imagem com rolagem:
Exemplo de imagem com rolagem:
Exemplo da tag <marquee> com os atributos behavior e direction
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<marquee behavior="scroll" direction="up">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" />
</marquee>
</body>
</html>Use as propriedades CSS width e background-color para estilizar o elemento <marquee>.
Exemplo de criação de texto com rolagem usando a tag HTML <marquee>:
Exemplo de como estilizar a tag HTML <marquee> com as propriedades width e background-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<style>
marquee {
width: 100%;
padding: 10px 0;
background-color: lightblue;
}
</style>
<marquee direction="scroll">This scrolling text is created with HTML Marquee element and styled with CSS properties.</marquee>
</body>
</html>Atributos
Os atributos a seguir eram usados para ajustar a aparência do elemento <marquee>. Todos eles são não padronizados. Não estão definidos em nenhuma especificação atual, e ferramentas compatíveis com especificações os sinalizarão; mesmo onde os navegadores ainda os respeitam hoje, esse comportamento não é garantido.
| Atributo | Valor | Descrição |
|---|---|---|
| behavior | scroll, slide, alternate | Define o tipo de rolagem. |
| bgcolor | rgb(x,x,x), #xxxxxx, colorname | Define a cor de fundo. |
| direction | up, down, left, right | Define a direção do conteúdo com rolagem. |
| height | pixels, % | Define a altura do marquee. |
| hspace | pixels | Define o espaço horizontal ao redor do marquee. |
| loop | number | Define quantas vezes o conteúdo será rolado. Se omitido, o conteúdo rola indefinidamente. |
| scrollamount | number | Define a quantidade de rolagem em cada intervalo em pixels. O valor padrão é 6. |
| scrolldelay | milliseconds | Define o atraso entre cada rolagem. O valor padrão é 85. |
| truespeed | boolean | Habilita velocidade de rolagem consistente entre diferentes navegadores. |
| vspace | pixels | Define o espaço vertical ao redor do marquee. |
| width | pixels, % | Define a largura do marquee. |
A tag <marquee> também suporta os atributos globais e os atributos de evento.