From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- files/es/web/html/element/dl/index.html | 219 ++++++++++++++++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 files/es/web/html/element/dl/index.html (limited to 'files/es/web/html/element/dl') diff --git a/files/es/web/html/element/dl/index.html b/files/es/web/html/element/dl/index.html new file mode 100644 index 0000000000..9bea9588ce --- /dev/null +++ b/files/es/web/html/element/dl/index.html @@ -0,0 +1,219 @@ +--- +title: dl +slug: Web/HTML/Elemento/dl +tags: + - Agrupando contenido HTML + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/dl +--- +
{{HTMLRef}}
+ +

El elemento HTML <dl>  representa una lista descriptiva. El elemento encierra una lista de grupos de términos (especificados con el uso del elemento {{HTMLElement("dt")}}) y de descripciones (proveídas con elementos {{HTMLElement("dd")}}). Algunos usos comunes para este elemento son implementar un glosario o para desplegar metadatos (lista de pares llave-valor).

+ +
{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido de flujo, y si los elementos hijos de <dl> incluyen un grupo nombre-valor, contenido palpable.
Contenido permitido +

Ya sea: Cero o más grupos cada uno consistiendo en uno o más elementos {{HTMLElement("dt")}} seguidos por uno o más elementos {{HTMLElement("dd")}}, opcionalmente intercalados con elementos {{HTMLElement("script")}} y elementos {{HTMLElement("template")}}.
+ O: Uno o más elementos {{HTMLElement("div")}}, opcionalmente entremezclados con elementos {{HTMLElement("script")}} y elementos {{HTMLElement("template")}}.

+
Omisión de Tag{{no_tag_omission}}
Padres permitidosCualquier elemento que acepte contenido de flujo.
Roles ARIA permitidos{{ARIARole("group")}}, {{ARIARole("presentation")}}
Interfaz DOM{{domxref("HTMLDListElement")}}
+ +

Atributos

+ +

Los atributos de este elemento incluyen los atributos globales.

+ +

Ejemplos

+ +

Término sencillo y descripción

+ +
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

Salida:

+ +

Image:HTML-dl1.png

+ +

Múltiples términos, descripción sencilla

+ +
<dl>
+  <dt>Firefox</dt>
+  <dt>Mozilla Firefox</dt>
+  <dt>Fx</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

Salida:

+ +

Image:HTML-dl2.png

+ +

Término sencillo, múltiples descripciones

+ +
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+  <dd>
+    The Red Panda also known as the Lesser
+    Panda, Wah, Bear Cat or Firefox, is a
+    mostly herbivorous mammal, slightly larger
+    than a domestic cat (60 cm long).
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

Output:

+ +

Image:HTML-dl3.png

+ +

Múltiples términos y descripciones

+ +

También es posible definir múltiples términos con múltiples descripciones correspondientes, combinando los ejemplos de arriba.

+ +

Metadatos

+ +

Las listas descriptivas son útiles para desplegar metadatos como una lista de pares llave-valor.

+ +
<dl>
+  <dt>Name</dt>
+  <dd>Godzilla</dd>
+  <dt>Born</dt>
+  <dd>1952</dd>
+  <dt>Birthplace</dt>
+  <dd>Japan</dd>
+  <dt>Color</dt>
+  <dd>Green</dd>
+</dl>
+
+ +

Tip: Puede ser útil definir un separador llave-valor en el CSS, como:

+ +
dt::after {
+  content: ": ";
+}
+ +

Encapsulado de grupos nombre-valor en elementos {{HTMLElement("div")}}

+ +

WHATWG HTML permite encapsular cada grupo nombre-valor de un elemento {{HTMLElement("dl")}} en un elemento {{HTMLElement("div")}}. Esto puede ser útil cuando se utilizan microdatos, o cuando atributos globales apliquen a todo el grupo, o por motivos de estilo.

+ +
<dl>
+  <div>
+    <dt>Name</dt>
+    <dd>Godzilla</dd>
+  </div>
+  <div>
+    <dt>Born</dt>
+    <dd>1952</dd>
+  </div>
+  <div>
+    <dt>Birthplace</dt>
+    <dd>Japan</dd>
+  </div>
+  <div>
+    <dt>Color</dt>
+    <dd>Green</dd>
+  </div>
+</dl>
+
+ +

Notas

+ +

No use este elemento (ni elementos {{HTMLElement("ul")}}) solo para crear sangría en una página. Si bien funciona, es una mala práctica y obscurece el signinifcado de las listas descriptivas.

+ +

Para cambiar la indentación de un término, usa la propiedad {{cssxref("margin")}} de CSS.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'semantics.html#the-dl-element', '<dl>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}{{Spec2('HTML4.01')}}Definición inicial
+ +

Compatibilidad Web

+ + + +

{{Compat("html.elements.dl")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf