Definición destacada
¿Como funciona el comando en HTML5: 'ul'?
Última modificación: 2024-06-17
La etiqueta <ul> en HTML5
La etiqueta <ul> se usa para definir una lista desordenada, lo que significa que los elementos de la lista no tienen un orden específico y generalmente se presentan con viñetas. En HTML5, <ul> se sigue utilizando de la misma manera que en versiones anteriores de HTML.
Aquí tienes una descripción detallada de los atributos que se pueden utilizar con la etiqueta <ul>:
Atributos de <ul>
-
id: Define un identificador único para la lista.
- Ejemplo:
<ul id="miLista">
- Ejemplo:
-
class: Asigna una o más clases CSS para aplicar estilos específicos.
- Ejemplo:
<ul class="lista-estilo">
- Ejemplo:
-
style: Permite aplicar estilos CSS en línea directamente a la lista.
- Ejemplo:
<ul style="list-style-type: square;">
- Ejemplo:
-
title: Ofrece un texto descriptivo adicional que se muestra como una sugerencia cuando se pasa el cursor sobre la lista.
- Ejemplo:
<ul title="Lista de tareas">
- Ejemplo:
-
lang: Define el idioma del contenido dentro de la lista.
- Ejemplo:
<ul lang="es">
- Ejemplo:
-
dir: Indica la dirección del texto embebido en la lista, pudiendo ser "ltr" (left to right) o "rtl" (right to left).
- Ejemplo:
<ul dir="rtl">
- Ejemplo:
-
*data-:** Permite añadir atributos de datos personalizados para almacenaje de datos privados.
- Ejemplo:
<ul data-role="lista-tareas">
- Ejemplo:
Ejemplos sencillos de uso de <ul> en HTML5
Ejemplo Básico
Un ejemplo básico de una lista desordenada con tres elementos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Lista Desordenada</title>
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>Ejemplo con Estilo CSS
Un ejemplo que define una lista con estilos diferentes utilizando un atributo class:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Lista con Estilo CSS</title>
<style>
.mi-lista {
list-style-type: square;
color: blue;
}
</style>
</head>
<body>
<ul class="mi-lista">
<li>Elemento A</li>
<li>Elemento B</li>
<li>Elemento C</li>
</ul>
</body>
</html>Ejemplo con Atributo data-*
Un ejemplo que incluye un atributo de datos personalizados:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Lista con Atributo data</title>
</head>
<body>
<ul data-category="tareas-prioritarias">
<li>Tarea 1</li>
<li>Tarea 2</li>
<li>Tarea 3</li>
</ul>
</body>
</html>Conclusión
La etiqueta <ul> en HTML5 es una herramienta fundamental para crear listas desordenadas. Esta etiqueta tiene varios atributos que permiten personalizar y manejar la lista de diversas maneras, facilitando tanto la presentación visual como la manipulación de datos mediante CSS y JavaScript.