recursal/MDN huggingface dataset:
<progress>: Elemento indicador de progreso
==========================================

La etiqueta **HTML `<progress>`** se utiliza para visualizar el progreso de una tarea. Aunque los detalles de como se muestran depende directamente del navegador que utiliza el cliente, aunque básicamente aparece una barra de progreso.

Pruébalo
--------

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examplesand send us a pull request.

* *Categorias de contenido*Flujo de contenido, contenido de redacción, contenido etiquetable, contenido palpable.
* *Contenido permitido* Contenido de redacción (en-US), pero no debe haber ningún elemento de progreso entre sus descendientes
* *Etiquetas por omisión* None, both the starting and ending tag are mandatory.
* *Elementos padres permitidos* Cualquier elemento que acepte contenido de redacción (en-US).
* *DOM interfaz* `HTMLProgressElement` (en-US)
Atributos
---------

Este elemento incluye Atributos Globales (en-US).

`max`

Este atributo indica la cantidad de trabajo que demorá la carga, se define en el elemento `progress`. Por ejemplo max="100".

`value`

Este atributo indica que parte de la tarea ya se ha completado o cargado. Debe especificarse un valor entre 0 y `max`, o entre 0 y 1.0 si `max` está omitido. Si al atributo `value` no se le especifica ningún valor, se estara llevando a cabo la tarea sin que el elemento mueste funcionamiento alguno. Por ejemplo si la carga está al 50% será de 0.5 el valor, en el caso de no especificar max.

Puedes usar la propiedad CSS `orient` (en-US) permite especificar la orientacion de la barra de progreso (horizontal o vertical) con horizontal por defecto. La pseudo-clase `:indeterminate` se puede utiliza para hacer que coincida con las barras de progreso indeterminadas.

Ejemplo
-------


```html
<progress value="70" max="100">70 %</progress>
```

### Resultado

Pruébalo
--------

En Mac OS X, Se vería como esto:

![progress-1.png](/es/docs/Web/HTML/Element/progress/progress-1.png)

En Windows, el resultante sería este:

![progress-firefox.JPG](/es/docs/Web/HTML/Element/progress/progress-firefox.jpg)

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

| Specification |
| --- |
| HTML Standard # the-progress-element |

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

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

Mira también
------------

* `<meter>` (en-US)
* `:indeterminate`
* `-moz-orient`
* `::-moz-progress-bar`
* `::-ms-fill`
* `::-webkit-progress-bar`
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element`
fieldset
========

### Definición

El elemento fieldset (grupo de campos) permite organizar en grupos los campos de un formulario.

**Sus etiquetas son**: <fieldset> y </fieldset> (ambas obligatorias).

**Crea una caja**: en bloque.

**Está definido como**: Elemento en bloque.

**Puede contener**: un elemento legend (opcional), y despues cero o más elementos en bloque o en linea

#### Atributos

| Atributo | valor | descripción |
| --- | --- | --- |
| Genéricos |
| `title` | texto | implícito | título consultivo del elemento. |
| `style` | reglas de estilo | implícito | información de estilo en línea. |
| `id` | ID | implícito | identificador único a nivel de documento. |
| `class` | lista de clases separadas por espacios | implícito | identificador a nivel de documento |
| `dir` | uno de los siguientes:"ltr" o "rtl" | implícito | dirección del texto débil/neutral |
| `lang` | código de idioma | implícito | información sobre el idioma |
| **Eventos**:
 `onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.` |
| Específicos |
| No tiene |
| de transición |
| No tiene |
| Atributo | valor | descripción |

### Ejemplos

El siguiente código:
```

<form>

 <fieldset>
  <legend>Información Personal</legend>
  Nombre: <input name='nombre' type='text' tabindex='1'>
  Apellidos: <input name='apellidos' type='text' tabindex='2'>
 </fieldset>

 <fieldset>
  <legend>edad</legend>
  <input type='checkbox' tabindex='20'
            name='edad' value='20-39' > 20-39
  <input type='checkbox' tabindex='21'
            name='edad' value='40-59' > 40-59
  <input type='checkbox' tabindex='22'
            name='edad' value='60-79' > 60-79
 </fieldset>

