HTML: listas
HTML ofrece a los autores web tres formas de especificar listas de información. Todas las listas deben contener uno o más elementos de lista. Las listas pueden contener:
<ul>- Una lista desordenada. Esto mostrará una lista de elementos usando viñetas simples.
<ol>- Una lista ordenada. Esto utilizará diferentes esquemas de números para enumerar sus artículos.
<dl>- Una lista de definiciones. Esto organiza sus elementos de la misma manera que están organizados en un diccionario.
Listas HTML desordenadas
Una lista desordenada es una colección de elementos relacionados que no tienen un orden o secuencia especial. Esta lista se crea utilizando HTML<ul>etiqueta. Cada elemento de la lista está marcado con una viñeta.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Esto producirá el siguiente resultado:
El atributo de tipo
Puedes usar typeatributo para la etiqueta <ul> para especificar el tipo de viñeta que le gusta. Por defecto, es un disco. A continuación se muestran las posibles opciones:
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Ejemplo
A continuación se muestra un ejemplo en el que usamos <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ul type = "disc"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ul type = "circle"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Esto producirá el siguiente resultado:
Listas ordenadas HTML
Si debe colocar sus elementos en una lista numerada en lugar de con viñetas, se utilizará la lista ordenada en HTML. Esta lista se crea usando<ol>etiqueta. La numeración comienza en uno y se incrementa en uno para cada elemento de lista ordenada sucesiva etiquetado con <li>.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
El atributo de tipo
Puedes usar typeatributo de la etiqueta <ol> para especificar el tipo de numeración que desea. De forma predeterminada, es un número. A continuación se muestran las posibles opciones:
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
El atributo de inicio
Puedes usar startatributo de la etiqueta <ol> para especificar el punto de partida de la numeración que necesita. A continuación se muestran las posibles opciones:
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "i" start = "4">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
Listas de definiciones HTML
HTML y XHTML admiten un estilo de lista que se llama definition listsdonde las entradas se enumeran como en un diccionario o enciclopedia. La lista de definiciones es la forma ideal de presentar un glosario, una lista de términos u otra lista de nombres / valores.
Lista de definiciones utiliza las siguientes tres etiquetas.
- <dl>: define el inicio de la lista
- <dt>: un término
- <dd> - Definición de término
- </dl>: define el final de la lista
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>Esto producirá el siguiente resultado: