W3docs

Atributos HTML

Use atributos HTML para fornecer informações adicionais sobre elementos HTML. Aprenda a usar atributos HTML com sintaxe e exemplos no tutorial W3Docs.

Os atributos HTML são usados dentro da tag de abertura. Eles fornecem informações adicionais sobre os elementos HTML. Um atributo fornece metadados para um elemento ou modifica seu comportamento. O atributo possui um nome, seguido pelo sinal de igual (=) e um valor colocado entre aspas ("").

Um modelo mental rápido: pense em um elemento como um substantivo e seus atributos como adjetivos que o descrevem. Em <a href="https://www.w3docs.com">W3Docs</a>, o elemento <a> é o link, e o atributo href informa ao navegador para onde o link aponta. Sem o atributo, o elemento ainda existiria, mas não teria destino.

Sintaxe

Sintaxe de Atributos HTML

<tag attribute="value">Your Text</tag>

O atributo sempre fica dentro da tag de abertura, nunca na tag de fechamento. Um elemento pode ter vários atributos ao mesmo tempo, cada um separado por um espaço.

O atributo href

A tag HTML <a> cria um link, cujo endereço é definido no atributo href. No exemplo abaixo, usamos a tag <a> com o atributo href. Entre as aspas, escrevemos o endereço da página para onde iremos após clicar no link.

Exemplo da tag HTML <a> com o atributo href:

Exemplo de Atributo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com">Click here and go to the homepage.</a>
  </body>
</html>

Resultado


Clique e vá para a página inicial


O atributo id

O atributo id do HTML define um identificador único para cada elemento.

Exemplo da tag HTML <div> com o atributo id:

Exemplo da tag div com o atributo "id"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #text {
        font-family: sans-serif;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
      }
    </style>
  </head>
  <body>
    <h2>Example of the div tag with the "id" attribute</h2>
    <div id="text">Here is some text for the div tag with the "id" attribute.</div>
  </body>
</html>

O atributo style

O atributo style define o estilo de um elemento, como cor, tamanho, fonte e assim por diante.

Exemplo da tag HTML <p> com o atributo style:

Exemplo da tag p com o atributo "style":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Example of the p tag with the style attribute</h2>
    <p style="color:#666666;font-size:18px;">Here is some text for the p tag with the "style" attribute.</p>
  </body>
</html>

O atributo start

O atributo start define o valor inicial do primeiro item de lista em uma lista ordenada. O exemplo abaixo mostra duas listas lado a lado: a primeira não tem o atributo start, portanto numera a partir de 1 por padrão; a segunda usa start="30", então seus itens são numerados 30, 31, 32.

Exemplo da tag HTML <ol> com o atributo start:

Exemplo da tag ol com o atributo "start"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Default ordered list (starts at 1):</h2>
    <ol>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ol>
    <h2>Ordered list with start="30":</h2>
    <ol start="30">
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ol>
  </body>
</html>

Múltiplos Atributos

Você pode adicionar mais de um atributo a um elemento HTML. Certifique-se de adicionar um espaço entre eles.

Não importa em que sequência os atributos são colocados.

Exemplo de Atributos HTML

<tag attribute1="value" attribute2="value">Your text</tag>

Exemplo da tag HTML <img> com os atributos src, width, height e alt:

Exemplo da tag img do HTML com múltiplos atributos

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>A photo with multiple attributes:</p>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Atributos boolean

Alguns atributos são atributos boolean: sua simples presença significa "verdadeiro", e sua ausência significa "falso". Exemplos incluem disabled, checked, readonly, required, selected e multiple.

Para um atributo boolean, o valor que você escreve é irrelevante — o que importa é se o atributo existe no elemento ou não. Estas três formas são todas equivalentes e todas desabilitam o input:

<input disabled>
<input disabled="">
<input disabled="disabled">

Para tornar um atributo boolean "falso", você não o define como false — você o remove completamente. Escrever disabled="false" ainda desabilita o input, pois o atributo está presente.

