Rafael Casachi

HTML: Atributos Globais dos Elementos

HTML: Atributos Globais dos Elementos
22 de setembro de 2016 11:12 | 0 Comentários

Hoje, vamos falar sobre os atributos globais dos elementos HTML. Os atributos conferem comportamentos ou características interessantes aos elementos HTML. Com a criação do HTML5, alguns atributos se transformaram em elementos globais, ou seja, podem ser usados por qualquer elemento HTML. Abaixo, listarei todos os atributos globais descritos pela W3C e como utilizá-los:

ACCESSKEY

Este atributo especifica a chave de atalho para ativar ou dar focus em um elemento. Com o HTML5, o accesskey virou atributo global. 

<input type="text" accesskey="f">

 

CLASS

Este atributo especifica um ou mais nomes de classes para um elemento. Essas classes podem ser usadas para aplicar estilos (css) ou comportamentos (javascript). Com o HTML5, o atributo class virou global.

<div class="bloco_texto bloco_vermelho j_clickBloco"></div>

Os nomes das classes são separadas por espaço e todas as classes devem iniciar com letras A-Z/a-z, seguido de letras (A-Z/a-z), números (0-9), hífen ( - ) ou underline ( _ ). Lembrando que os valores são case sensitive.

 

CONTENTEDITABLE

O contenteditable específica se o conteúdo do elemento é editável ou não. Quando o valor deste atributo não é definido, ele herda o valor do seu pai na hierarquia.

<div contenteditable="true"></div>

Os valores atribuídos ao contenteditable podem ser true (elemento é editável) ou false (elemento não é editável). Para saber sobre a compatibilidade deste atributo, acesse Caniuse.

 

CONTEXTMENU

Atribui um menu de contexto para um elemento. Este menu aparece quando o usuário clica com o botão direito no elemento. O atributo recebe o valor do id do menu que será aberto. Este atributo é apenas compatível com o Firefox, para verificar a compatibilidade acesse Caniuse.

<div contextmenu="rmenu_opcoes"></div>

 

DATA-*

Os atributos data-*, ou datasets, são usados para armazenar informações diversas e privadas para a página ou aplicação. Este atributo foi criado no HTML5. Para saber sobre sua compatibilidade acesse Caniuse.

<input type="text" data-codigo="3265">

 

DIR

O atributo dir específica a direção do texto para o conteúdo do elemento. Esta propriedade virou global com a vindo do HTML5.

<p dir="rtl">texto de exemplo</p>

Os valores aceitos são: ltr (valor padrão: left-to-right ou esquerda para direta), rtl (right-to-left ou direita para esquerda) e auto (quando o navegador identifica a direção do texto).

 

DRAGGABLE

Este atributo especifica se um elemento pode ser arrastado ou não. Por padrão, links e imagens possuem esse atributo setado como true.

<img src="imagem1.png" draggable="false">
  • true: específica que pode ser arrastado
  • false: específica que não pode ser arrastado
  • auto: utiliza o comportamento padrão do navegador

 

DROPZONE

Este atributo indica se o dado foi copiado, movido ou criado um link para ele quando arrastado. Este atributo foi criado no HTML5, porém não é suportado por nenhum navegador.

<div dropzone="move"></div>
  • copy: soltando o dado arrastado resultará em uma cópia do elemento
  • move: soltando o dado arrastado resultará na mudança do elemento para um novo local
  • link: soltando o dado arrastado, será criado um link para o elemento original

 

HIDDEN

Este atributo especifica que o elemento não é relevante e os navegadores não devem exibi-los. Foi criado no HTML5.

<div hidden></div>

 

ID

 O id atribui um nome de identificador único para um elemento. No HTML5, este atributo virou global.

<div id="bloco_um"></div>

Ao criar nomes para identificadores, devemos seguir algumas regras: o nome do identificador não pode ser repetido na página, os nomes devem conter pelo menos um caractere, não podem conter espaços e sempre lembrar que os valores são case sensitive.

 

LANG

O atributo lang é muito utilizado pelas engines de busca para classificar o idioma em que o conteúdo está escrito. Com o HTML5, este atributo pode ser aplicado em qualquer elemento HTML.

<html lang="pt_BR">
  <head></head>
  <body>
    <p>Parágrafo em português</p>
    <p lang="en">Example of a paragraph in English</p>
  </body>
</html>

Para conhecer os códigos dos idiomas, acesse Iana.org > Language Codes.

 

SPELLCHECK

Este atributo especifica para os user agents se o elemento tem a ortografia e a gramática checada ou não. Este atributo foi criado no HTML5. Para checar a compatibilidade acesse Caniuse.

<input type="text" spellcheck="true">

 

STYLE

Este atributo especifica um estilo CSS Inline para o elemento. O inline style reescreve qualquer estilo escrito globalmente. No HTML5, o style virou global.

<p style="margin-left:10px; color:#900; font-weight:600;">Texto de Exemplo</p>

 

TABINDEX

Este atributo especifica a ordem de tabulação de um elemento e apenas virou global na versão do HTML5.

<input type="text" tabindex="2">

 

TITLE

O title atribui informações adicionais sobre o elemento e é normalmente usado para mostrar informações em uma tooltip. O title também é usado por search engines para capturar e classificar informações. Este atributo apenas virou global no HTML5.

<a href="https://translate.google.com/" title="Tradutor do Google">Acesse o GoogleTranslate</a>

 

TRANSLATE

O atributo translate específica se o conteúdo do elemento deve ser traduzido ou não. Este atributo foi criado no HTML5, mas não é suportado pela maioria dos navegadores.

<p translate="no">Don't translate that!</p>

 

Achou fácil? Gostou da lista? Ainda tem dúvidas? Deixe seu comentário abaixo e não deixe de acompanhar outros posts sobre HTML5.

Não seja chato, deixe seu comentário:

Veja outros comentários:

Ninguém comentou ainda. Corra e seja o primeiro.