recursal/MDN huggingface dataset:
HTML el atributo: minlength
===========================

El atributo **`minlength`** define el número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en un `<input>` o `<textarea>`. Debe ser un valor entero 0 o superior. Si no se especifica una longitud mínima o se especifica un número no válido, el **`<input>`** no tiene una longitud mínima. Este valor debe ser menor o igual que el valor de maxlength (en-US); de lo contrario, el valor nunca será válido, puesto que es imposible cumplir con ambos criterios.

El **`<input>`** fallará la restricción de validación si la longitud del valor de texto del campo es menor que la longitud mínima de unidades de código UTF-16, con `validityState.tooShort` (en-US) devolviendo `true`. La validación de la restricción solo se aplica cuando el usuario cambia el valor. Una vez que el envío falla, algunos navegadores mostrarán un mensaje de error que indica la longitud mínima requerida y la longitud actual.

Ejemplos
--------

Al agregar `minlength="5"`, el valor debe estar vacío o tener cinco caracteres o más para ser válido.


```html
<label for="fruit"
 >Ingresa un nombre de fruta que tenga al menos 5 letras</label
>
<input type="text" minlength="5" id="fruit" />
```


Podemos usar pseudoclases para estilizar el elemento en función de si el valor es válido. El valor será válido siempre que sea `null` (vacío) o tenga cinco o más caracteres. *Lima* no es válido, *limón es válido*.


```css
input {
  border: 2px solid currentcolor;
}
input:invalid {
  border: 2px dashed red;
}
input:invalid:focus {
  background-image: linear-gradient(pink, lightgreen);
}
```

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # the-maxlength-and-minlength-attributes |

Compatibilidad del navegador
----------------------------

### html.elements.input.minlength

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.textarea.minlength

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ve también
----------

* maxlength (en-US)
* size (en-US)
* pattern (en-US)
* Restricción de validación (en-US)
Atributos de configuración CORS
===============================

En HTML5, algunos elementos HTML que dan soporte para CORS (en-US), tales como `<img>` o `<video>`, tienen un atributo `crossorigin` (propiedad `crossOrigin`), que les permite configurar las peticiones CORS de los datos que se cargan. Estos atributos están enumerados, y tienen los siguientes valores posibles:

| Palabra clave | Descripción |
| --- | --- |
| `anonymous` | CORS, las solicitudes de este elemento no tendrán establecido el indicador de credenciales. |
| `use-credentials` | CORS, las solicitudes de este elemento tendrán marcado el indicador de credenciales; esto significa que la solicitud proporcionará credenciales. |

Por defecto, es decir cuando el atributo no es específicado, CORS no se usa. La palabra clave "anonymous" indica que no habrá intercambio de credenciales de usuario a través de las cookies, ni por parte del cliente con certificados SSL o autenticación HTTP como se describe en la sección de terminología de la especificación CORS.

Una clave inválida y un string vacío serán gestionados como una clave anónima.

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # cors-settings-attributes |

Compatibilidad de navegadores
-----------------------------

### html.elements.img.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.link.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.script.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.video.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Control de acceso HTTP (CORS)
* Atributo HTML: `rel`
itemid
======

El atributo global **`itemid`** proporciona microdatos en forma de un identificador global único de un elemento.

Un atributo `itemid` solo se puede especificar para un elemento que tiene atributos `itemscope` e `itemtype` (en-US). Además, `itemid` solo se puede especificar en elementos que poseen un atributo `itemscope` cuyo `itemtype` correspondiente se refiere o define un vocabulario que admite identificadores globales.

El significado exacto de un identificador global de `itemtype` lo proporciona la definición de ese identificador dentro del vocabulario especificado. El vocabulario define si pueden coexistir varios elementos con el mismo identificador global y, de ser así, cómo se manejan los elementos con el mismo identificador.

**Nota:** La definición WHATWG especifica que un `itemid` debe ser una URL. Sin embargo, el siguiente ejemplo ilustra correctamente que también se puede usar un URN (en-US). Esta inconsistencia puede reflejar la naturaleza incompleta de la especificación de Microdata.

Ejemplo
-------

### Representación de datos estructurados para un libro

Este ejemplo utiliza atributos de microdatos para representar los siguientes datos estructurados:

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | https://schema.org/Book: urn:isbn:0-374-22848-5 |
| itemprop | title | Owls of the Eastern Ice |
| itemprop | author | Jonathan C Slaght |
| itemprop | datePublished | 2020-08-04 |

#### HTML


