Las listas no ordenadas se utilizan para marcar listas de elementos para los cuales el orden de los elementos no importa. Tomemos una lista de compras como ejemplo:
leche
huevos
pan
hummus
Cada lista no ordenada comienza con un elemento <ul>—este envuelve todos los elementos de la lista:
<ul>
leche
huevos
pan
hummus
</ul>
El último paso es envolver cada elemento de la lista en un elemento <li> (elemento de lista):
<ul>
<li>leche</li>
<li>huevos</li>
<li>pan</li>
<li>hummus</li>
</ul>
Intenta editar el ejemplo interactivo a continuación para crear tu propia lista HTML no ordenada.
<h2>Salida en vivo</h2>
<div class="output" style="min-height: 50px;"></div>
<h2>Código editable</h2>
<p class="a11y-label">
Presiona Esc para alejar el foco del área de código (Tab inserta un carácter
de tabulación).
</p>
<textarea id="code" class="input" style="min-height: 100px; width: 95%">
leche
huevos
pan
hummus
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Restablecer" />
<input id="solution" type="button" value="Mostrar solución" />
</div>
html {
font-family: sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;
function updateCode() {
output.innerHTML = textarea.value;
}
const htmlSolution =
"<ul>\n<li>leche</li>\n<li>huevos</li>\n<li>pan</li>\n<li>hummus</li>\n</ul>";
let solutionEntry = htmlSolution;
reset.addEventListener("click", () => {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = "Mostrar solución";
updateCode();
});
solution.addEventListener("click", () => {
if (solution.value === "Mostrar solución") {
textarea.value = solutionEntry;
solution.value = "Ocultar solución";
} else {
textarea.value = userEntry;
solution.value = "Mostrar solución";
}
updateCode();
});
textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = (e) => {
if (e.code === "Tab") {
e.preventDefault();
insertAtCaret("\t");
}
if (e.code === "Escape") {
textarea.blur();
}
};
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
let caretPos = textarea.selectionStart;
const front = textarea.value.substring(0, caretPos);
const back = textarea.value.substring(
textarea.selectionEnd,
textarea.value.length,
);
textarea.value = front + text + back;
caretPos += text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}
// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
if (solution.value === "Mostrar solución") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};
Las listas ordenadas son listas en las que el orden de los elementos sí importa. Tomemos un conjunto de direcciones como ejemplo:
Conduce hasta el final de la calle
Gira a la derecha
Sigue recto a través de las dos primeras rotondas
Gira a la izquierda en la tercera rotonda
La escuela está a tu derecha, 300 metros más adelante
La estructura de marcado es la misma que para las listas no ordenadas, excepto que tienes que envolver los elementos de la lista en un elemento <ol>, en lugar de <ul>:
<ol>
<li>Conduce hasta el final de la calle</li>
<li>Gira a la derecha</li>
<li>Sigue recto a través de las dos primeras rotondas</li>
<li>Gira a la izquierda en la tercera rotonda</li>
<li>La escuela está a tu derecha, 300 metros más adelante</li>
</ol>
Intenta editar el ejemplo interactivo a continuación para crear tu propia lista HTML ordenada.
<h2>Salida en vivo</h2>
<div class="output" style="min-height: 50px;"></div>
<h2>Código editable</h2>
<p class="a11y-label">
Presiona Esc para alejar el foco del área de código (Tab inserta un carácter
de tabulación).
</p>
<textarea id="code" class="input" style="min-height: 200px; width: 95%">
Conduce hasta el final de la calle
Gira a la derecha
Sigue recto a través de las dos primeras rotondas
Gira a la izquierda en la tercera rotonda
La escuela está a tu derecha, 300 metros más adelante
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Restablecer" />
<input id="solution" type="button" value="Mostrar solución" />
</div>
html {
font-family: sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;
function updateCode() {
output.innerHTML = textarea.value;
}
const htmlSolution =
"<ol>\n<li>Conduce hasta el final de la calle</li>\n<li>Gira a la derecha</li>\n<li>Sigue recto a través de las dos primeras rotondas</li>\n<li>Gira a la izquierda en la tercera rotonda</li>\n<li>La escuela está a tu derecha, 300 metros más adelante</li>\n</ol>";
let solutionEntry = htmlSolution;
reset.addEventListener("click", () => {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = "Mostrar solución";
updateCode();
});
solution.addEventListener("click", () => {
if (solution.value === "Mostrar solución") {
textarea.value = solutionEntry;
solution.value = "Ocultar solución";
} else {
textarea.value = userEntry;
solution.value = "Mostrar solución";
}
updateCode();
});
textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = (e) => {
if (e.code === "Tab") {
e.preventDefault();
insertAtCaret("\t");
}
if (e.code === "Escape") {
textarea.blur();
}
};
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
let caretPos = textarea.selectionStart;
const front = textarea.value.substring(0, caretPos);
const back = textarea.value.substring(
textarea.selectionEnd,
textarea.value.length,
);
textarea.value = front + text + back;
caretPos += text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}
// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
if (solution.value === "Mostrar solución") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};
Entonces, en este punto del artículo, tienes toda la información que necesitas para marcar nuestro ejemplo de página de recetas. Puedes elegir guardar una copia local de nuestro archivo de inicio text-start.html y hacer el trabajo allí o hacerlo en el ejemplo editable a continuación. Hacerlo localmente probablemente sea mejor, ya que podrás guardar el trabajo que estás haciendo, mientras que si lo completas en el ejemplo editable, se perderá la próxima vez que abras la página. Ambos tienen pros y contras.
<h2>Salida en vivo</h2>
<div class="output" style="min-height: 50px;"></div>
<h2>Código editable</h2>
<p class="a11y-label">
Presiona Esc para alejar el foco del área de código (Tab inserta un carácter
de tabulación).
</p>
<textarea id="code" class="input" style="min-height: 200px; width: 95%">
Receta rápida de hummus
Esta receta hace un hummus rápido y sabroso, sin complicaciones. Se ha adaptado de varias recetas diferentes que he leído a lo largo de los años.
El hummus es una pasta espesa y deliciosa que se utiliza mucho en la cocina griega y de Oriente Medio. Es muy sabroso con ensalada, carnes a la parrilla y panes de pita.
Ingredientes
1 lata (400g) de garbanzos
175g de tahini
6 tomates secos
Medio pimiento rojo
Una pizca de pimienta de cayena
1 diente de ajo
Un chorrito de aceite de oliva
Instrucciones
Retirar la piel del ajo y picar groseramente
Retirar todas las semillas y el tallo del pimiento y picar groseramente
Añadir todos los ingredientes a un procesador de alimentos
Procesar todos los ingredientes hasta obtener una pasta
Si quieres un hummus "grueso" y rústico, procésalo por poco tiempo
Si quieres un hummus suave, procésalo por más tiempo
Para un sabor diferente, puedes probar a mezclar una pequeña cantidad de limón y cilantro, chile, lima y chipotle, harissa y menta, o espinacas y queso feta. Experimenta y mira qué funciona para ti.
Almacenamiento
Refrigera el hummus terminado en un recipiente sellado. Deberías poder usarlo durante aproximadamente una semana después de haberlo hecho. Si empieza a burbujear, definitivamente debes desecharlo.
El hummus es adecuado para congelar; debes descongelarlo y usarlo en un par de meses.
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Restablecer" />
<input id="solution" type="button" value="Mostrar solución" />
</div>
html {
font-family: sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;
function updateCode() {
output.innerHTML = textarea.value;
}
const htmlSolution =
'<h1>Receta rápida de hummus</h1>\n\n<p>Esta receta hace un hummus rápido y sabroso, sin complicaciones. Se ha adaptado de varias recetas diferentes que he leído a lo largo de los años.</p>\n\n<p>El hummus es una pasta espesa y deliciosa que se utiliza mucho en la cocina griega y de Oriente Medio. Es muy sabroso con ensalada, carnes a la parrilla y panes de pita.</p>\n\n<h2>Ingredientes</h2>\n\n<ul>\n<li>1 lata (400g) de garbanzos</li>\n<li>175g de tahini</li>\n<li>6 tomates secos</li>\n<li>Medio pimiento rojo</li>\n<li>Una pizca de pimienta de cayena</li>\n<li>1 diente de ajo</li>\n<li>Un chorrito de aceite de oliva</li>\n</ul>\n\n<h2>Instrucciones</h2>\n\n<ol>\n<li>Retirar la piel del ajo y picar groseramente.</li>\n<li>Retirar todas las semillas y el tallo del pimiento y picar groseramente.</li>\n<li>Añadir todos los ingredientes a un procesador de alimentos.</li>\n<li>Procesar todos los ingredientes hasta obtener una pasta.</li>\n<li>Si quieres un hummus "grueso" y rústico, procésalo por poco tiempo.</li>\n<li>Si quieres un hummus suave, procésalo por más tiempo.</li>\n</ol>\n\n<p>Para un sabor diferente, puedes probar a mezclar una pequeña cantidad de limón y cilantro, chile, lima y chipotle, harissa y menta, o espinacas y queso feta. Experimenta y mira qué funciona para ti.</p>\n\n<h2>Almacenamiento</h2>\n\n<p>Refrigera el hummus terminado en un recipiente sellado. Deberías poder usarlo durante aproximadamente una semana después de haberlo hecho. Si empieza a burbujear, definitivamente debes desecharlo.</p>\n\n<p>El hummus es adecuado para congelar; debes descongelarlo y usarlo en un par de meses.</p>';
let solutionEntry = htmlSolution;
reset.addEventListener("click", () => {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = "Mostrar solución";
updateCode();
});
solution.addEventListener("click", () => {
if (solution.value === "Mostrar solución") {
textarea.value = solutionEntry;
solution.value = "Ocultar solución";
} else {
textarea.value = userEntry;
solution.value = "Mostrar solución";
}
updateCode();
});
textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = (e) => {
if (e.code === "Tab") {
e.preventDefault();
insertAtCaret("\t");
}
if (e.code === "Escape") {
textarea.blur();
}
};
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
let caretPos = textarea.selectionStart;
const front = textarea.value.substring(0, caretPos);
const back = textarea.value.substring(
textarea.selectionEnd,
textarea.value.length,
);
textarea.value = front + text + back;
caretPos += text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}
// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
if (solution.value === "Mostrar solución") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};
Si te atascas, siempre puedes presionar el botón Mostrar solución, o consultar nuestro ejemplo text-complete.html en nuestro repositorio de GitHub.
Está perfectamente bien anidar una lista dentro de otra. Es posible que desees tener algunas subviñetas debajo de una viñeta de nivel superior. Tomemos la segunda lista de nuestro ejemplo de receta:
<ol>
<li>Retirar la piel del ajo y picar groseramente.</li>
<li>
Retirar todas las semillas y el tallo del pimiento y picar groseramente.
</li>
<li>Añadir todos los ingredientes a un procesador de alimentos.</li>
<li>Procesar todos los ingredientes hasta obtener una pasta.</li>
<li>Si quieres un hummus "grueso" y rústico, procésalo por poco tiempo.</li>
<li>Si quieres un hummus suave, procésalo por más tiempo.</li>
</ol>
Dado que las dos últimas viñetas están muy relacionadas con la anterior (se leen como subinstrucciones u opciones que encajan debajo de esa viñeta), podría tener sentido anidarlas dentro de su propia lista no ordenada y colocar esa lista dentro de la cuarta viñeta actual. Esto se vería así:
<ol>
<li>Retirar la piel del ajo y picar groseramente.</li>
<li>
Retirar todas las semillas y el tallo del pimiento y picar groseramente.
</li>
<li>Añadir todos los ingredientes a un procesador de alimentos.</li>
<li>
Procesar todos los ingredientes hasta obtener una pasta.
<ul>
<li>
Si quieres un hummus "grueso" y rústico, procésalo por poco tiempo.
</li>
<li>Si quieres un hummus suave, procésalo por más tiempo.</li>
</ul>
</li>
</ol>
Intenta volver al ejemplo de aprendizaje activo anterior y actualizar la segunda lista de esta manera.
El propósito de las listas de descripción es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:
soliloquio
En teatro, donde un personaje se habla a sí mismo, representando sus pensamientos o sentimientos internos y, en el proceso, transmitiéndolos a la audiencia (pero no a otros personajes).
monólogo
En teatro, donde un personaje expresa sus pensamientos en voz alta para compartirlos con la audiencia y cualquier otro personaje presente.
aparte
En teatro, donde un personaje comparte un comentario solo con la audiencia con fines humorísticos o dramáticos. Por lo general, se trata de un sentimiento, un pensamiento o información adicional de fondo.
Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas — <dl>; además, cada término se envuelve en un elemento <dt> (término de descripción) y cada descripción se envuelve en un elemento <dd> (definición de descripción).
Terminemos de marcar nuestro ejemplo:
<dl>
<dt>soliloquio</dt>
<dd>
En teatro, donde un personaje se habla a sí mismo, representando sus
pensamientos o sentimientos internos y, en el proceso, transmitiéndolos a la
audiencia (pero no a otros personajes).
</dd>
<dt>monólogo</dt>
<dd>
En teatro, donde un personaje expresa sus pensamientos en voz alta para
compartirlos con la audiencia y cualquier otro personaje presente.
</dd>
<dt>aparte</dt>
<dd>
En teatro, donde un personaje comparte un comentario solo con la audiencia
con fines humorísticos o dramáticos. Por lo general, se trata de un
sentimiento, un pensamiento o información adicional de fondo.
</dd>
</dl>
Los estilos predeterminados del navegador mostrarán las listas de descripción con las descripciones un poco sangradas con respecto a los términos.
Ten en cuenta que está permitido tener un solo término con múltiples descripciones, por ejemplo:
<dl>
<dt>aparte</dt>
<dd>
En teatro, donde un personaje comparte un comentario solo con la audiencia
con fines humorísticos o dramáticos. Por lo general, se trata de un
sentimiento, un pensamiento o información adicional de fondo.
</dd>
<dd>
En escritura, una sección de contenido que está relacionada con el tema
actual, pero no encaja directamente en el flujo principal de contenido, por
lo que se presenta cerca (a menudo en un cuadro a un lado).
</dd>
</dl>
Es hora de que pruebes las listas de descripción; agrega elementos al texto sin formato en el campo Entrada para que aparezca como una lista de descripción en el campo Salida. Puedes intentar usar tus propios términos y descripciones si lo deseas.
Si cometes un error, siempre puedes restablecerlo usando el botón Restablecer. Si te quedas realmente atascado, presiona el botón Mostrar solución para ver la respuesta.
<h2>Salida en vivo</h2>
<div class="output" style="min-height: 50px;"></div>
<h2>Código editable</h2>
<p class="a11y-label">
Presiona Esc para alejar el foco del área de código (Tab inserta un carácter
de tabulación).
</p>
<textarea id="code" class="input" style="min-height: 100px; width: 95%">
Tocino
El pegamento que une al mundo.
Huevos
El pegamento que une al pastel.
Café
La bebida que pone al mundo en marcha por la mañana.
Un color marrón claro.
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Restablecer" />
<input id="solution" type="button" value="Mostrar solución" />
</div>
html {
font-family: sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;
function updateCode() {
output.innerHTML = textarea.value;
}
const htmlSolution =
"<dl>\n <dt>Tocino</dt>\n <dd>El pegamento que une al mundo.</dd>\n <dt>Huevos</dt>\n <dd>El pegamento que une al pastel.</dd>\n <dt>Café</dt>\n <dd>La bebida que pone al mundo en marcha por la mañana.</dd>\n <dd>Un color marrón claro.</dd>\n</dl>";
let solutionEntry = htmlSolution;
reset.addEventListener("click", () => {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = "Mostrar solución";
updateCode();
});
solution.addEventListener("click", () => {
if (solution.value === "Mostrar solución") {
textarea.value = solutionEntry;
solution.value = "Ocultar solución";
} else {
textarea.value = userEntry;
solution.value = "Mostrar solución";
}
updateCode();
});
textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = (e) => {
if (e.code === "Tab") {
e.preventDefault();
insertAtCaret("\t");
}
if (e.code === "Escape") {
textarea.blur();
}
};
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
let caretPos = textarea.selectionStart;
const front = textarea.value.substring(0, caretPos);
const back = textarea.value.substring(
textarea.selectionEnd,
textarea.value.length,
);
textarea.value = front + text + back;
caretPos += text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}
// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
if (solution.value === "Mostrar solución") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};
Has llegado al final de este conjunto de tres artículos sobre elementos semánticos HTML básicos, pero ¿puedes recordar la información más importante? Puedes encontrar algunas pruebas adicionales para verificar que has retenido esta información antes de continuar — consulta Pon a prueba tus habilidades: Fundamentos del texto HTML.
Eso es todo para las listas. A continuación, pasaremos a una discusión de más alto nivel. Hemos mostrado cómo implementar algunas características individuales de la página, pero ¿qué hay de la estructuración de una página HTML completa? La estructuración de documentos es lo siguiente.