</form>
```
<picture>
=========

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

El **elemento HTML `<picture>`** es un contenedor usado para especificar múltiples elementos `<source>` y un elemento `<img>` contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. Si no hay coincidencias con los elementos `<source>`, el archivo especificado en los atributos `src` del elemento `<img>` es utilizado. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento `<img>`.

Para seleccionar la imagen óptima, el user agent (en-US) examina cada atributo `srcset`, `media`, y `type` de la fuente para seleccionar la imagen compatible.

El navegador escogerá la fuente más apropiada de acuerdo al diseño de la página (las limitaciones de la caja donde aparecerá la imagen) y el dispositivo que se utilize para visualizarla (p.ej. pantalla normal o hiDPI).

| Categorías de contenido | Flujo de contenido, contenido textual o estático, contenido incrustado |
| --- | --- |
| Contenido permitido | Cero o más elementos `<source>`, seguidos por un elemento `<img>`, mezclados opcionalmente con elementos script-supporting. |
| Omisión de etiquetas | None, both the starting and ending tag are mandatory. |
| Padres permitidos | Cualquier elemento que permita embeber contenido. |
| ARIA roles permitidos | Ninguno. |
| DOM interface | `HTMLPictureElement` (en-US) |

Atributos
---------

Este elemento sólo incluye atributos globales.

Notas de uso
------------

Se puede usar la propiedad `object-position` para ajustar la posición de la imagen dentro del marco del elemento, y la propiedad `object-fit` para controlar como el tamaño de la imagen se ajusta para adaptarse al marco.

Ejemplos
--------

Estos ejemplos demuestran los efectos que tienen diferentes atributos del atributo `<source>` en la selección de la imagen a desplegar cuando se usa dentro de `<picture>`.

### El atributo `media`

El atributo `media` permite especificar una media query que el agente de usuario evaluará para seleccionar un elemento `<source>`. Si la media query evalua a `false`, el elemento `<source>` es omitido.


```html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
```

### El atributo `type`

El atributo `type` permite especificar un tipo MIME para los recursos dados en el atributo srcset del elemento `<source>`. Si el agente de usuario no soporta dicho tipo, el elemento `<source>` es omitido.


```html
<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml" />
  <img src="mdn-logo.png" alt="MDN" />
</picture>
```

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

| Specification |
| --- |
| HTML Standard # the-picture-element |

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

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

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

* Elemento `<img>`
* Elemento `<source>`
* Posicionando y redimensionando la imagen dentro de su marco: `object-position` y `object-fit`
<nobr>
======

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

El elemento HTML `<nobr>` previene que una línea de texto se divida en una nueva línea, así, se presentará en una línea larga por lo que puede ser necesario hacer un desplazamiento de pantalla. Esta etiqueta no es un estándar HTML y no debería ser usada, en su lugar use la propiedad CSS `white-space` como en este ejemplo:


```css
<span style="white-space: nowrap">Línea larga sin saltos</span>
```

Vea también
-----------

* `white-space`
* `overflow`
<bdi>
=====

Resumen
-------

El elemento *HTML `<bdi>`* (o elemento de aislamiento Bi-Direccional) aisla un trozo de texto para que pueda ser formateado con una dirección diferente al texto que hay fuera de él.

Es útil al embeber o incrustart texto del que se desconoce la direccionalidad, por ejemplo proveniente de una base de datos, dentro de un texto con una direccionalidad fija.

**Nota:** Aunque el mismo efecto visual se puede conseguir usando la regla CSS `unicode-bidi` (en-US)`: isolate` en un elemento `<span>` u otro elemento de formateado de texto, el significado semántico sólo se consigue usando el elemento `<bdi>`. En especial los navegadores permiten ignorar los estilos CSS. En tal caso el texto se mostrará correctamente usando el elemento HTML pero será basura usando CSS para fijar la semántica.


| Content categories (en-US) | Flow content (en-US), phrasing content (en-US), contenido palpable. |
| --- | --- |
| Contenido permitido | Phrasing content (en-US). |
| Omisión de etiqueta | None, both the starting and ending tag are mandatory. |
| Elementos padre permitidos | Any element that accepts phrasing content (en-US). |
| Interfaz DOM | `HTMLElement` |

Atributos
---------

Como los demás elementos HTML , este elemento tiene los global attributes (en-US), pero con una pequeña diferencia semántica: el atributo **dir** no se hereda. Si no está definidio, su valor por defecto es `auto` y permitirá a los navegadores decidir la dirección basándose en el contexto del elemento.

Ejemplo
-------


```html
<p dir="ltr">
  Esta palabara arábica<bdi>ARABIC_PLACEHOLDER</bdi> se muestra automáticamente
  de derecha a izquierda.