Exemplo de atributos boolean:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Enabled input: <input value="You can type here"></p>
    <p>Disabled input: <input value="You cannot type here" disabled></p>
    <p>Checked by default: <input type="checkbox" checked> Accept terms</p>
  </body>
</html>

Uso de aspas em valores de atributos

Você pode escrever valores de atributos com aspas duplas, aspas simples ou, em alguns casos, sem aspas.

<a href="page.html">Double quotes (recommended)</a>
<a href='page.html'>Single quotes</a>
<a href=page.html>Unquoted</a>

Aspas duplas são recomendadas. São o estilo mais comum e permitem que o valor contenha aspas simples, como em title="It's a link".

Aspas simples são úteis quando o próprio valor contém aspas duplas, por exemplo title='He said "hello"'.

Valores sem aspas são arriscados. Um valor sem aspas não pode conter espaços, e um espaço encerra o valor prematuramente. Por exemplo, class=btn primary é lido como uma class de btn mais um atributo primary separado — não como dois nomes de classe. Valores sem aspas também não podem conter =, aspas ou outros caracteres especiais. Para maior segurança, sempre coloque seus valores de atributos entre aspas.

Atributos de Conteúdo e IDL

Em HTML, um atributo tem duas facetas: o atributo de conteúdo (o que está escrito no markup) e o atributo IDL (a propriedade JavaScript correspondente no elemento DOM, onde IDL significa Interface Definition Language).

O atributo de conteúdo é o valor literal do código-fonte HTML. Você o lê e escreve com element.getAttribute() e element.setAttribute(). Para um campo de formulário, o atributo de conteúdo geralmente representa o valor inicial.

O atributo IDL é uma propriedade JavaScript como element.value. Ele reflete o atributo de conteúdo, mas representa o estado atual do elemento, que pode mudar conforme o usuário interage com a página.

A diferença é mais clara em um elemento <input>. Dado <input id="name" value="Anna">, se um usuário digitar Maria no campo:

const el = document.getElementById("name");

el.getAttribute("value"); // "Anna"  — the content attribute (initial value from HTML)
el.value;                 // "Maria" — the IDL property (current value in the DOM)

Portanto, quando você precisa do valor que o usuário está efetivamente vendo, leia el.value; quando precisa do valor originalmente escrito no HTML, leia el.getAttribute("value").

Alguns atributos de conteúdo, como readonly, disabled e required, são atributos boolean (consulte a seção acima): seu valor é true quando presentes e false quando ausentes.

As duas tabelas abaixo são uma referência. A primeira lista os atributos que você usará com mais frequência; a segunda é o catálogo completo, com os elementos aos quais cada atributo pertence.

Lista dos Atributos HTML mais usados:

AtributoDescriçãoExemplo
altDefine um texto alternativo quando o elemento original não é exibido.alt="HTML Attributes"
heightDefine a altura do elemento.height="250"
hrefDefine a URL de um link.href="https://www.w3docs.com/"
hreflangDefine o idioma do documento vinculado.hreflang="en"
idDefine um id único para um elemento HTML.id="example"
langDefine o idioma do documento (usado na tag <html>).<html lang="en-US">
relDefine a relação entre o documento de destino e o documento vinculado.rel="nofollow"
shapeDefine a forma do elemento.shape="circle"
spanDefine o número de colunas abrangidas por um elemento <col> ou <colgroup>.span="2"
srcDefine a fonte do elemento.src="https://example.com/image.jpg"
startDefine o valor inicial de uma lista ordenada (usado na tag <ol>).<ol start="30">
styleDefine o estilo CSS de um elemento HTML (tamanho, fonte, cor, etc.).style="color:red;text-align:right"
targetDefine onde abrir o link.target="_blank"
wrapDefine se o texto deve ser quebrado ou não.wrap="hard"
widthDefine a largura do elemento.width="120"

