HTML listas ul, ol, dl
Tutorial HTML » HTML listas ul, ol, dl
¿Qué es una lista?
Una lista es un registro de información breve, como los nombres de las personas, normalmente escrito o impreso con un elemento en cada línea y organizado de manera que sea fácil encontrar un elemento en particular.
P.ej:
- Una lista de compras
- Lista de actividades
HTML proporciona tres formas de especificar listas de información. Todas las listas deben contener una o más listas de elementos.
Los tipos de listas que se pueden utilizar en HTML son:
ul: una lista desordenada. Enumerará los elementos en una caja.
ol: Una lista ordenada. Esto utilizará diferentes esquemas de numeración para enumerar sus artículos.
dl.: Una lista de definiciones. Esto organiza los artículos de la misma manera que están organizados en un diccionario.
Sintaxis:
<li>texto</li>
</ul>
Lista HTML desordenada - ejemplo
Una lista desordenada comienza con la etiqueta "<ul>". Cada elemento de la lista comienza con la etiqueta "<li>". Los elementos de la lista están marcados con puntos, es decir, círculos negros, de forma predeterminada.
<!DOCTYPE html>
<html>
<head>
<title>Cómo crear una lista desordenada en HTML</title>
</head>
<body>
<h1>Lista desordenada en HTML</h1>
<h2>¿Qué necesitas aprender para hacer un blog?</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ul>
</body>
</html>
Lista HTML desordenada: con marcador - ejemplos
La propiedad de la lista CSS se utiliza para definir el estilo del marcador del elemento de la lista:
disco: establezca la marca del elemento de la lista en un boletín (predeterminado)
círculo: establece la marca del elemento de la lista en un círculo
cuadrado: establece la marca del elemento de la lista en un cuadrado
ninguno: los elementos de la lista no se marcarán
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de una lista desordenada</title>
</head>
<body>
<h1>Ejemplo de lista desordenada en tipo disco HTML</h1>
<ul style="list-style-type:disc;">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ul>
<h2>Ejemplo de lista desordenada en tipo círculo HTML</h2>
<ul style="list-style-type:circle;">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ul>
<h2>Ejemplo de lista desordenada en tipo cuadrado HTML</h2>
<ul style="list-style-type:square">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ul>
</body>
</html>
Lista HTML ordenada
Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta
<li>.
De forma predeterminada, los elementos de la lista se marcarán con números:
<!DOCTYPE html>
</body>
<html>
<head>
<title>Lista HTML ordenada</title>
</head>
<body>
<h3>Ejemplo de una lista HTML ordenada</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ol>
<h4>Ejemplo de lista HTML ordenada mediante un
letras pequeñas</h4>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ol>
<h5>Ejemplo de lista HTML ordenada usando
Letras romanas</h5>
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ol>
</html>
Listas de descripción HTML
HTML también admite listas de descripción.
Una lista de descripciones es una lista de términos, con una descripción de cada término.
La etiqueta <dl> define la lista de descripciones, la etiqueta
<dt> define el término (nombre) y la etiqueta
<dd> describe cada término:
<!DOCTYPE html>
</body>
<html>
<head>
<title>Lista HTML ordenada</title>
</head>
<body>
<h3>Lista de términos, con una descripción de cada término. Ejemplos</h3>
<dl>
<dt>Café</dt>
<dd>- caliente con leche</dd>
<dt>Té</dt>
<dd>- sin leche y caliente</dd>
</dl>
<h4>Ejemplo de una lista dentro de otra lista</h4>
<ul>
<li>Café</li>
<li>Té</li>
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Leche</li>
</ul>
<h5>Ejemplo con conteo de listas controlado</h5>
<p>Recuento de listas controlado
De forma predeterminada, una lista ordenada comenzará a contar desde 1.<br />
Si desea comenzar a contar desde un número específico, puede usar el atributo de inicio:</p>
<ol start="50">
<li>Café</li>
<li>Leche</li>
<li>Té</li>
</ol>
<ol type="I" start="60">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ol>
</html>
Etiquetas: lista HTML ul, li, ol, dl, ejemplos, html listas ordenadas, anidadas, desplegables, desordenadas, sin puntos, de definicion, con letras, horizontales, con imagenes, html listas, html lista desplegable, ordenada, con puntos, html listas anidada, desordenada, rozwijana, horizontal, sin puntos, numerowana
HTML listas ul, ol, dl - html.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.