recursal/MDN huggingface dataset:
is
==

La construcción is global attribute permite especificar que un elemento HTML estándar se debería comportar como un elemento personalizado provisto originalmente por el lenguaje (para más detalles, vea Utilizando elementos personalizados).

Este atributo puede ser utilizado sólo si nombre del elemento personalizado especificado ha sido definido extósamente en el documento actual, y extiende el tipo de elemento al que está siendo aplicado.

Ejemplos
--------

El siguiente código fue tomado de nuestro ejemplo word-count-web-component (véalo también en vivo).


```js
// Crea una clase para el elemento
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Siempre llamar a super al comienzo del constructor
    super();

    // Contenido del constructor omitido para mayor brevedad
    ...

  }
}

// Define el nuevo elemento
customElements.define('word-count', WordCount, { extends: 'p' });
```



```html
<p is="word-count"></p>
```

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

| Specification |
| --- |
| HTML Standard # attr-is |

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

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

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

* Todos los atributos globales.
draggable
=========

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

El atributo global **draggable** es un atributo enumerado que indica si el elemento puede ser arrastrado , usando el `HTML Drag and Drop API` . Puede tener los siguientes valores :

* `true` , indica que el elemento puede ser arrastrado.
* `false`, indica que el elemento no puede ser arrastrado .

Si este atriuto no se establece , su valor por default es `auto` , significando que el comportamiento debe de ser el definido por default en el explorador .

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

Por default , unicamente el texto , las imagenes y los vínculos pueden ser arrastrados . Para todos los demás elementos el evento **`ondragstart` (en-US)** debe de ser establecido para el mecanismo de arrastrar y soltar para que funcione , como se muestra en este ejempl (en-US)o .

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

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

Compatibilidad de Navegadores
-----------------------------

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

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

* atributos globales
data-\*
=======

**Nota:** 

Los atributos globales **data-\*** forman una clase de atributos , llamados atributos de datos modificables , permite a la información propietaria ser intercambiada entre el HTML y su representación en el DOM que puede ser usada por scripts . Todos esos datos modificables están disponibles a través de la interface del elemento `HTMLElement` , el atributo se establece encendido . La propiedad `HTMLElement.dataset` (en-US) otorga acceso a ellos .

El \* puede ser remplazado por cualquier nombre siguiedo las reglas de producción de nombres xml con las siguientes restricciones :

* el nombre no debe de empezar con `xml` , cualquiera sea el caso usado para estas letras.
* el nombre no debe de contener algún punto y coma (`U+003A`) .
* el nombre no debe de contener letras mayúsculas de la A a la Z .

Notar que la propiedad `HTMLElement.dataset` (en-US) es un `StringMap` y que el nombre del atributo de datos modificable*data-test-value* será accesible a través de `HTMLElement.dataset.testValue` como cualquier guión (`U+002D`) es reemplazado por la versión en mayúscula de la siguiente letra (camelcase) .

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

| Specification |
| --- |
| HTML Standard # attr-data-\* |

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

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

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

* atributos globales .
* La propiedad `HTMLElement.dataset` (en-US) que permite el acceso y modifica estos valores .
dir
===

El atributo global dir es un atributo enumerado que indica la direccionalidad del texto de los elementos . Puede tener los siguientes valores :

* `ltr`, significa *izquierda* a *derecha* y es usado para los lenguajes que son escritos de izquierda a derecha ( como el Inglés ) .
* `rtl`, significa *derecha* a *izquierda* y es usado para los lenguajes que son escritos de la derecha a la izquierda (como el árabe ) .
* `auto`, permite al agente usuario decidir . Usa un algoritmo básico mientras parsea los caracteres dentro de un elemento hasta que encuentra un elemento con una direccionalidad fuerte , después aplica esa direccionalidad a todo el elemento .

**Nota:** Este atributo es obligatorio para el elemento `<bdo>` donde este tiene un significado semántico diferente.

* Este atributo no es heredado por el elemento `<bdi>` . Si no se establece , su valor es `auto`.
* Este atributo puede ser anulado por las propiedades de CSS `direction` y `unicode-bidi` (en-US) , si una página CSS está activa y el elemento soporta estas propiedades.
* Mientras la direccionalidad del texto esté semánticamente relacionada con su contenido y no con su presentación , se recomienda que los desarrolladores web usen este atributo en lugar de propiedades de CSS relacionadas , cuando sea posible . De esta forma , el texto se mostrará correctamente incluso en un explorador que no soporte CSS o que tenga CSS desactivado .
* El valor `auto` debe de ser usada para datos con una direccionalidad desconocida , com datos procedentes de la entrada de usuario , eventualmente almacenados en una base de datos .

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

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

