Atributo HTML - HTML attribute

Atributos HTML são palavras especiais usadas dentro da tag de abertura para controlar o comportamento do elemento. Os atributos HTML são um modificador de um tipo de elemento HTML . Um atributo modifica a funcionalidade padrão de um tipo de elemento ou fornece funcionalidade para certos tipos de elemento incapazes de funcionar corretamente sem eles. Na sintaxe HTML, um atributo é adicionado a uma tag de início HTML .

Vários tipos de atributos básicos foram reconhecidos, incluindo: (1) atributos obrigatórios , necessários para um tipo de elemento específico para que esse tipo de elemento funcione corretamente; (2) atributos opcionais , usados ​​para modificar a funcionalidade padrão de um tipo de elemento; (3) atributos padrão , suportados por muitos tipos de elementos; e (4) atributos de evento , usados ​​para fazer com que os tipos de elemento especifiquem scripts a serem executados em circunstâncias específicas.

Alguns tipos de atributos funcionam de maneira diferente quando usados ​​para modificar diferentes tipos de elementos. Por exemplo, o nome do atributo é usado por vários tipos de elemento, mas tem funções ligeiramente diferentes em cada um.

Descrição

Os atributos HTML geralmente aparecem como pares nome-valor , separados por =e são escritos na tag inicial de um elemento, após o nome do elemento:

<element attribute="value">element content</element>

Onde elementnomeia o tipo de elemento HTML e attributeé o nome do atributo, defina como fornecido value. O valor pode ser colocado entre aspas simples ou duplas, embora os valores que consistem em certos caracteres possam ser deixados sem aspas em HTML (mas não em XHTML). Deixar os valores dos atributos sem aspas é considerado inseguro.

Embora a maioria dos atributos sejam fornecidos como nomes e valores emparelhados, alguns afetam o elemento simplesmente por sua presença na tag inicial do elemento (como o ismapatributo do imgelemento).

O elemento de abreviação,, abbrpode ser usado para demonstrar esses vários atributos:

<abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</abbr>

Este exemplo é exibido como HTML em azul sem ser um link e, na maioria dos navegadores, apontar o cursor para a abreviação deve exibir o texto do título "Linguagem de marcação de hipertexto" dentro de um fundo amarelo flutuante ( dica ).

<div style="textalign: center;">Centered text</div>

Neste outro exemplo, seu texto será semelhante a este:

Texto centrado

A maioria dos elementos também leva os atributos relacionados ao idioma lange dir.

Atributos comuns

Normalmente, os elementos HTML podem assumir qualquer um dos vários atributos padrão mais comuns ( veja a lista completa ):

  • O id atributo can take fornece um identificador exclusivo em todo o documento para um elemento. Isso pode ser usado como seletor CSS para fornecer propriedades de apresentação, por navegadores para focar a atenção no elemento específico ou por scripts para alterar o conteúdo ou a apresentação de um elemento. Anexado ao URL da página, o URL tem como alvo direto o elemento específico do documento, normalmente uma subseção da página. Por exemplo, o ID "Atributos" em http://en.wikipedia.org/wiki/HTML#Attributes(para referir-se à seção "Atributos" na página "HTML").
  • O classatributo fornece uma maneira de classificar elementos semelhantes. Isso pode ser usado para fins semânticos ou para fins de apresentação. Semanticamente, por exemplo, as classes são usadas em microformatos . Na apresentação, por exemplo, um documento HTML pode usar a designação class="notation"para indicar que todos os elementos com este valor de classe estão subordinados ao texto principal do documento. Esses elementos podem ser reunidos e apresentados como notas de rodapé em uma página, em vez de aparecer no local onde ocorrem no código-fonte HTML. Outro uso de apresentação seria como um seletor CSS . Várias classes podem ser adicionadas tendo espaços entre cada identificador .
  • Um autor pode usar as stylepropriedades de apresentação dos códigos não-atributais para um elemento particular. O styleatributo pode ser usado em qualquer elemento HTML (ele será validado em qualquer elemento HTML; no entanto, não é necessariamente útil). É considerada uma prática recomendada usar um elemento idou classatributos para selecionar o elemento com uma folha de estilo , embora às vezes isso possa ser muito complicado para uma aplicação simples e específica ou ad hoc de propriedades estilizadas.
  • O titleatributo é usado para anexar uma explicação subtextual a um elemento. Na maioria dos navegadores, esse atributo é exibido como o que costuma ser chamado de dica de ferramenta .

Variedades

Os atributos HTML são geralmente classificados como atributos obrigatórios , atributos opcionais , atributos padrão e atributos do evento :

  • Normalmente, os atributos obrigatórios e opcionais modificam elementos HTML específicos
  • Enquanto os atributos padrão podem ser aplicados à maioria dos elementos HTML.
  • Os atributos do evento, adicionados ao HTML versão 4, permitem que um elemento especifique scripts a serem executados em circunstâncias específicas.

Obrigatório e opcional

Usado por um elemento

Usado por dois elementos

Usado por vários elementos

Atributos padrão