```html
<dl
 itemscope
 itemtype="https://schema.org/Book"
 itemid="urn:isbn:0-374-22848-5<">
  <dt>Título</dt>
  <dd itemprop="title">Owls of the Eastern Ice</dd>
  <dt>Autor</dt>
  <dd itemprop="author">Jonathan C Slaght</dd>
  <dt>Fecha de publicación</dt>
  <dd>
    <time itemprop="datePublished" datetime="2020-08-04"
 >4 de Agosto del 2020</time
 >
  </dd>
</dl>
```


#### Resultado

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # attr-itemid |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Todos los atributos globales.
* Otros atributos globales relacionados con los microdatos:
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype` (en-US)
autocapitalización
==================

El atributo global `autocapitalize` es un atributo enumerado que controla si la entrada de texto se escribe en mayúsculas automáticamente a medida que el usuario la introduce/edita. El atributo debe tomar uno de los siguientes valores:

* `off` o `none`, no se aplica capitalización automática (todas las letras están predeterminadas en minúsculas)
* `on` o `sentences`, la primera letra de cada oración de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas
* `words`, la primera letra de cada palabra de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas
* `characters`, todas las letras de manera predeterminada deben estar en mayúsculas

El atributo `autocapitalize` no afecta el comportamiento al escribir en un teclado físico. En cambio, afecta el comportamiento de otros mecanismos de entrada, como teclados virtuales en dispositivos móviles y entrada de voz. El comportamiento de tales mecanismos es que a menudo ayudan a los usuarios escribiendo en mayúscula automáticamente la primera letra de las oraciones. El atributo `autocapitalize` permite a los autores redefinir ese comportamiento por elemento.

El atributo `autocapitalize` nunca hace que se habilite la autocapitalización para un elemento `<input>` con un atributo `type` cuyo valor es `url`, `email` o `password`.

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # attr-autocapitalize |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
title
=====

El atributo global **title** contiene un texto representado información relacionada al elemento al cual pertenece . Tal información puede típicamente , pero no necesariamente , ser presentada al usuario como un tip . Aquí hay algunos usos típicos para este atributo :

* Vínculo : el título o la descripción del documento vinculado
* Elemento mediático como una imagen : una descripción o créditos asociados
* Párrafo : una nota de pié de página o comentario acerca de este
* Cita : alguna información sobre el autor y otros datos .

Si este atributo es omitido , significa que el título del ancestro más cercano de este elemento es todavía relevante para este (puede usarse legítimamente como un tip para ese elemento ) . Si el atributo es establecido como la *cadena vacía* , significa explícitamente que el título de su ancestro más cercano no es relevante para este elemento ( y no debería de usarse en el tip para ese elemento )

Semánticas adicionales se adjuntan a los atributos de **title** de los elementos `<link>`, `<abbr>`, `<input>` y `<menuitem>` (en-US)

El atributo **title** puede contener varias líneas . Cada `U+000A LINE FEED` (`LF`) insertada representa una línea nueva . Se debe tener precaución ya que esto significa que :


```html
<p>
  Líneas nuevas en title deben de tomarse en cuenta , como esta
  <abbr title="Este es un título multilínea">ejemplo </abbr>.
</p>
```


define un título de dos líneas .

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # the-title-attribute |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* atributos globales .
* `HTMLElement.title` (en-US) que refleja a este atributo .
itemprop
========

Podemos dar más información al motor de búsqueda acerca de imágenes o datos adentro de cualquier tipo de etiquetas , como las propiedades : actores , clasificación ,genero . Para etiquetar las propiedades de un elemento , usa el atributo itemprop . Por ejemplo , para identificar al actor de una película añadir itemprop="director" al elemento que encierra el nombre del director.

Aquí hay un ejemplo .


```html
<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span
 >Director: <span itemprop="director">James Cameron</span> (born August 16,
    1954)</span
 >
  <span itemprop="genre">Ciencia ficcion</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"
 >Trailer</a
 >
