Atributos Globales

Los atributos globales son atributos comunes a todos los elementos HTML. Pueden usarse en todos los elementos, aunque pueden no tener efecto en algunos de ellos.

<XXX HIDDEN>...</XXX>

En el ejemplo anterior aunque XXX no es ninguna etiqueta HTML valida, aun asi el contenido sera escondido.

1. ID

Especifica un nombre único de identificación en todo el documento, principalmente para acciones con CSS o JavaScript.

<h1 id=miH1>Hola mundo</h1>
<button onclick='cambia()'>Cambia texto</button>

<script>
function cambia() {
   if (document.getElementById('miH1').innerHTML == 'Hola mundo'){
      document.getElementById('miH1').innerHTML = 'Que tengas un buen dia';
   }else{
      document.getElementById('miH1').innerHTML = 'Hola mundo';
   }
}
</script>

Hola mundo

Se puede acceder a este elemento a través del selector de clase de CSS (#) o el método Document.getElementsById() en JavaScript.

2. CLASS

Especifica una o mas identificadores múltiples, principalmente para acciones con CSS y JavaScript.

<p class=tip>Este es el párrafo</p>

Se puede acceder a este elemento a través del selector de clase de CSS (punto) o el método Document.getElementsByClassName() en JavaScript.

3. STYLE

Añade declaración CSS, para alterar el estilo particular de un elemento.

<p STYLE='color:blue;'>Este es un párrafo azul.</p>

Este es un párrafo azul.

4. TITLE

Especifica una información extra de asesoramiento sobre el elemento que aparece como tooltip cuando posas el puntero del ratón sobre el elemento.

<p TITLE='Los mejores apuntes HTML en español, gratis.'>Apuntes HTML</p>

Apuntes HTML

5. CONTENTEDITABLE

Especifica si el contenido de un elemento es editable o no.

<p contenteditable=true>Los mejores apuntes HTML en español, gratis.</p>

Los mejores apuntes HTML en español, gratis.

6. HIDDEN

Para esconder un elemento.

<p hidden>Este párrafo no se ve.</p>

7. DRAGGABLE

Especifica si un elemento puede o no ser arrastrado. true|false|auto

Valores atributo DRAGGABLE
ValorDescripción
trueEspecifica que elemento es arrastrable
falseEspecifica que elemento NO es arrastrable
autoUsa la omisión del navegador
<p ondrop="drop(event)" ondragover="allowDrop(event)" style="padding:10px;border:1px solid red">Aqui</p>
<p id=drag draggable=true ondragstart="drag(event)">Este parrafo es arrastrable. Arrastralo al rectangulo superior.</p>

Aqui

Este párrafo es arrastrable. Arrastralo al rectángulo superior.

Los enlaces e imágenes son DRAGGALES por omisión.

8. DROPZONE

Resulta en una copia del elemento arrastrado. copy|move|link.

Valores atributo DRAGGABLE
ValorDescripción
copyEl elemento arrastrado es copiado
moveEl elemento arrastrado es movido
linkEl elemento arrastrado resulta en un enlace al dato original
<div DROPZONE=copy></div>

Aun no soportado por ningún navegador.

9. TABINDEX

Especifica el orden del elemento al hacer tab. Valores enteros.

<a href=#top tabindex=1>Arriba</a>

Arriba

10. ACCESSKEY

Genera un acceso rapido de teclado para el elemento actual, al que se llama con la tecla ALT. Proporciona una lista de caracteres, separados por espacio.

<a href=https://apuntes.perut.org/CSS/ accesskey=c>CSS</a><br>
<a href=https://apuntes.perut.org/JS/ accesskey=j>JavaScript</a>

CSS
JavaScript

11. DIR

Define la dirección del texto del elemento. Valores: ltr|rtl|auto.

<p DIR=rtl>Puedes leer esto ?</p>

Puedes leer esto ?

12. SPELLCHECK

Especifica si los elementos pueden ser traducidos o no. yes|no

<INPUT TYPE=text SPELLCHECK=yes>

13. LANG

El atributo lang especifica el idioma del contenido del elemento.yes|no

Posibles lenguajes
SiglasDescripción
esEspañol
enIngles
quQuechua
<p LANG=qu>Sonqochaypi kashanki.</p>

Sonqochaypi kashanki.

14. TRANSLATE

Especifique que algunos elementos no deben traducirse.

<p translate=no>No traduzcas esto</p>

No traduzcas esto