Os atributos padrão também são conhecidos como atributos globais e funcionam com um grande número de elementos. Eles incluem os atributos padrão básicos: estes incluem accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title . Existem também alguns experimentais. Tanto xml: lang quanto xml: base se tornaram obsoletos. Os vários atributos aria- * melhoram a acessibilidade. Os atributos do manipulador de eventos são listados posteriormente.

Tecnicamente, todos os atributos padrão devem ser aceitos por todos os elementos, embora eles não funcionem com alguns elementos. A tabela a seguir lista alguns atributos padrão comuns e alguns elementos com os quais eles podem funcionar.

Elemento Eu iria classe estilo título dir lang xml: lang chave de acesso tabindex
<param> Eu iria
<head> dir lang xml: lang
<html> dir lang xml: lang
<meta> dir lang xml: lang
<title> dir lang xml: lang
<style> título dir lang xml: lang
<applet> Eu iria classe estilo título
<br> Eu iria classe estilo título
<frame> Eu iria classe estilo título
<frameset> Eu iria classe estilo título
<iframe> Eu iria classe estilo título
<basefont> Eu iria classe estilo título dir lang
<center> Eu iria classe estilo título dir lang
<dir> Eu iria classe estilo título dir lang
<font> Eu iria classe estilo título dir lang
<menu> Eu iria classe estilo título dir lang
<s> Eu iria classe estilo título dir lang
<strike> Eu iria classe estilo título dir lang
<u> Eu iria classe estilo título dir lang
<abbr> Eu iria classe estilo título dir lang xml: lang
<acronym> Eu iria classe estilo título dir lang xml: lang
<endereço> Eu iria classe estilo título dir lang xml: lang
<b> Eu iria classe estilo título dir lang xml: lang
<grande> Eu iria classe estilo título dir lang xml: lang
<blockquote> Eu iria classe estilo título dir lang xml: lang
<body> Eu iria classe estilo título dir lang xml: lang
<legenda> Eu iria classe estilo título dir lang xml: lang
<cite> Eu iria classe estilo título dir lang xml: lang
<code> Eu iria classe estilo título dir lang xml: lang
<col> Eu iria classe estilo título dir lang xml: lang
<colgroup> Eu iria classe estilo título dir lang xml: lang
<dd> Eu iria classe estilo título dir lang xml: lang
<del> Eu iria classe estilo título dir lang xml: lang
<dfn> Eu iria classe estilo título dir lang xml: lang
<div> Eu iria classe estilo título dir lang xml: lang
<dl> Eu iria classe estilo título dir lang xml: lang
<dt> Eu iria classe estilo título dir lang xml: lang
<em> Eu iria classe estilo título dir lang xml: lang
<fieldset> Eu iria classe estilo título dir lang xml: lang
<form> Eu iria classe estilo título dir lang xml: lang
<hr> Eu iria classe estilo título dir lang xml: lang
<h1> , <h2> , <h3> , <h4> , <h5> , <h6> Eu iria classe estilo título dir lang xml: lang
<i> Eu iria classe estilo título dir lang xml: lang
<img> Eu iria classe estilo título dir lang xml: lang
<ins> Eu iria classe estilo título dir lang xml: lang
<kbd> Eu iria classe estilo título dir lang xml: lang
<li> Eu iria classe estilo título dir lang xml: lang
<link> Eu iria classe estilo título dir lang xml: lang
<map> Eu iria classe estilo título dir lang xml: lang
<noframes> Eu iria classe estilo título dir lang xml: lang
<noscript> Eu iria classe estilo título dir lang xml: lang
<ol> Eu iria classe estilo título dir lang xml: lang
<optgroup> Eu iria classe estilo título dir lang xml: lang
<opção> Eu iria classe estilo título dir lang xml: lang
p Eu iria classe estilo título dir lang xml: lang
<pre> Eu iria classe estilo título dir lang xml: lang
<q> Eu iria classe estilo título dir lang xml: lang
<samp> Eu iria classe estilo título dir lang xml: lang
<pequeno> Eu iria classe estilo título dir lang xml: lang
<span> Eu iria classe estilo título dir lang xml: lang
<strong> Eu iria classe estilo título dir lang xml: lang
<sub> Eu iria classe estilo título dir lang xml: lang
<sup> Eu iria classe estilo título dir lang xml: lang
<table> Eu iria classe estilo título dir lang xml: lang
<tbody> Eu iria classe estilo título dir lang xml: lang
<td> Eu iria classe estilo título dir lang xml: lang
<tfoot> Eu iria classe estilo título dir lang xml: lang
<th> Eu iria classe estilo título dir lang xml: lang
<thead> Eu iria classe estilo título dir lang xml: lang
<tr> Eu iria classe estilo título dir lang xml: lang
<tt> Eu iria classe estilo título dir lang xml: lang
<ul> Eu iria classe estilo título dir lang xml: lang
<var> Eu iria classe estilo título dir lang xml: lang
<label> Eu iria classe estilo título dir lang xml: lang chave de acesso
<legenda> Eu iria classe estilo título dir lang xml: lang chave de acesso
<objeto> Eu iria classe estilo título dir lang xml: lang tabindex
<select> Eu iria classe estilo título dir lang xml: lang tabindex
<a> Eu iria classe estilo título dir lang xml: lang chave de acesso tabindex
<área> Eu iria classe estilo título dir lang xml: lang chave de acesso tabindex
<button> Eu iria classe estilo título dir lang xml: lang chave de acesso tabindex
<input> Eu iria classe estilo título dir lang xml: lang chave de acesso tabindex
<textarea> Eu iria classe estilo título dir lang xml: lang chave de acesso tabindex