</p>
```

### Resultado

Esta palabra arábica REDLOHECALP\_CIBARA se muestra automáticamente de derecha a izquierda.

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

| Specification |
| --- |
| HTML Standard # the-bdi-element |

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

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

Ver además
----------

* Elementos HTML relacionados: `<bdo>`
* Propiedades HTML relacionadas: `direction`, `unicode-bidi` (en-US)
ul
==

### Definición

**ul** de "unordered list" -*lista no ordenada* . crea una lista no ordenada.

**Sus etiquetas son**: `<ul> y </ul>` (ambas obligatorias).

**Está definido como**: Elemento para listas.

**Crea una caja**: En bloque.

**Puede contener**: Uno o más elementos li

#### Atributos

| atributo | descripción | valor |
| --- | --- | --- |
| Genéricos |
| title | 
 Texto informativo o título del elemento. Suele mostrarse a modo de "tool
 tip".
  | 
 Texto legible por personas. Sensible a
 M/m.. Por
 defecto: Lo fija el navegador.
  |
| id | 
 Le da un nombre al elemento que lo diferencia de todos los demás del
 documento.
  | 
 Un
 nombre único. Sensible a
 M/m. Por
 defecto: Lo fija el navegador.
  |
| class | Asigna nombres de clases al elemento. Por defecto, clases CSS. | 
 Lista de clases separadas por espacio en blanco. Sensible a
 M/m. Por
 defecto: Lo fija el navegador.
  |
| style | 
 Permite especificar
 información de estilo. Por defecto, estilos CSS.
  | Declaraciones de estilo. Por defecto: Lo fija el navegador. |
| lang | 
 Información sobre el
 idioma del contenido
 del elemento y del valor de sus atributos.
  | 
 Un
 código de idioma. Por defecto: "desconocido". Lo fija el navegador.
  |
| dir | 
 Indica la
 dirección de texto
 y tablas.
  | 
 Uno de los siguientes: 'ltr' o
 'rtl'. Por defecto: En castellano
 'ltr'. Lo fija el navegador.
  |
| Eventos:
`onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.` |
| Específicos |
| No tiene |
| De transición |
| `type` | Indica el estilo de los items de la lista. | 
 Uno de los siguientes: `'disc', 'square', o 'circle'`. Por
 defecto: depende del anidamiento, lo fija el navegador
  |
| `compact` | Indica que la lista debe mostrase conpactada. | 
 Solo puede ser: `'compact'`. Por defecto: Lo fija el
 navegador.
  |
| atributo | descripción | valor |

### Ejemplos de uso

### Ejemplos

El siguiente código:
```

<ul>
 <li>Esto</li>
 <li>Lo otro</li>
 <li>Lo de más allá</li>
</ul>
```


Se visualiza así:

* Esto
* Lo otro
* Lo de más allá
### Estilo predeterminado

### Notas

### Referencia

* El elemento **ul** en la especificación de html 4.01
### Soporte

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

---

**Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

Categoría

interwiki links

automatismos
<hr>
====

### Definición

El **elemento HTML <hr>** representa un cambio de tema entre párrafos (por ejemplo, un cambio de escena en una historia, un cambio de tema en una sección). En versiones previas de HTML representaba una línea horizontal. Aún puede ser representada como una línea horizontal en los navegadores visuales, pero ahora es definida en términos semánticos y no tanto en términos representativos, por tanto para dibujar una línea horizontal se debería usar el CSS apropiado.

**Sus etiquetas son**: `<hr/>` (solo tiene una).

**Crea una caja**: en bloque.

**Está definido como**: en bloque.

**Puede contener**: Nada, es un "elemento vacío" del un Glosario.

#### Atributos

| Atributo | Valor | Descripción |
| --- | --- | --- |
| Genéricos |
| `title` | Texto | Implícito | Título consultivo del elemento. |
| `style` | Declaraciones de estilo | Implícito | Información de estilo en línea. |
| `id` | Un 'nombre' | Implícito | Identificador único a nivel de documento. |
| `class` | Lista de clases CSS | implícito | Identificador a nivel de documento. |
| `dir` | Uno de los siguientes: `"ltr"` o `"rtl"` | Implícito | Dirección del texto. |
| `lang` | Código de idioma | Implícito | Información sobre el idioma. |
| **Eventos**:
 `onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.` |
| Específicos |
| No tiene |
| De transición |
| `align` | uno de los siguientes: `"left", "center", "right".` | Implícito. Por defecto: `"center"` | Indica la alineación horizontal. |
| `noshade` | `"noshade"` | Implícito | Elimina el relieve. |
| `size` | Una cantidad, de píxeles | Implícito | Indica la altura de la linea. |
| `width` | Una cantidad, de píxeles, o un porcentaje. | Implícito. por defecto: 100% | Indica la anchura. |
| Atributo | Valor | Descripción |

### Ejemplos
```

  <p>Este es un parrafo unicamente visual para ver el uso de
 la etiqueta hr</p>
  <hr/>
  <p>Este es el segundo parrafo, separado del primero por la etiqueta hr, que puede
