Como usar Atributos Globais do HTML5

Atributos globais se aplicam a todos os elementos HTML, pois eles fornecem informaç�es adicionais que os navegadores usam para determinar a forma como os elementos s�o exibidos na p�gina. Vamos conhecer alguns atributos importantes nas seç�es a seguir.

O Atributo accesskey

O atributo accesskey nos permite especificar um atalho de teclado para acessar ou ativar um elemento em nossa p�gina HTML5. A ideia aqui � fornecer ao usu�rio uma forma de navegar pelos elementos de nossa p�gina usando atalhos. � importante mostrar de alguma forma aos visitantes do site que esses atalhos est�o dispon�veis. Na Listagem 1 vemos a sintaxe do atributo accesskey e na Listagem 2 um exemplo de uso em um simples formul�rio.

Listagem 1. Sintaxe do atributo accesskey.


  <elemento accesskey="tecla de atalho">

Listagem 2. Usando o atributo accesskey


  <!DOCTYPE html>
  <html lang="pt-BR">
      <head>
          <title>O Atributo Accesskey</title>
          <meta charset="utf-8">
      </head>
      <body>
          <section>
              <h2>O atributo Accesskey</h2>
              <form>
                  <label for="nome">Nome:</label>
                  <input type="text" id="nome" accesskey="n">
                  <br>
                  <label for="senha">Senha:</label>
                  <input type="password" id="senha"  accesskey="s">
                  <br>
                  <input type="submit" value="Enviar">
              </form>
          </section>
      </body>
  </html>

N�o deixe de conferir o curso de CSS da DevMedia.

Para o acesso do campo de nome do nosso formul�rio n�s definimos a tecla de atalho n e para o campo senha a tecla escolhida foi s. Usamos a tecla de atalho em conjunto com a tecla ALT em plataformas Windows, como podemos observar na Figura 1.

Figura 1. O efeito do atributo accesskey.

Notas sobre o atributo accesskey.

O atributo accesskey pode ser usado em qualquer elemento HTML 5;
N�o � case sensitive (voc� pode usar letras mai�sculas ou min�sculas para definir os atalhos);
A combinaç�o de teclas pode variar de um sistema operacional para outro. Em sistemas Windows usamos a tecla Alt em conjunto com o valor do atributo accesskey, ex: Alt+N, Alt+S.

Saiba mais: Curso de HTML B�sico

O Atributo dir

O atributo dir especifica a direç�o de elementos de texto. Os dois valores poss�veis s�o ltr (o texto � escrito da esquerda para a direita) e rtl (o texto � escrito da direita para a esquerda). A Listagem 3 mostra a sintaxe do atributo.

Listagem 3. A sintaxe do atributo dir.


  <elemento dir="valor de dir">

A Listagem 4 mostra os dois valores sendo usados em uma p�gina HTML5.

Listagem 4. Usando o atributo global dir.


  <!DOCTYPE html>
  <html lang="pt-BR">
      <head>
          <title>O Atributo Dir</title>
          <meta charset="utf-8">
      </head>
      <body>
          <section>
              <h2>O atributo Dir - Exemplo de Uso</h2>
              <p dir="ltr">Texto escrito da esquerda para a direita</p>
              <p dir="rtl">Texto escrito da direita para a esquerda</p>
          </section>
      </body>
  </html>

Podemos ver o efeito do atributo dir na Figura 2.

Figura 2. O atributo dir em aç�o.

O Atributo lang

O atributo lang � usado para especificar o idioma usado em uma p�gina HTML ou em parte dela. Este � usado pelos motores de busca e pelos navegadores. A W3C (entidade organizadora dos padr�es na web) recomenda que o idioma principal seja declarado na tag html, como vemos na Listagem 5.

Listagem 5. Usando o atributo lang em uma p�gina.


  <html lang="pt-BR">
  ...
  </html>

Tamb�m � poss�vel declarar o atributo lang por par�grafo, embora essa t�cnica n�o seja muito �til. Um exemplo de sua declaraç�o vemos na Listagem 6.

Listagem 6. Usando o atributo lang em um par�grafo.


  <p lang="en">text here�</p>

O Atributo contenteditable

Imagine editar ou modificar uma p�gina enquanto navega por ela: isso � poss�vel com o uso do atributo global do HTML5 contenteditable, que torna qualquer elemento de texto edit�vel. Na Listagem 7 vemos a sintaxe b�sica do elemento.