Veja também a lista de Atributos Globais HTML que podem ser usados com qualquer elemento HTML.

Lista completa de Atributos HTML:

AtributoPertence aDescrição
accept<input>Define os tipos de arquivos aceitos pelo servidor (apenas para type="file").
accept-charset<form>Define as codificações de caracteres usadas no envio do formulário.
accesskeyGlobal AttributesDefine uma tecla de atalho que ativará um elemento.
action<form>Define para onde os dados do formulário devem ser enviados quando ele é submetido.
alignHTML5 não suporta este atributo.Define o alinhamento em relação aos elementos próximos. CSS pode ser usado no lugar deste atributo.
alt<area>, <img>, <input>Define um texto alternativo caso o elemento original não seja exibido.
async<script>Define que o script é executado de forma assíncrona. É usado apenas para scripts externos.
autocomplete<form>, <input>Define se o preenchimento automático dos elementos <form> ou <input> deve ser habilitado.
autofocus<button>, <input>, <select>, <textarea>Define que o elemento deve obter foco automaticamente quando a página carrega.
autoplay<audio>, <video>Define que o áudio ou vídeo começará a reproduzir quando estiver pronto.
bgcolorHTML5 não suporta este atributo.Define a cor de fundo de um elemento. CSS pode ser usado no lugar deste atributo.
borderHTML5 não suporta este atributo.Define a largura da borda de um elemento. CSS pode ser usado no lugar deste atributo.
charset<meta>, <script>Define a codificação de caracteres.
checked<input>Define que um elemento <input> deve ser pré-selecionado quando a página carrega (para type="checkbox" ou type="radio").
cite<blockquote>, <del>, <ins>, <q>Define uma URL que explica a citação, o texto excluído ou inserido.
classGlobal AttributesDefine um ou mais nomes de classe para um elemento.
colorHTML5 não suporta este atributo.Define a cor do texto de um elemento. CSS pode ser usado no lugar deste atributo.
cols<textarea>Define a largura visível de uma área de texto.
colspan<td>, <th>Define o número de colunas que uma célula da tabela deve abranger.
content<meta>Fornece o valor relacionado ao atributo http-equiv ou name.
contenteditableGlobal AttributesDefine se o conteúdo de um elemento pode ser editado ou não.
controls<audio>, <video>Define que os controles de áudio ou vídeo devem ser exibidos (por exemplo, botão de reprodução ou pausa, etc.).
coords<area>Define as coordenadas da área.
data<object>Define a URL do recurso que será usado pelo objeto.
data-*Global AttributesArmazena dados personalizados privados para a página ou aplicação.
datetime<del>, <ins>, <time>Define a data e a hora.
default<track>Define que a faixa será habilitada se as preferências do usuário não indicarem que outra faixa seria mais adequada.
defer<script>Define que o script é executado quando a página termina de ser analisada. Este atributo é usado apenas para scripts externos.
dirGlobal AttributesDefine a direção do texto para o conteúdo de um elemento.
dirname<textarea>, <input>Define que a direção do texto será enviada no formulário.
disabled<button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea>Define que o elemento ou grupo de elementos especificado deve ser desabilitado.
download<a>, <area>Define que o destino será baixado quando o usuário clicar no hiperlink.
draggableGlobal AttributesDefine se um elemento pode ser arrastado ou não.
dropzoneGlobal AttributesDefine se os dados arrastados são copiados, movidos ou vinculados quando soltos.
enctype<form>Define como os dados do formulário devem ser codificados ao serem enviados ao servidor. Este atributo é usado apenas para method="post".
for<label>, <output>Especifica a qual(is) elemento(s) de formulário um rótulo ou cálculo está vinculado.
form<button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea>Define o nome do formulário ao qual o elemento pertence.
formaction<button>, <input>Define para onde enviar os dados do formulário quando ele é submetido. Este atributo é usado apenas para type="submit".
headers<th>, <th>Define uma ou mais células de cabeçalho com as quais uma célula está conectada.
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Define a altura do elemento.
hiddenGlobal AttributesDefine que um elemento não é relevante.
high<meter>Define o limite superior do intervalo representado pelo elemento <meter>.
href<a>, <area>, <base>, <link>Define a URL da página para onde o link aponta.
hreflang<a>, <area>, <link>Define o idioma do documento vinculado.
http-equiv<meta>Fornece ao atributo content um cabeçalho HTTP para a informação ou valor.
idGlobal AttributesDefine um id único para um elemento.
ismap<img>Define uma imagem como um mapa de imagem do lado do servidor.
kind<track>Define o tipo de faixa de texto.
label<track>, <option>, <optgroup>Define o título da faixa de texto.
langGlobal AttributesDefine o idioma do conteúdo de um elemento.
list<input>Referencia um elemento <datalist> contendo opções pré-definidas para um elemento <input>.
loop<audio>, <video>Define que o áudio ou vídeo vai recomeçar toda vez que terminar.
low<meter>Define o intervalo considerado como valor baixo.
max<input>, <meter>, <progress>Define o valor máximo.
maxlength<input>, <textarea>Define o número máximo de caracteres que um elemento pode conter.
media<a>, <area>, <link>, <source>, <style>Define para qual mídia ou dispositivo o documento vinculado é otimizado.
method<form>Define o método HTTP que deve ser usado ao enviar os dados do formulário.
min<input>, <meter>Define um valor mínimo.
multiple<input>, <select>Define que mais de um valor pode ser inserido pelo usuário.
muted<audio>, <video>Define que a saída de áudio do vídeo deve ser silenciada.
name<button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>Define o nome do elemento.
novalidate<form>Define que o formulário não deve ser validado quando enviado.
onabort<audio>, <embed>, <img>, <object>, <video>Script executado ao abortar.
onafterprint<body>Script executado após a impressão do documento.
onbeforeunload<body>Script executado quando o documento está prestes a ser descarregado.
onblurTodos os elementos visíveis.Script executado quando o elemento perde o foco.
oncanplay<audio>, <embed>, <object>, <video>Script executado quando um arquivo está pronto para começar a reproduzir.
oncanplaythrough<audio>, <video>Script executado quando um arquivo pode ser reproduzido até o fim sem pausar para buffering.
onchangeTodos os elementos visíveis.Script executado quando o valor do elemento é alterado.
onclickTodos os elementos visíveis.Script executado quando o elemento é clicado.
oncontextmenuTodos os elementos visíveis.Script executado quando um menu de contexto é acionado.
oncopyTodos os elementos visíveis.Script executado quando o conteúdo do elemento é copiado.
oncuechange<track>Script executado quando a legenda em um elemento <track> muda.
oncutTodos os elementos visíveis.Script executado quando o conteúdo do elemento é recortado.
ondblclickTodos os elementos visíveis.Script executado quando o elemento recebe duplo clique.
ondragTodos os elementos visíveis.Script executado quando o elemento é arrastado.
ondragendTodos os elementos visíveis.Script executado ao final de uma operação de arrastar.
ondragenterTodos os elementos visíveis.Script executado quando um elemento é arrastado para um alvo de soltar válido.
ondragleaveTodos os elementos visíveis.Script executado quando um elemento sai de um alvo de soltar válido.
ondragoverTodos os elementos visíveis.Script executado quando um elemento é arrastado sobre um alvo de soltar válido.
ondragstartTodos os elementos visíveis.Script executado no início de uma operação de arrastar.
ondropTodos os elementos visíveis.Script executado no início de uma operação de arrastar.
ondurationchange<audio>, <video>Script executado quando a duração da mídia muda.
onemptied<audio>, <video>Script executado quando algo inesperado acontece e o arquivo fica indisponível.
onended<audio>, <video>Script executado quando a mídia chega ao fim.
onerror<audio>, <video>, <embed>, <object>, <script>, <style>, <body>Script executado quando ocorre um erro.
onfocusTodos os elementos visíveis.Script executado quando o elemento recebe foco.
onhashchange<body>Script executado quando a âncora muda.
oninputTodos os elementos visíveis.Script executado quando o elemento recebe entrada do usuário.
oninvalidTodos os elementos visíveis.Script executado quando o elemento é inválido.
onkeydownTodos os elementos visíveis.Script executado quando o usuário pressiona uma tecla.
onkeypressTodos os elementos visíveis.Script executado quando o usuário pressiona uma tecla.
onkeyupTodos os elementos visíveis.Script executado quando o usuário solta uma tecla.
onload<body>, <iframe>, <input>, <img>, <script>, <style>, <link>Script executado quando o carregamento termina.
onloadeddata<audio>, <video>Script executado quando os dados de mídia são carregados.
onloadedmetadata<audio>, <video>Script executado quando os metadados são carregados.
onloadstart<audio>, <video>Script executado quando o arquivo começa a carregar, antes que qualquer coisa seja efetivamente carregada.
onmousedownTodos os elementos visíveis.Script executado quando um botão do mouse é pressionado sobre um elemento.
onmousemoveTodos os elementos visíveis.Script executado enquanto o ponteiro do mouse se move sobre um elemento.
onmouseoutTodos os elementos visíveis.Script executado quando o ponteiro do mouse sai de um elemento.
onmouseupTodos os elementos visíveis.Script executado quando um botão do mouse é solto sobre um elemento.
onmouseoverTodos os elementos visíveis.Script executado quando um ponteiro do mouse se move sobre um elemento.
onmousewheelTodos os elementos visíveis.Script executado quando a roda do mouse rola sobre um elemento.
onoffline<body>Script executado quando o navegador começa a trabalhar offline.
ononline<body>Script executado quando o navegador começa a trabalhar online.
onpagehide<body>Script executado quando o usuário navega para fora de uma página.
onpageshow<body>Script executado quando o usuário navega para uma página.
onpasteTodos os elementos visíveis.Script executado quando algum conteúdo é colado em um elemento.
onpause<audio>, <video>Script executado quando a mídia é pausada.
onplay<audio>, <video>Script executado quando a mídia começa a reproduzir.
onplaying<audio>, <video>Script executado quando a mídia está sendo reproduzida.
onpopstate<body>Script executado quando o histórico das janelas muda.
onprogress<audio>, <video>Script executado quando o navegador está em processo de obtenção dos dados de mídia.
onratechange<audio>, <video>Script executado quando a taxa de reprodução muda.
onreset<form>Script executado quando o botão de reset de um formulário é clicado.
onresize<body>Script executado quando a janela do navegador é redimensionada.
onscrollTodos os elementos visíveis.Script executado quando a barra de rolagem de um elemento está sendo rolada.
onsearch<input>Script executado quando o usuário escreve algo em um campo de pesquisa.
onseeked<audio>, <video>Script executado quando o atributo seeking é definido como false, indicando que a busca terminou.
onseeking<audio>, <video>Script executado quando o atributo seeking é definido como true, indicando que a busca está ativa.
onselectTodos os elementos visíveis.Script executado quando o elemento é selecionado.
onstalled<audio>, <video>Script executado quando o navegador não consegue obter os dados de mídia por algum motivo.
onstorage<body>Script executado quando uma área de Web Storage é atualizada.
onsubmit<form>Script executado quando um formulário é enviado.
onsuspend<audio>, <video>Script executado quando a obtenção dos dados de mídia é interrompida antes de ser completamente carregada.
ontimeupdate<audio>, <video>Script executado quando a posição de reprodução muda.
ontoggle<details>Script executado quando o elemento <details> é aberto ou fechado.
onunload<body>Script executado quando uma página é descarregada.
onvolumechange<audio>, <video>Script executado cada vez que o volume de um vídeo ou áudio é alterado.
onwaiting<audio>, <video>Script executado quando a mídia é pausada, mas ao mesmo tempo se espera que continue.
onwheelTodos os elementos visíveis.Script executado quando a roda do mouse sobe ou desce sobre um elemento.
open<details>Define que os detalhes devem estar visíveis.
optimum<meter>Define qual valor é o valor ideal para o medidor.
pattern<input>Define uma expressão regular com a qual o valor de um elemento <input> é verificado.
placeholder<input>, <textarea>Define uma dica curta que descreve o valor esperado do elemento.
poster<video>Define uma imagem que será exibida enquanto o vídeo está sendo baixado ou até o botão de reprodução ser pressionado pelo usuário.
preload<audio>, <video>Define se e como o áudio ou vídeo deve ser carregado quando a página carrega.
readonly<input>, <textarea>Define que o elemento é somente leitura.
rel<a>, <area>, <link>Define a relação entre o documento atual e o documento vinculado.
required<input>, <textarea>, <select>Define que o elemento deve ser preenchido antes do envio do formulário.
reversed<ol>Define que a ordem da lista deve ser decrescente. Por exemplo: 5, 4, 3...
rows<textarea>Define o número visível de linhas em uma área de texto.
rowspan<td>, <th>Define o número de linhas que uma célula da tabela deve abranger.
sandbox<iframe>Habilita um conjunto adicional de restrições para o conteúdo dentro de um elemento <iframe>.
scope<th>Define se uma célula de cabeçalho é cabeçalho de uma coluna, linha ou grupo de colunas ou linhas.
selected<option>Define que uma opção deve ser pré-selecionada quando a página carrega.
shape<area>Define a forma da área.
size<input>, <select>, <embed>, <iframe>Define a largura em caracteres (para <input>) ou o número de opções visíveis (para <select>).
sizes<link>, <img>, <source>Define o tamanho do recurso vinculado.
span<col>, <colgroup>Define o número de colunas a abranger.
spellcheckGlobal AttributesDefine se a gramática e a ortografia do elemento devem ser verificadas ou não.
src<img>, <source>, <audio>, <video>, <script>, <track>, <embed>, <iframe>Define a URL do arquivo de mídia.
srcdoc<iframe>Define o conteúdo HTML da página que deve ser exibida no elemento <iframe>.
srclang<track>Define o idioma dos dados de texto da faixa.
srcset<img>, <source>Define a URL da imagem que pode ser usada em diferentes situações.
start<ol>Define o valor inicial de uma lista ordenada.
step<input>Define os intervalos numéricos válidos para um campo de entrada.
styleGlobal AttributesDefine um estilo CSS inline para um elemento.
tabindexGlobal AttributesDefine a ordem de tabulação de um elemento.
target<a>, <area>, <base>, <form>Define o alvo para onde o documento vinculado deve ser aberto ou onde o formulário deve ser enviado.
titleGlobal AttributesDefine informações adicionais sobre um elemento.
translateGlobal AttributesDefine se o conteúdo de texto do elemento deve ser traduzido pelo navegador ou por ferramentas de tradução.
type<embed>, <input>, <object>, <a>, <button>, <link>, <menu>, <object>, <script>, <source>, <style>Define o tipo do elemento.
usemap<object>, <img>Define uma imagem como um mapa de imagem do lado do cliente.
value<button>, <input>, <li>, <option>, <meter>, <progress>, <param>Define o valor do elemento.
width<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Define a largura do elemento.
wrap<textarea>Define como o texto em uma área de texto deve ser quebrado quando enviado dentro de um formulário.

Veja também a lista de Atributos Globais HTML que podem ser usados com qualquer elemento HTML.

Prática

Prática
Quais das seguintes afirmações sobre atributos HTML são verdadeiras?
Quais das seguintes afirmações sobre atributos HTML são verdadeiras?
Prática
Como você desabilita um input com um atributo boolean?
Como você desabilita um input com um atributo boolean?
Was this page helpful?