representarse mediante una línea horizontal.</p>
```

### Muestra

Este es un parrafo unicamente visual para ver el uso de la etiqueta hr

---

Este es el segundo parrafo, separado del primero por una linea horizontal

### Comentarios

### Referencia

* El elemento **hr** en la especificación de html 4.01

secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==

**Nota:** Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

¿Quieres participar en la elaboración de este documento? Para saber como hacerlo consulta MDC:Como ayudar.
ins
===

### Definición

El elemento `ins` (insertado) marca las partes de un texto que han sido añadidos al documento.

**Sus etiquetas son**: <ins> e </ins> (ambas obligatorias).

**Crea una caja**: a veces en linea a veces en bloque.

**Está definido como**:

**Puede contener**: depende, si actua como un elemento en bloque puede contener elementos en bloque. Pero si actua como un elemento en linea solo podrá contener elementos en linea.

#### Atributos

| Atributo | valor | descripción |
| --- | --- | --- |
| Genericos |
| `title` | texto | implícito | título consultivo del elemento. |
| `style` | reglas de estilo | implícito | información de estilo en línea. |
| `id` | ID | implícito | identificador único a nivel de documento. |
| `class` | CDATA | implícito | 
 identificador a nivel de documento, lista de clases separadas por
 espacios.
  |
| `dir` | (ltr|rtl) | implícito | dirección del texto débil/neutral |
| `lang` | código de idioma | implícito | información sobre el idioma |
| **Eventos**:
 `onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.` |
| Específicos |
| `cite` | URI | implícito | información sobre el cambio |
| `datetime` | fecha | implícito | fecha y hora del cambio |
| de transición |
| 
 No tiene, o dicho de otra manera, tiene los mismos que en el doctype
 estricto
  |
| Atributo | valor | descripción |

### Ejemplos

El siguiente código:


```html
Ejemplo de ins en linea:
<p>El agua es insipida, <ins>inodora e incolora.</ins></p>

Ejemplo de ins en bloque:
<p>El agua es insipida.</p>
<ins> <p>Y además inodora e incolora.</p> </ins>
```


Se visualiza así:

### Comentarios
b
=

### Definición

**b** de bold=negrita.

Indica que el texto debe ser representado con una variable **bold**, o **negrita**,de la tipografía que se esté usando.

**Sus etiquetas son**: `<b>` y `</b>` (Ambas obligatorias).

**Crea una caja**: en línea.

**Está definido como**: Elemento de estilo de fuente y por lo tanto en línea.

**Puede contener**: Texto y/o cero o más elementos en línea.

##### Atributos

| atributo | descripción | valor | por omisión |
| --- | --- | --- | --- |
| Genéricos |
| title | 
 Texto informativo o título del elemento. Suele mostrarse a modo de "tool
 tip".
  | Texto legible. Sensible a
 M/m..
  | Lo fija el navegador. |
| id | 
 Le da un nombre al elemento que lo diferencia de todos los demás del
 documento.
  | 
 Un
 nombre único. Sensible a
 M/m. | Lo fija el navegador. |
| class | Asigna nombres de clases al elemento. Por defecto, clases CSS. | 
 Lista de clases separadas por espacio en blanco. Sensible a
 M/m.
cdata | Lo fija el navegador. |
| style | 
 Permite especificar
 información de estilo. Por defecto, estilos CSS.
  | Declaraciones de estilo. | Lo fija el navegador. |
| lang | 
 Información sobre el
 idioma del contenido
 del elemento y del valor de sus atributos.
  | 
 Un
 código de idioma.
  | 
 Lo fija el navegador. PD.:
 "desconocido".
  |
| dir | 
 Indica la
 dirección de texto
 y tablas.
  | 
 Uno de los siguientes: 'ltr' o
 'rtl'. | 
 Lo fija el navegador. PD.: En
 castellano 'ltr'.
  |
| **Eventos**:
 `onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.` |
| Específicos |
| No tiene |
| De transición |
| No tiene |
| atributo | descripción | valor | por omisión |

### Ejemplos de uso

#### Palabras pesadas
```