Listagem 7. Sintaxe do atributo contenteditable.


  <elemento contenteditable="true | false">O texto edit�vel...</p>

Podemos informar dois valores poss�veis para o atributo contenteditable: true e false, conforme Tabela 1.

Valor	Descriç�o
true	Informa que o texto pode ser editado
false	Informa que o texto N�O pode ser editado

Tabela 1. Os valores do atributo contenteditable

Vejamos como fica uma p�gina usando o atributo contenteditable na Listagem 8.

Listagem 8. Usando o atributo contenteditable exemplo completo.


  <!DOCTYPE html>
  <html lang="pt-BR">
      <head>
          <title>Atributo contenteditable</title>
          <meta charset="utf-8">
      </head>
      <body>
          <section>
              <h2>O atributo contenteditable - Exemplo de Uso</h2>
              <h2 contenteditable="true">T�tulo Edit�vel</h2>
                                     <p contenteditable="true">Este texto pode ser editado</p>
              
          </section>
      </body>
  </html>

O Atributo hidden

Usamos este atributo quando precisamos esconder algum texto na nossa p�gina, tendo como um bom exemplo de uso quando � necess�rio deixar certos campos em um formul�rio ocultos at� que outro campo seja preenchido. Neste caso, devemos usar um pouco de JavaScript, como no exemplo da Listagem 9.

Listagem 9. O Atributo hidden de forma inteligente.


  <!DOCTYPE html>
  <html lang="pt-BR">
      <head>
          <title>O Atributo hiddenn</title>
          <meta charset="utf-8">
          <script>
              var esconderTexto = function() {
                  var elemento = document.getElementById("esconda");
   
                  if (var elemento.hasAttribute("hidden")) {
                      elemento.removeAttribute("hidden");
                  }
                  else {
                      elemento.setAttribute("hidden", "hidden");
                  }
              }
          </script>
      </head>
      <body>
          <section>
              <h2>O atributo hidden</h2>
              <button onclick="esconderTexto()">Esconda-me</button>
              <table>
                  <tr>
                      <th>Nome</th>
                      <th>Pa�s</th>
                  </tr>
                  <tr>
                      <td>Daniel Rodrigues</td>
                      <td>Brasil</td>
                  </tr>
                  <tr id="esconda">
                      <td>Teste da Silva</td>
                      <td>Brasil</td>
                  </tr>
              </table>
   
          </section>
      </body>
  </html>

Outra forma de usar sem precisar de JavaScript � mostrada na Listagem 10.

Listagem 10. O atributo hidden em um elemento HTML.


  <article hidden>
      <h2>T�tulo Escondido</h2>
      <p>Texto escondido.</p>
  </article>

Usando dessa forma evitamos alguns display:none em nosso CSS, al�m de ser a forma mais semanticamente correta, de acordo com W3C (�rg�o que organiza e mantem o HTML5). Ele pode ser usado em todos os elementos HTML.

O m�todo document.getElementById()

No exemplo de uso do atributo hidden vimos o m�todo getElementById(). Agora entenderemos melhor o funcionamento deste m�todo DOM (sigla em Ingl�s para Modelo de Objetos do Documento - � a interface entre a linguagem JavaScript e os objetos do HTML5). O m�todo getElementById() acessa o primeiro elemento com o ID especificado (que � obrigat�rio) e sua sintaxe b�sica � mostrada na Listagem 11.

Listagem 11. O m�todo getElementById () sintaxe b�sica.


  document.getElementById("id")

Vejamos um exemplo completo de utilizaç�o do m�todo getElementById() na Listagem12.

Listagem 12. O m�todo getElementById () exemplo completo.


  <html>
      <head>
          <script>
              function PegaValor()
              {
                  var x = document.getElementById("meuTitulo");
                  alert(x.innerHTML);
              }
          </script>
      </head>
      <body>
          <h1 id="meuTitulo" onclick="PegaValor()">Clique Aqui!</h1>
      </body>
  </html>

Observemos na linha alert(x.innerHTML); a propriedade innerHTML do HTML DOM que define ou retorna o HTML interno de um elemento. Neste caso estamos retornando a pr�pria p�gina.

Espero que tenham gostado. Um grande abraço a todos e at� a pr�xima.

Especificaç�es dos atributos globais HTML5