Compatibilidad de Navegadores
-----------------------------

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

See also
--------

* atributos globales
* `HTMLElement.dir` (en-US) que refleja este atributo .
lang
====

El atributo global **lang** participa en la definición del lenguaje del elemento , el lenguaje en que están escritos los elementos no editables o el lenguaje en el cual los elementos editables deberían de estar escritos . La etiqueta contiene un valor sencillo de entrada en el formato que define el documento tags para identificar lenguajes (BCP47) de la IETF . Si el contenido de la etiqueta es la *cadena vacía* , el lenguaje se establece como *desconocido* , si el contenido de la etiqueta no es válido respecto al documento BCP47 , se establece como *inválido .*

Incluso si el atributo **lang** está establecido , puede que no se tome en cuenta , ya que el atributo **xml:lang** tiene prioridad . Leer el algoritmo para determinar el lenguaje de el contenido de un elemento para ver como es determinado el lenguaje en todos los casos.

Para la pseudo clase { cssxref(":lang") }} de CSS, dos nombres invalidos de lenguaje son diferentes si sus nombres son diferentes .

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

| Specification |
| --- |
| HTML Standard # attr-lang |

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

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

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

* atributos globales
contenteditable
===============

**Nota:** 

El atributo global **contenteditable** es un atributo enumerado que indica si el elemento debe de ser editable por el usuario . Si es así, el explorador modifca su widget para permitir la edición . El atributo debe de tener alguno de los siguientes valores :

* `true` o una string vacia , que indica que el elemento debe de ser editable .
* `false` , que indica que el elemento no debe ser editable.

Si este atributo no se establece , el valor de default es *heredado* de su elemento padre .

Este es un atributo enumerado y no uno *booleano .* Esto significa que el uso explicito de uno de los valores `true` , `false` o la cadena vacía es obligatorio y que una código como `<label contenteditable>Example Label</label>` no esta permitido . El uso correcto es `<label contenteditable="true">Example Label</label>`.

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

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

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

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

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

* atributos globales
* `HTMLElement.contentEditable` and `HTMLElement.isContentEditable` (en-US)
id
==

El atributo global **id** define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas de estilo (con CSS).

El valor de este atributo es una cadena de caracteres opaca: es decir, el autor del sitio no debe usarlo para proporcionar información. De forma particular, en sentido semántico por ejemplo, no debe ser derivado de la misma cadena.

El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs que contienen espacios en blanco como si los espacios fueran parte del ID. En contraste con el atributo **class**, el cual permite valores separados por espacios, los elementos pueden tener sólo un ID definido mediante el atributo ID. Tenga en cuenta que un elemento puede tener muchos ID, pero los demás deben ser definidos de otra forma, como por medio de un script interactuando con el DOM.

**Nota:** El uso de caracteres a excepción de letras en ASCII, dígitos, '\_', `'-'` y `'.'` pueden ocasionar problemas de compatibilidad, por no ser permitidos en HTML 4. A pesar de que esta limitación ha sido removida en HTML 5, un ID debe iniciar con una letra para asegurar la compatibilidad.

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

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

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

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

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

* Todos los atributos globales.
* `Element.id` que se asemeja a este atributo.
translate
=========

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

El atributo global **translate** es un atributo enumerado que es usado para especificar si los valores del atributo de un elemento y los valores de sus nodos hijos de Texto serán traducidos cuando la página es localizada , o si se debe de dejarlos sin cambio . Puede tener los siguientes valores :

* Cadena vacía y "yes" , que indica que el elemento debe de ser traducido cuando la página es localizada .
* "no", que indica que el elemento no debe de ser traducido .
Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # attr-translate |

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

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

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

* atributos globales
* La propiedad `HTMLElement.translate` (en-US) que refleja a este atributo
slot
====

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

El atributo global **slot** asigna un espacio en un shadow DOM (en-US) árbol shadow a un elemento: Un elemento con un atributo `slot` es asignado al espacio creado por el elemento `<slot>` cuyo valor de atributo `name` coincide con el valor de ese atributo `slot`.

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

| Specification |
| --- |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |

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

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

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

* Todos los atributos globales.
accesskey
=========

El atributo global **accesskey** provee un indicio para generar un atajo de teclado para el elemento actual . Este atributo consiste en una lista de caracteres separada por espacios (un único punto de código Unicode). El explorador usa el primero que existe en la distribución del teclado de la computadora .

La operación para activar el accesskey depende del explorador y su plataforma .

