Ejercicio html sobre listas anidadas para un menú de navegación

Ejercicio html sobre listas anidadas para un menú de navegación

Print Friendly, PDF & Email
Ejercicio html sobre listas anidadas para un menú de navegación
Valora esta entrada
En este ejercicio vamos a repasar como anidar listas correctamente.

Puedes repasar la teoría en esta publicación.

La idea de este ejercicio es simular la estructura html del menú de navegación de una página web.

Enunciado

Anida correctamente la lista no ordenada que se muestra en la imagen.

Lista html anidada con un subnivel y un subsubnivel
Lista html anidada con un subnivel y un subsubnivel

Solución del ejercicio

El concepto más importante a retener es evitar el típico error de escribir

<!--MAL-->
<ul><li></li>
     <ul>
        <li></li>
     </ul>
</ul>

y en su lugar escribir

<!--BIEN--!
<ul><li>
     <ul>
        <li></li>
     </ul>
     </li>
</ul>

Fijaros que el cierre </li> se desplaza hasta finalizar la lista anidada.

<!DOCTYPE html>
<html>
<head>
	<title>Lista de servicios profesionales</title>
	<meta charset="utf-8"/>
	<meta name="author" content="Francesc Ricart" />
	<meta name="description" content=""/>
</head>
<body>

	<ul>
		<li>Inicio</li>
		<li>Sobre mí</li>
		<li>servicios
			<ul>
				<li>Fontanería</li>
				<li>Electricidad</li>
				<li>Pintura
					<ul>
						<li>Parkings</li>
						<li>Trabajos en altura</li>
						<li>Domicilios privados</li>	
					</ul>
				</li>			
			</ul>
		</li>
		<li>Testimonios</li>
		<li>Contacto</li>
	</ul>
</body>
</html>

¡Hola!

Querido lector,

En HTML en muchas ocasiones es difícil apreciar si una lista está correctamente anidada o no.

Parece que lo estás haciendo bien hasta que te fijas con detenimiento.

Dirás…. ¡si no pasa nada!

Bien. Cuando estés intentando dar estilos mediante CSS a menús desplegables palparás las consecuencias si no anidas bien.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Resumen de atributos html para ayudarnos a memorizar
- 311
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Imágenes en html: la etiqueta img
- 498
Hoy en día se nos hace difícil imaginar aquellas primeras páginas web sin imágenes. La etiqueta de html se propuso por primera vez en 1993 por Marc Andreessen. En esta entrada presentamos la etiqueta...
Etiquetas audio y video de html5
- 133
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
Como hacer espacios en blanco con html
- 287
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de como se debe hacer con HTML.
Qué es un favicon y para que sirve
- 177
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Libro digital navegable
- 45
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Códigos HTML | Carácteres especiales (escapados)
- 88
¿Por qué se escapan los caracteres en html? ¿Que utilidad tiene complicarse con símbolos estraños? ¿Como los usamos? Apuntes de alumno HTML.
Ejercicio migración de xhtml a html5. Estructura web semántica.
- 35
Ejercicio html5 dónde transformamos un documento web realizado con capas html . Incluye solución.
¿Se pueden hacer listas númeradas negativas con HTML?
- 43
Ejemplos de listas numeradas negativas. Incluye código e imágenes del resultado final con distintas opciones.
Como anidar etiquetas html correctamente
- 39
Un error típico en muchos alumnos de web es no anidar bien las etiquetas. Te resumo como hacerlo y dónde se suele equivocar la gente.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.