Atributos do evento

Os atributos padrão incluem os atributos do manipulador de eventos . Eles são todos prefixados em-:

  • Onabort
  • onautocomplete
  • onautocompleteerror
  • onblur
  • cancelar
  • oncanplay
  • oncanplaythrough
  • em mudança
  • onclick
  • onclose
  • oncontextmenu
  • oncuechange
  • ondblclick
  • ondrag
  • ondragend
  • Ondragenter
  • ondragexit
  • Ondragleave
  • Ondragover
  • ondragstart
  • ondrop
  • mudança de ondulação
  • esvaziado
  • ligado
  • onerror
  • No foco
  • entrada
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • carregando
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • em pausa
  • em jogo
  • tocando
  • em progresso
  • onratechange
  • onreset
  • onresize
  • onscroll
  • procurado
  • em busca
  • onselect
  • onshow
  • onsort
  • montado
  • onsubmit
  • suspender
  • ontimeupdate
  • ontoggle
  • onvolumechange
  • esperando

Os atributos do evento, adicionados ao HTML versão 4, permitem que um elemento especifique scripts a serem executados em circunstâncias específicas. A tabela a seguir lista alguns atributos comuns do manipulador de eventos e alguns elementos com os quais eles podem funcionar.

Elemento No No No No No No No No No No No No No No No No No
<frameset> carregando onunload
<body> carregando onunload onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<abbr> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<acronym> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<endereço> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<b> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<grande> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<blockquote> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<legenda> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<center> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<cite> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<code> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<col> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<colgroup> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<dd> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<del> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<dfn> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<dir> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<div> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<dl> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<dt> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<em> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<fieldset> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<h1> , <h2> , <h3> , <h4> , <h5> , <h6> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<hr> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<i> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<ins> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<kbd> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<legenda> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<li> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<link> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<map> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<menu> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<noframes> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<noscript> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<objeto> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<ol> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<optgroup> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<opção> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
p onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<pre> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<q> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<s> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<samp> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<pequeno> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<span> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<strike> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<strong> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<sub> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<sup> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<table> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<tbody> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<td> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<tfoot> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<th> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<thead> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<tr> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<tt> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<u> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<ul> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<var> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<img> Onabort onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<a> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur No foco
<área> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur No foco
<button> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur No foco
<form> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur No foco
<label> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur No foco
<select> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur No foco em mudança
<input> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur No foco em mudança onselect
<textarea> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur No foco em mudança onselect

Veja também

Referências

  1. ^ "Índice dos atributos HTML 4" . W3C . Página visitada em 13 de fevereiro de 2015 .
  2. ^ "Em SGML e HTML" . Consórcio da World Wide Web . Recuperado em 16 de novembro de 2008 .
  3. ^ "XHTML 1.0 - Diferenças com HTML 4" . Consórcio da World Wide Web . Recuperado em 16 de novembro de 2008 .
  4. ^ Korpela, Jukka (6 de julho de 1998). "Por que os valores dos atributos devem sempre estar entre aspas em HTML" . Cs.tut.fi . Recuperado em 16 de novembro de 2008 .
  5. ^ "Tags usadas em HTML" . Consórcio da World Wide Web. 3 de novembro de 1992 . Recuperado em 16 de novembro de 2008 .
  6. ^ "Objetos, imagens e miniaplicativos em documentos HTML" . Consórcio da World Wide Web. 24 de dezembro de 1999 . Recuperado em 16 de novembro de 2008 .
  7. ^ No entanto, vários identificadores podem se aplicar ao mesmo elemento; em particular, um elemento pode estar dentro de outro elemento, cada um tendo um identificador.
  8. ^ "ID HTML" . www.w3schools.com . Página visitada em 2020-04-27 .
  9. ^ "Atributo de id global HTML" . www.w3schools.com . Página visitada em 2020-04-27 .
  10. ^ "Classes HTML" . www.w3schools.com . Página visitada em 2020-04-27 .
  11. ^ "Atributo de classe global HTML" . www.w3schools.com . Página visitada em 2020-04-27 .
  12. ^ "Atributos padrão HTML / XHTML" . w3schools.com.
  13. ^ "Atributos de evento padrão HTML / XHTML" . w3schools.com.
  14. ^ a b c "Atributos globais - HTML (HyperText Markup Language) MDN" . Página visitada em 12/02/2015 .
  15. ^ "Referência HTML - HTML (HyperText Markup Language) MDN" . Página visitada em 13 de fevereiro de 2015 .