</div>
```


Para más información acerca de los atributos relacionados consultar https://schema.org/docs/gs.html
spellcheck
==========

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El atributo global **spellcheck** es un atributo enumerado que define si el elemento debe de ser verificado por errores de deletreado. Puede tener los siguientes valores :

* `true`, que indica que elemento debe de ser checado para errores de deletreado si es posible.
* `false`, que indica que el elemento no debe de ser checado para errores de deletreado.

Si este atributo no está establecido , su valor por default es de tipo elemento y definido por el explorador . El valor por default puede der *heredado ,* lo que significa que el contenido del elemento será checado para errores de deletreado solo si el ancestro más cercano tiene un estado de *spellcheck* con valor `true`.

Puedes consultar este artículo para ver un ejemplo comprensivo del uso de este atributo.

Este es un atributo *enumerado* y no uno*Booleano* . Esto significa que el uso explícito de uno de los valores `true` o `false` es obligatorio y que una escritura como `<label spellcheck>Example Label</label>` no está permitida . El uso correcto es `<label spellcheck="true">Example Label</label>`.

Este atributo es meramente un indicio para el explorador : los exploradores no son obligados a tener disponibilidad para verificar los errores de deletreado , incluso si el atributo **spellcheck** es establecido como `true` y el explorador soporta verificación de deletreado .

El valor por default de este atributo es dependiente del explorador y del elemento :

| Explorador | `<html>` | `<textarea>` | `<input>` | others | Comment |
| --- | --- | --- | --- | --- | --- |
| Firefox | `false` | `false` | `false` | *inherited* | When `layout.spellcheckDefault` is `0` |
| **`false`** | **`true`** | ***inherited*** | ***inherited*** | **When `layout.spellcheckDefault` is `1` (default
value)** |
| `false` | `true` | `true` | *inherited* | When `layout.spellcheckDefault` is `2` |
| Seamonkey | `false` | `false` | `false` | *inherited* | 
 When `layout.spellcheckDefault` is
 `0` |
| **`false`** | **`true`** | ***inherited*** | ***inherited*** | **When `layout.spellcheckDefault` is
1 (default
value)** |
| `false` | `true` | `true` | *inherited* | 
 When `layout.spellcheckDefault` is
 `2` |
| Camino | `false` | `false` | `false` | *inherited* | 
 When `layout.spellcheckDefault` is
 `0` |
| `false` | `true` | *inherited* | *inherited* | 
 When `layout.spellcheckDefault` is
 `1` |
| **`false`** | **`true`** | **`true`** | ***inherited*** | **When
layout.spellcheckDefault
is `2` **(default value)**** |
| Chrome | `false` | `true` | ? | *inherited* |
| Internet Explorer | `false` | `true` | ? | *inherited* |
| Opera | `false` | `true` | ? | *inherited* |
| Safari | `false` | `true` | ? | *inherited* |

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # attr-spellcheck |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Atributos globales
itemref
=======

Resumen
-------

Las propiedades que no son descendientes de un elemento con el atributo `itemscope` pueden ser asociadas con el elemento usando un **itemref** . **Itemref** provee una lista de ids de los elementos (no `itemids`) con propiedades adicionales en otras partes dentro del documento .

El atributo itemref puede ser solo especificado en elementos que tienen un atributo itemscope especificado .

**Nota:** el atributo itemref no es parte del modelo de micro datos . Es solamente un constructor sintáctico que ayuda a los autores en el ingreso de anotaciones a las páginas donde los datos que se van a anotar no siguen una estructura de arbol conveniente . Por ejemplo , permite a los autores marcar los datos en una tabla para que cada columna defina un item separado mientras se mantienen las propiedades en las celdas .

Ejemplo
-------

### HTML


```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```

### Datos estructurados

| id's | itemscope | itemref |  | (nombre de itemprop ) | (valor de itemprop) |
| --- | --- | --- | --- | --- | --- |
| id=amanda | itemscope | itemref=a,b |  |  |  |
| id=a |  |  | itemprop | name | Amanda |
| id=b | itemscope | itemref=c |  | band |  |
| id=c |  |  | itemprop | Band | Jazz Band |
|  |  | itemprop | Size | p |

### Resultado

Especificación
--------------

| Especificación | Estatus |
| --- | --- |
| itemref | Nota WG - No se encuentra activamente en desarrollo |
hidden
======

El atributo global **hidden** es un atributo Booleano que indica que el elemento todavía no está , o ya no es relevante . Por ejemplo , puede ser usado para ocultar elelementos de la página que no pueden ser usados hasta que el proceso de login se haya completado . El explorador no dibujará dichos elementos .

Esta atributo no debe de usarse para ocultar contenido que pudera ser legítimamente mostrado . Por ejemplo , no debe de ser usado para ocultar paneles de pestañas o una interfaz con pestañas , ya que esta es una decisión de estilo y otro estilo mostrandolos lo llevaría a una página perfectamente mostrada .

Los elementos ocultos no deben de ser vinculados desde elementos no ocultos y elementos que son descendientes de un elemento oculto todavía activo ; lo que significa que los elementos del script pueden todavía ejecutarse y los elementos de formulario pueden todavía enviarse .

**Nota:** Cambiando el valor de la propiedad CSS `display` de un elemento con el atributo `hidden` sobrecarga el comportamiento . For ejemplo , un elemeneto diseñado `display : flex` será mostrado en la pantalla independientemente de que el atributo `hidden` esté presente .

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # the-hidden-attribute |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* atributos globales
tabindex
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback

**Nota:** El valor máximo para tabindex no debe de exceder 32767 (sección 17.11.1 del W3C). Si no se especifica, el valor asignado por defecto es -1.

El atributo global **tabindex** indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla *Tab*, de ahí el nombre). Acepta un entero como valor, con diferentes resultados que dependen de dicho valor:

* un *valor negativo* (usualmente tabindex="-1") significa que el elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación secuencial del teclado. Es útil para crear widgets accesibles con JavaScript.
* tabindex="0" significa que el elemento debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo es definido por convención de la plataforma.
* un *valor positivo* significa que debe poder recoger el foco y alcanzable a través de la navegación secuencial del teclado; su orden relativo es definido por el valor del atributo: la secuencia sigue el aumento del número de **tabindex**. Si varios elementos comparten el mismo tabindex, su orden relativo sigue la posición relativa en el documento.
* Un elemento con valor 0, un valor inválido o sin valor de **tabindex**, debe de ser posicionado después de elementos con un **tabindex** postivo en el orden de navegación secuencial del teclado.

Puede consultar este artículo para ver una explicación compresiva de la administración de la recepción de foco.

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # attr-tabindex |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
class
=====


 El atributo global **class** es una lista de las clases del elemento separada por espacios . Las clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a través de los selectores de clase o funciones como el método `document.getElementsByClassName` del DOM.

Aunque la especificación no define los requerimientos para el nombre de las clases , se alienta a los desarrolladores web a usar nombres que describan el propósito semántico del elemento, en lugar de la presentación del elemento (e.g., *atributo* para describir un atributo en lugar de *itálica,* aunque un elemento de esta clase puesde ser presentado por *itálica*). Los nombres semanticos permanecen lógicos incluso si la presentación de la página cambia .

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # global-attributes:classes-2 |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* atributos globales
style
=====

El atributo global **style** contiene declaraciones de estilo CSS a ser aplicados a un elemento . Notar que es recomandado para los estilos ser definidos en archivo o archivos separados . Este atributo y el elemento `<style>` tienen principalmente el propósito de permitir el estilizamiento rápido , por ejemplo para propósitos de pruebas .

**Nota de uso :** Este atributo no debe de ser usado para comunicar información semántica . Incluso si todo el estilo es removido , una página debería mantenerse semánticamente correcta . Típicamente no debe de ser usado para ocultar información irrelevante ; esto debe de hacerse usando el atributo hidden .

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # the-style-attribute |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* atributos globales.
contextmenu
===========

El atributo global **contextmenu** es el **id** de un `<menu>` para nosotros como el menu contextual para este elemento .

Un *menu contextual* es un menu que aparece sobre la interacción del usuario , como por ejemplo un click derecho . HTML5 ahora permite modificar este menú . Aquí hay unos ejemplos de implementación , incluyendo menús anidados .

Ejemplo
-------


```html
<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurra! Estos aprendiendo sobre ContextMenuI en MDN a través de Mozilla ');"></menuitem>
      <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using\_HTML\_context\_menus');"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>En cualquier parte del ejemplo puedes compartir la página en twitter y Facebook usando el menú de compartir de tu menú contextual.</li>
    <li><pre contextmenu="changeFont" id="fontSizing">En este elemento específico de la lista , puedes cambiar el tamaño del texto usando  las acciones "Incremenrar/Decrementar" de tu menú contextual ./pre></li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">En la imagen de abajo , puedes accionar la accion "Cambio de Imagen " en tu menú contextual .</li><br />
    <img src="https://developer.mozilla.org/media/img/promote/promobutton\_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
    <menu type="context" id="ChangeImage">
      <menuitem label="Change Image" onclick="changeImage()"></menuitem>
    </menu>
  </ol>
</body>
```


en conjunto con este Javascript


```js
function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}
function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}
function changeImage() {
  var j = Math.ceil(Math.random() \* 39 + 1);
  document.images[0].src =
    "https://developer.mozilla.org/media/img/promote/promobutton\_mdn" +
    j +
    ".png";
}
```


resulta en :

Especificaciones
----------------

El atributo `contextmenu` está obsoleto y se eliminará de todos los navegadores.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* atributos globales