<p>
       Texto normal y... <b>Texto en negrita</b>
</p>
```


Se visualiza así:

Texto normal y... **Texto en negrita**

### Soporte

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

### Estilo predeterminado

El inherente a su condición: **negrita.** Prueba el siguiente ejemplo:
```

 <style>
        span { font-weight: bolder; }
 </style>

 <p> Esto es:  <b> un elemento b </b> y esto es: <span>un span con estilo</span>  </p>
```

### Notas

* El W3C (y nosotros) desaconseja el uso de este elemento, para manejar el estilo del texto es mejor usar CSS.
### Referencia

* El elemento **b** en la especificación de html 4.01

---

**Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

Categoría

interwiki links

automatismos
<input type="checkbox">
=======================

El elemento HTML **`<input type="checkbox">`** es un elemento de entrada que te permite insertar un vector o array de valores. El atributo **value** es usado para definr el valor enviado por el **checkbox**. El atributo **checked** se usa para indicar que el elemento está seleccionado. El atributo **indeterminate** se usa para indicar que el **checkbox** esta en un estado indeterminado (en la mayoria de las plataformas, esto dibuja una linea horizontal que atraviesa el **checkbox**).

Atributos
---------

Este elemento posee los "atributos globales (en-US)".

`checked`

Cuando el valor del atributo **type** es **`checkbox`**, la presencia de este atributo booleano indica que el control se selecciona de forma predeterminada; de lo contrario, se ignora.

`value`

 El valor inicial de control. Si se omite la propiedad **value**, el **resultado devuelto** al leer esta propiedad será la cadena **on**.
 Tenga en cuenta que al volver a cargar la pagina, Gecko y IE ignorarán el valor especificado en el código HTML, si el valor se cambió antes de la recarga.


`indeterminate`

Indica que la casilla de verificación está en un estado indeterminado (en la mayoría de las plataformas, dibuja una línea horizontal a través del checkbox).

Ejemplo
-------


```html
<label
 ><input type="checkbox" id="cbox1" value="first\_checkbox" /> Este es mi primer
  checkbox</label
><br />

<input type="checkbox" id="cbox2" value="second\_checkbox" />
<label for="cbox2">Este es mi segundo checkbox</label>
```


Esto crea dos casillas de verificación, que se ven así:

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

| Specification |
| --- |
| HTML Standard # checkbox-state-(type=checkbox) |

Compatibilidad en navegadores
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<input type="datetime">
=======================

*El HTML* `<input type="datetime">` es un control para ingresar tiempo y fecha (hora, minuto, segundo y fracción de segundo) basado en la zona horaria UTC .

* Categorías de contenido : Contenido dinámico , listed , submittable , resettable , contenido asociado a un formulario , contenido estático o de texto . Si `type` no tiene el valor `hidden`, elemenento labelable , contenido palpable .

|  |  |
| --- | --- |
| Contenido permitido | Ninguno , es un elemento vacío. |
| Omisión de etiquetas | 
 Debe de tener una etiqueta de inicio y no debe de tener una etiqueta
 final .
  |
| Elementos padres permitidos | Cualquier elemento que acepte contenido estático o de texto . |
| Interfaz DOM | `HTMLInputElement` |

Atributos
---------

El siguiente elemento tiene los siguientesatributos globales .

Ejemplos
--------

`input type="datetime" name="new_year"`

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

| Specification |
| --- |
| HTML Standard # local-date-and-time-state-(type=datetime-local) |

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

* El elemento `<input>`