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.

• ID
• CLASS
• STYLE
• TITLE
• CONTENTEDITABLE
• HIDDEN
• DRAGGABLE
• DROPZONE
• TABINDEX
• ACCESSKEY
• DIR
• SPELLCHECK
• LANG
• TRANSLATE

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>

Este párrafo no se ve.

<XXX HIDDEN>...</XXX>

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

7. DRAGGABLE

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

<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.

<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

<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