HTML5 - Atributos
Conforme explicado no capítulo anterior, os elementos podem conter atributos que são usados para definir várias propriedades de um elemento.
Alguns atributos são definidos globalmente e podem ser usados em qualquer elemento, enquanto outros são definidos apenas para elementos específicos. Todos os atributos têm um nome e um valor e se parecem com os mostrados abaixo no exemplo.
A seguir está o exemplo de atributos HTML5 que ilustram como marcar um elemento div com um atributo denominado class usando um valor de "exemplo" -
<div class = "example">...</div>Os atributos só podem ser especificados dentro start tags e nunca deve ser usado em end tags.
Os atributos HTML5 não diferenciam maiúsculas de minúsculas e podem ser escritos em maiúsculas ou misturas, embora a convenção mais comum seja usar minúsculas.
Atributos Padrão
Os atributos listados abaixo são suportados por quase todas as tags HTML 5.
| Atributo | Opções | Função |
|---|---|---|
| chave de acesso | Usuário definido | Especifica um atalho de teclado para acessar um elemento. |
| alinhar | direita, esquerda, centro | Alinha tags horizontalmente |
| fundo | URL | Coloca uma imagem de fundo atrás de um elemento |
| bgcolor | valores numéricos, hexadecimais, RGB | Coloca uma cor de fundo atrás de um elemento |
| classe | Usuário definido | Classifica um elemento para uso com folhas de estilo em cascata. |
| contenteditável | verdadeiro falso | Especifica se o usuário pode editar o conteúdo do elemento ou não. |
| menu contextual | Id do menu | Especifica o menu de contexto para um elemento. |
| dados-XXXX | Usuário definido | Atributos personalizados. Os autores de um documento HTML podem definir seus próprios atributos. Deve começar com "data-". |
| arrastável | verdadeiro, falso, automático | Especifica se um usuário tem ou não permissão para arrastar um elemento. |
| altura | Valor numérico | Especifica a altura das tabelas, imagens ou células da tabela. |
| escondido | escondido | Especifica se o elemento deve ser visível ou não. |
| Eu iria | Usuário definido | Nomeia um elemento para uso com folhas de estilo em cascata. |
| item | Lista de elementos | Usado para agrupar elementos. |
| itemprop | Lista de itens | Usado para agrupar itens. |
| verificação ortográfica | verdadeiro falso | Especifica se o elemento deve ter sua ortografia ou gramática verificada. |
| estilo | Folha de estilo CSS | Especifica um estilo embutido para um elemento. |
| sujeito | ID de definição do usuário | Especifica o item correspondente do elemento. |
| tabindex | Número da guia | Especifica a ordem das guias de um elemento. |
| título | Usuário definido | Título "Pop-up" para seus elementos. |
| valign | topo, meio, fundo | Alinha tags verticalmente em um elemento HTML. |
| largura | Valor numérico | Especifica a largura das tabelas, imagens ou células da tabela. |
Para obter uma lista completa de tags HTML5 e atributos relacionados, verifique nossa referência a tags HTML5 .
Atributos personalizados
Um novo recurso introduzido no HTML 5 é a adição de atributos de dados personalizados.
Um atributo de dados personalizados começa com data-e seria nomeado com base em suas necessidades. Aqui está um exemplo simples -
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>O código acima será HTML5 perfeitamente válido com dois atributos personalizados chamados datasubject e data-level . Você seria capaz de obter os valores desses atributos usando APIs JavaScript ou CSS da mesma forma que obtém para atributos padrão.