diff --git a/files/es/web/html/element/div/index.md b/files/es/web/html/element/div/index.md index 5dd8e9997a0d36..ae3edf7dd1dd60 100644 --- a/files/es/web/html/element/div/index.md +++ b/files/es/web/html/element/div/index.md @@ -1,265 +1,151 @@ --- -title: div +title: "
: El elemento de división de contenido" slug: Web/HTML/Element/div +l10n: + sourceCommit: e31cb5978e9f3c731c49db9ed0a15795b870e141 --- -### Definición +{{HTMLSidebar}} -- **div** de "division" -_división_ . Sirve para crear secciones o agrupar contenidos. +El elemento de [HTML](/es/docs/Web/HTML) **`
`** es el contenedor genérico para el contenido. No tiene efecto en el contenido o en el diseño hasta que se le aplica un estilo de alguna manera usando {{glossary("CSS")}} (p. ej. se le aplica un estilo directamente o se aplica algún tipo de modelo de diseño como [Flexbox](/es/docs/Web/CSS/CSS_flexible_box_layout) a su elemento principal). - - : **Sus etiquetas son**: `
` y `
` (ambas obligatorias). +{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}} - **Está definido como**: [Elemento en bloque](/es/docs/Web/HTML/Block-level_elements). +Como contenedor "puro", el elemento `
` no representa nada inherentemente. En cambio, se usa para agrupar contenido de modo que se pueda diseñar fácilmente usando los atributos [`class`](/es/docs/Web/HTML/Global_attributes#class) o [`id`](/es/docs/Web/HTML/Global_attributes#id), marcando una sección de un documento como escrita en un idioma diferente (usando el atributo [`lang`](/es/docs/Web/HTML/Global_attributes#lang)), y así sucesivamente. - **Crea una caja**: En bloque. +## Atributos - **Puede contener**: Texto, y/o cero o más elementos [en bloque](/es/HTML/Elemento/Tipos_de_elementos#enbloque) o [en linea](/es/HTML/Elemento/Tipos_de_elementos#enlinea). +Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attributes). -#### Atributos +> **Nota:** El atributo `align` está obsoleto; no lo uses más. En su lugar, deberías usar propiedades o técnicas de CSS como [CSS Grid](/es/docs/Web/CSS/CSS_grid_layout) o [CSS Flexbox](/es/docs/Learn/CSS/CSS_layout/Flexbox) para alinear y posicionar elementos `
` en la página. - +## Notas de uso + +- El elemento `
` debe usarse solo cuando ningún otro elemento semántico (como {{HTMLElement("article")}} o {{HTMLElement("nav")}}) sea apropiado. + +## Preocupaciones de accesibilidad + +El elemento `
` tiene [un rol implícito de `generic`](https://www.w3.org/TR/wai-aria-1.2/#generic), y no ninguno. Esto puede afectar a cierta combinación de declaraciones ARIA que esperan un elemento descendiente directo con cierto rol para funcionar correctamente. + +## Ejemplos + +### Un ejemplo simple + +```html +
+

+ Cualquier tipo de contenido aquí. Como <p>, <table>. ¡Lo que + quieras! +

+
+``` + +#### Resultado + +{{EmbedLiveSample("Un_ejemplo_simple", 650, 60)}} + +### Un ejemplo con estilos + +Este ejemplo crea un cuadro sombreado aplicando un estilo al `
` usando CSS. Ten en cuenta que el uso del atributo [`class`](/es/docs/Web/HTML/Global_attributes#class) en el `
` para aplicar el estilo llamado `"shadowbox"` al elemento. + +#### HTML + +```html +
+

+ Aquí hay una nota muy interesante exhibida en un hermoso cuadro sombreado. +

+
+``` + +#### CSS + +```css +.shadowbox { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +} +``` + +#### Resultado + +{{EmbedLiveSample("Un_ejemplo_estilado", 650, 120)}} + +## Resumen técnico + +
- - - - - - - - - + - + - - - - - + + + - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - + +
atributodescripciónvalor
Genéricos
- title + Categorías de contenido - - 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. + Flujo de contenido, contenido palpable.
Contenido permitido - 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. + Flujo de contenido.
O (en {{glossary("WHATWG")}} HTML): Si el padre es un + elemento {{HTMLElement("dl")}}: uno o más + elementos {{HTMLElement("dt")}} seguidos de uno o más + elementos {{HTMLElement("dd")}}, opcionalmente entremezclados + con elementos {{HTMLElement("script")}} y {{HTMLElement("template")}}.
- 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. - Omisión de etiqueta{{no_tag_omission}}
Padres permitidos - style - - Permite especificar - información de estilo. Por defecto, estilos CSS. - - Declaraciones de estilo. Por defecto: Lo fija el navegador. + Cualquier elemento que acepte + flujo de contenido.
O (en {{glossary("WHATWG")}} HTML): + Elemento {{HTMLElement("dl")}}.
Rol ARIA implícito - lang - - Información sobre el - idioma del contenidogeneric - 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
datasrc - Enlaza a una fuente de datos externa (individual o tabular). Reservado - para posibles usos futuros. - Una dirección URI. Por defecto: Lo fija el navegador.
datafld - El nombre de una propiedad o columna de - datasrc. Reservado para posibles usos - futuros. - Por defecto: Lo fija el navegador.
dataformatas - Indica como deben ser tratados los datos obtenidos de - datasrc. Reservado para posibles usos - futuros. - - Uno de los siguientes: 'paintext' o 'html'. - Por defecto: 'plaintext' -
De transición
alignAlineación del texto. - Uno de los siguientes: "left", "center", "right", o - "justify". Por defecto: 'left', lo fija el navegador - Roles ARIA permitidosCualquier
atributodescripciónvalorInterfaz en el DOM{{domxref("HTMLDivElement")}}
-### Ejemplos de uso - -#### Div y span +## Especificaciones -código: - -```html -
-

Ejemplo de div y span

-

- Esto es un párrafo dentro de un div, - y esto un span dentro de un párrafo. -

-
-``` - -Resultado: - -{{EmbedLiveSample}} - -### Estilo predeterminado - -### Notas - -### Referencia - -- El elemento [**div** en la especificación](http://html.conclase.net/w3c/html401-es/struct/global.html#edef-DIV) de html 4.01 - -### Soporte - -Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html.php#support-html401-div): IE 6 - IE 7 - FF 1.5 - OP 9. - ---- +{{Specifications}} -> **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. +## Compatibilidad con navegadores -Categoría +{{Compat}} -interwiki links +## Véase también -automatismos +- Elementos de seccionamiento semántico: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} +- Elemento {{HTMLElement("span")}} para diseñar el contenido de la frase