Teoría
Teoría

Anidamiento de etiquetas

Ahora Cupcake está contento. Hasta se puso a ronronear: le gustó el nuevo diseño. Pero un buen diseño siempre trae más pedidos: «agrega unos textos», «inserta una imagen», «prueba otras fuentes y espacios». Arreglaste muy bien el sitio. ¿Nos ayudas a darle los últimos retoques?

Empecemos por los textos. El jefe necesita otro párrafo en la sección «¿Qué necesitas para un hogar acogedor?» y otro elemento en la lista de «¿Qué nos distingue de la competencia?».

Los párrafos se agregan con <p> y los elementos de lista con <li>. Tendremos que insertar esas etiquetas dentro de otras, así que veamos con más detalle las reglas de anidamiento.

Dentro de las etiquetas que se usan en pares puedes colocar otras etiquetas. Por ejemplo, así se hace en una lista:

<ul>
  <li>Elemento de la lista</li>
</ul>

Cuando anides etiquetas, cuida el orden en que las cierras. Una etiqueta anidada debe cerrarse antes de la etiqueta que la contiene:

<ul><li>Elemento de la lista</ul></li> <!-- Incorrecto -->
<ul><li>Elemento de la lista</li></ul> <!-- Correcto -->

Además, no todas las etiquetas pueden colocarse dentro de cualquier otra. Por ejemplo, <h1>, que ya conoces, no puede ir dentro de <p>. Irás descubriendo las reglas de cada etiqueta a medida que aprendas HTML.

Muchas veces, una etiqueta sin cerrar o cerrada en el lugar equivocado rompe el diseño. Pero no siempre ocurre: al analizar el código, el navegador puede «deducir» dónde debería cerrarse una etiqueta y mostrar la página sin errores visibles.

Por eso, a veces un objetivo puede aparecer como completado aunque todavía no hayas cerrado una etiqueta. Evita la tentación: cierra las etiquetas que se usan en pares incluso en esos casos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Tienda de artículos para el hogar</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="site-header"> <div class="container"> <h1>Gloevk</h1> <p>Artículos para el hogar con envío a todo el planeta</p> </div> </header> <section class="features"> <h2>¿Qué necesitas para un hogar acogedor?</h2> <p>Muebles y herrajes</p> <p>Lámparas de mesa y de pie</p>  </section> <section class="advantages"> <h2>¿Qué nos distingue de la competencia?</h2> <ul class="advantages-list"> <li>Usamos solo materiales naturales</li> <li>Informes diarios sobre el avance del trabajo</li> <li>Armamos los muebles por ti</li> <li>Servicio de garantía gratuito durante 10 años</li>  </ul> </section> <footer class="site-footer"> <div class="container"> <p>© Cupcake, 2020</p> <p>Tienda de artículos para el hogar</p> </div> </footer> </body> </html>

CSS

body { margin: 0; padding: 0; font-family: "Arial", sans-serif; font-size: 14px; line-height: 20px; color: #444444; } h1 { width: 255px; margin: 0 auto 8px; font-family: "Arial", sans-serif; text-align: center; font-weight: normal; font-size: 56px; line-height: 64px; } .container { width: 510px; margin: 0 auto; padding: 0 20px; } .site-header { min-width: 550px; height: 186px; margin-bottom: 150px; padding-top: 30px; background: #847462 no-repeat center url("img/gloevk-bg.jpg"); background-size: cover; color: #ffffff; } .site-header p { width: 255px; margin: 0 auto 26px; text-align: center; font-size: 16px; line-height: 24px; } .site-header img { display: block; margin: 0 auto; } .features { width: 510px; margin: 0 auto 30px; padding: 0 20px; } .features p { display: inline-block; vertical-align: top; width: 30%; margin: 0 5px; background-repeat: no-repeat; background-position: center top; text-transform: uppercase; } .feature-furniture { padding-top: 65px; background-image: url("img/furniture.svg"); } .feature-lighting { padding-top: 65px; background-image: url("img/lighting.svg"); } .feature-accessories { padding-top: 65px; background-image: url("img/accessories.svg"); } .advantages { width: 510px; margin: 0 auto 40px; padding: 0 20px; } .advantages-list { padding: 0; } .site-footer { min-width: 550px; background-color: #847462; color: #ffffff; } .site-footer .container { text-align: center; } .site-footer p { display: inline-block; vertical-align: middle; padding: 0 20px; }

ObjetivosRealizado

Agrega un tercer párrafo con el texto Accesorios y detalles en la sección «¿Qué necesitas para un hogar acogedor?».
En la sección «¿Qué nos distingue de la competencia?», agrega un quinto elemento a la lista con el texto Entrega el mismo día del pedido.