Todas las webs se parecen
Abre tres webs distintas. Casi todas tienen arriba el nombre y un menú.
En el centro está lo que importa. Abajo hay datos de contacto.
No es casualidad. Hay etiquetas para marcar cada zona, y hoy las aprendes.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Cabecera | La zona de arriba con el nombre de la web. Se escribe con header. | <header> |
| Menú de navegación | Los enlaces para moverse por la web. Se escribe con nav. | <nav> |
| Contenido principal | Lo más importante de la página. Se escribe con main. | <main> |
| Pie de página | La zona de abajo con contacto y avisos. Se escribe con footer. | <footer> |
| Sección | Un apartado con su propio título dentro del contenido. Se escribe con section. | <section> |
| Semántica | Que el nombre de la etiqueta dice qué es, no solo cómo se ve. | footer dice "pie" |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Cuatro zonas
Una página sencilla tiene cuatro zonas.
Arriba, la cabecera, header. Debajo, el menú, nav. En el centro, el contenido principal, main. Abajo, el pie de página, footer.
Estas etiquetas tienen semántica: su nombre dice qué zona es.
Pruébalo: las cuatro zonas
<header>
<h1>Peña Deportiva El Olivar</h1>
</header>
<nav>
<a href="#">Inicio</a>
<a href="#">Equipos</a>
</nav>
<main>
<h2>Próximo partido</h2>
<p>Sábado a las 17:00 en el campo municipal.</p>
</main>
<footer>
<p>Contacto: [email protected]</p>
</footer>
Los bordes de colores
Nota
Los bordes y los colores los pone un poco de CSS ya escrito, solo para que veas cada zona. Las etiquetas por sí solas no cambian cómo se ve la página.
Ejemplo resuelto: qué etiqueta para cada zona
| Zona | Etiqueta | Qué lleva |
|---|---|---|
| Arriba | header | El nombre y el logo |
| Debajo | nav | Enlaces: Inicio, Equipos, Contacto |
| Centro | main | El contenido de esta página |
| Un apartado | section | Un título h2 y sus párrafos |
| Abajo | footer | Contacto y aviso legal |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido
Inténtalo
Repaso rápido
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Cajas dentro de cajas
Mira el dibujo. Unas etiquetas están dentro de otras. A eso se le llama anidar.
El h1 está dentro del header. Los a están dentro del nav.
Regla de oro: lo que abres último, lo cierras primero. Como cajas: la pequeña se cierra antes que la grande.