|  | Windows | Linux | Mac |
| --- | --- | --- | --- |
| Firefox | `Alt` + `Shift` + `*tecla*` | 
 En Firefox 14 o posteriores, `Control` + `Alt` +
 `*tecla*`En Firefox 13 o anteriores, `Control` +
 `*tecla*` |
| Internet Explorer | `Alt` + `*tecla*` | N/A |
| Google Chrome | `Alt` + `*tecla*` | `Control` + `Alt` + `*tecla*` |
| Safari | `Alt` + `*tecla*` | N/A | `Control` + `Alt` + `*tecla*` |
| Opera | `Shift` + `Esc` abre una lista de contenidos , los
 cuales son accesibles a través de accesskey , después se puede elegir un
 item presionando `*tecla*` |

Notar que Firefox puede personalizar la tecla de modificación requerida por las preferencias del usuario .

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

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

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

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

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

* atributos globales
Tutorial de SVG
===============

Los graficos de vectores escalables, SVG , es un dialecto XML de W#C usado para describir graficos. Esta parcialente implementado en Firefox, Opera, WebKit , Internet Explorer y otros.

Este tutorial intenta explicar SVG a profundidad y esta elaborado con detalles tecnicos. Si quieres dibujar hermosas imagenes, podras encontrar recursos mas utiles en la Documentacion de Inkscape . Otra buena introduccion es brindada por el W3C's SVG Primer .

##### Presentando SVG desde cero

* Introducción
* Comenzando
* Posiciones
* Figuras básicas
* Paths
* Rellenos y trazos
* Gradientes
* Patrones
* Textos
* Transformaciones básicas
* Recortes y máscaras
* Otros contenidos en SVG
* Filtros y efectos
* Fuentes SVG
* Etiquetas de imágenes SVG
* Herramientas de SVG
* Otros tutoriales (en-US)

Los siguientes temas son más avanzados, por lo tanto deben tener sus propios tutoriales.

##### Scripting SVG con JavaScript

TBD

##### Tutorial filtros SVG

TBD

##### Animaciones con SMIL en SVG

TBD

##### Creación de fuentes en SVG

TBD
g
=

El elemento `g` es un contenedor usado para agrupar objetos. Las transformaciones aplicadas al elemento `g` son realizadas sobre todos los elementos hijos del mismo. Los atributos aplicados son heredados por los elementos hijos. Además, puede ser usado para definir objetos complejos que pueden luego ser referenciados con el elemento `<use>`.Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento contenedor, Elemento estructural |
| Contenido permitido | Cualquier número de los siguientes elementos, en cualquier orden:Elementos de animaciónElementos descriptivosElementos de formaElementos estructuralesElementos de degradado`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>` (en-US), `<image>` (en-US), `<marker>` (en-US), `<mask>` (en-US), `<pattern>` (en-US), `<script>`, `<style>`, `<switch>` (en-US), `<text>`, `<view>` |

Ejemplo
-------


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 95 50"
 xmlns="http://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
    <circle cx="25" cy="25" r="15" />
    <circle cx="40" cy="25" r="15" />
    <circle cx="55" cy="25" r="15" />
    <circle cx="70" cy="25" r="15" />
  </g>
</svg>
```

Atributos
---------

### Atributos globales

* Conditional processing attributes (en-US) »
* Core attributes (en-US) »
* Graphical event attributes (en-US) »
* Presentation attributes (en-US) »
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### Atributos Específicos

*No hay atributos específicos.*

Interfaz DOM
------------

Este elemento implementa la interfaz `SVGGElement` (en-US).

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # GElement |

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

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

El elemento `style` permite agregar directamente hojas de estilo en el contenido del SVG. El elemento style de SVG tiene los mismos atributos que el elemento correspondiente en HTML (ver elemento `<style>` de HTML).

Usage context
-------------

|  |  |
| --- | --- |
| Categorias | Ninguna |
| Contenido permitido | Cualquier elemento o dato de carácter |

Ejemplo
-------


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 100 100"
 xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
 /\* <![CDATA[ \*/
 circle {
 fill: orange;
 stroke: black;
 stroke-width: 10px; // Note that the value of a pixel depend on the viewBox
 }
 /\* ]]> \*/
 </style>

  <circle cx="50" cy="50" r="40" />
</svg>
```


Live result:

Atributos
---------

### Atributos globales

* Core attributes »
### Atributos específicos

* `type (en-US)`
* `media (en-US)`
* `title`
DOM Interface
-------------

Este elemento implementa la interfaz `SVGStyleElement`.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StyleElement |

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

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

See also
--------

* <style> element in HTML
circle
======

