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
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!

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.