🧭 Nivel 4 - Navegación y Menús

📖 Aprende sobre Navegación

🧭 ¿Qué es la etiqueta NAV?

La etiqueta <nav> es un contenedor especial para menús de navegación. Ayuda a los buscadores y lectores de pantalla a identificar dónde están los enlaces principales de tu sitio.

💡 ¿Por qué usar NAV?

Podrías usar un <div> para tu menú, pero <nav> le dice a Google y a los lectores de pantalla: "¡Aquí está el menú!"

📋 Estructura típica de un menú:

Un menú normalmente tiene:

<nav> - Contenedor principal
<ul> - Lista no ordenada
<li> - Elementos de la lista
<a> - Enlaces dentro de cada li

🎨 Tipos de menús (haz clic para cargar):

📏 Menú Horizontal

Inicio Acerca Contacto

📐 Menú Vertical

Inicio

Servicios

Blog

🔘 Menú con Botones

Inicio Info

🔗 El atributo href

El atributo href puede apuntar a:

href="pagina.html" - Otra página del sitio
href="#seccion" - Una sección de la misma página
href="https://..." - Un sitio externo

💻 Editor de Navegación

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Página con Navegación</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; }
        
        /* Estilos del menú de navegación */
        nav {
            background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 15px 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        nav ul {
            list-style: none;
            display: flex;
            gap: 25px;
            justify-content: center;
        }
        
        nav li a {
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 25px;
            transition: all 0.3s ease;
            font-weight: bold;
        }
        
        nav li a:hover {
            background: rgba(255,255,255,0.2);
            transform: scale(1.1);
        }
        
        /* Contenido */
        main { padding: 30px; max-width: 800px; margin: 0 auto; }
        h1 { color: #667eea; margin-bottom: 20px; }
        p { line-height: 1.8; color: #555; }
        
        /* Secciones */
        section {
            padding: 40px 20px;
            margin: 20px 0;
            background: #f8f9fa;
            border-radius: 15px;
        }
        section h2 {
            color: #764ba2;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    
    <nav>
        <ul>
            <li><a href="#inicio">🏠 Inicio</a></li>
            <li><a href="#sobre-mi">👤 Sobre Mí</a></li>
            <li><a href="#proyectos">💼 Proyectos</a></li>
            <li><a href="#contacto">📧 Contacto</a></li>
        </ul>
    </nav>
    
    <main>
        <section id="inicio">
            <h1>¡Bienvenido a mi Sitio Web!</h1>
            <p>Esta página tiene un menú de navegación funcional. 
               Haz clic en los enlaces del menú para saltar a cada sección.</p>
        </section>
        
        <section id="sobre-mi">
            <h2>👤 Sobre Mí</h2>
            <p>Soy un estudiante aprendiendo HTML. Me gusta crear 
               páginas web y aprender nuevas tecnologías.</p>
        </section>
        
        <section id="proyectos">
            <h2>💼 Mis Proyectos</h2>
            <p>Aquí mostraré todos los proyectos que vaya creando 
               mientras aprendo programación web.</p>
        </section>
        
        <section id="contacto">
            <h2>📧 Contacto</h2>
            <p>Puedes contactarme por email o redes sociales. 
               ¡Me encantaría saber de ti!</p>
        </section>
    </main>
</body>
</html>

👁️ Vista Previa

Navegación y Menús con NAV

🧭 ¿Qué es la etiqueta NAV?

💡 ¿Por qué usar NAV?

📋 Estructura típica de un menú:

🎨 Tipos de menús (haz clic para cargar):

📏 Menú Horizontal

📐 Menú Vertical

🔘 Menú con Botones

🔗 El atributo href

Agregar elementos al menú:

1. ¿Para qué sirve la etiqueta <nav>?

2. ¿Qué significa href="#seccion"?

3. ¿Qué etiquetas se usan para crear una lista de menú?

🧭 ¿Qué es la etiqueta NAV?

💡 ¿Por qué usar NAV?

📋 Estructura típica de un menú:

🎨 Tipos de menús (haz clic para cargar):

📏 Menú Horizontal

📐 Menú Vertical

🔘 Menú con Botones

🔗 El atributo href

Agregar elementos al menú:

1. ¿Para qué sirve la etiqueta <nav>?

2. ¿Qué significa href="#seccion"?

3. ¿Qué etiquetas se usan para crear una lista de menú?

¡Nivel 4 Completado!