El elemento circle es una forma básica de SVG, usada para crear circulos a partir de un punto, el cual indica el centro del circulo, y un radio.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento de forma básica, Elemento gráfico, Elemento de forma |
| Contenido permitido | Cualquier número de los siguientes elementos, en cualquier orden:Elementos de animaciónElementos descriptivos |

Ejemplo
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<?xml version="1.0"?>
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="50" />
</svg>
```

Atributos
---------

### Atributos globales

* Atributos de procesamiento condicional »
* Atributos principales »
* Atributos de eventos gráficos »
* Atributos de presentación »
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### Atributos específicos

* `cx (en-US)`
* `cy (en-US)`
* `r (en-US)`
Interfaz DOM
------------

Este elemento implementa la interfaz `SVGCircleElement` (en-US).

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CircleElement |

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

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

Relacionado
-----------

* `<ellipse>` (en-US)
glyph
=====

Un glifo define a un glifo en particular en una fuente SVG.

Contexto de uso
---------------

| Categories | Elemento de contenido de texto. |
| --- | --- |
| Permitted content | Cualquier número de los siguientes elementos, en cualquier orden: elementos de animación » elementos descriptivos » elementos de forma » elementos estructurales » elementos de gradiente » `<a>`, `<altGlyphDef>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>` (en-US), `<image>` (en-US), `<marker>` (en-US), `<mask>` (en-US), `<pattern>` (en-US), `<script>`, `<style>`, `<switch>` (en-US), `<text>`, `<view>` |
| Normative document | SVG 1.1 (Segunda edición) |

Ejemplo
-------


```xml
<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
<!-- Example copied from http://www.w3.org/TR/SVG/fonts.html#GlyphElement -->
  <defs>

    <font id="Font1" horiz-adv-x="1000">
      <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
 units-per-em="1000" cap-height="600" x-height="400"
 ascent="700" descent="300"
 alphabetic="0" mathematical="350" ideographic="400" hanging="500">
        <font-face-src>
          <font-face-name name="Super Sans Bold"/>
        </font-face-src>
      </font-face>

      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
      <glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph>
      <glyph unicode="@" d="M0,50l100,300l400,100z"></glyph>

    </font>
  </defs>
  <text x="100" y="100"
 style="font-family: 'Super Sans', Helvetica, sans-serif;
 font-weight: bold; font-style: normal">Text
    using embe@dded font!</text>
</svg>
```

Atributos
---------

### Atributos globales

* Atributos centrales»
* Atributos de presentación »
* `class (en-US)`
* `style (en-US)`
### Atributos específicos

* `d (en-US)`
* `horiz-adv-x (en-US)`
* `vert-origin-x (en-US)`
* `vert-origin-y (en-US)`
* `vert-adv-y (en-US)`
* `unicode (en-US)`
* `glyph-name (en-US)`
* `orientation (en-US)`
* `arabic-form (en-US)`
* `lang (en-US)`
Interfaz DOM
------------

Este elemento implementa la interfaz `SVGGlyphElement`.

Relacionado
-----------

* `<font>` (en-US)
* `<missing-glyph>` (en-US)
* Tutorial SVG: Fuentes SVG
<view>
======

Un `view` es una forma definida de ver la imagen, con un nivel de zoom o una vista detallada.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Ninguna |
| Contenido permitido | Cualquier número de los siguientes elementos, en cualquier orden:Elementos descriptivos |

Atributos
---------

### Atributos globales

* Atributos Aria
* Atributos Core
* Atributos de eventos globales
### Atributos específicos

* `viewBox (en-US)`
* `preserveAspectRatio (en-US)`
* `zoomAndPan (en-US)` 
Obsoleto

Non-standard
* `viewTarget` 
Obsoleto
Ejemplo
-------

### SVG


```svg
<svg viewBox="0 0 300 100" width="300" height="100"
 xmlns="http://www.w3.org/2000/svg">

  <view id="one" viewBox="0 0 100 100" />
  <circle cx="50" cy="50" r="40" fill="red" />

  <view id="two" viewBox="100 0 100 100" />
  <circle cx="150" cy="50" r="40" fill="green" />

  <view id="three" viewBox="200 0 100 100" />
  <circle cx="250" cy="50" r="40" fill="blue" />
</svg>
```

### HTML


```html
<img src="example.svg" alt="tres círculos" width="300" height="100" />
<br />
<img src="example.svg#three" alt="círculo azul" width="100" height="100" />
```

### Resultado

Interfaz DOM
------------

Este elemento implementa la interfaz `<SVGViewElement>`.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ViewElement |

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

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