El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Header, Nav y Footer

Siguiente ►
►

En este tema, exploraremos tres de los elementos semánticos más importantes introducidos en HTML5: <header>, <nav> y <footer>. Estos elementos ayudan a estructurar el contenido de una página web de manera más clara y significativa, mejorando tanto la accesibilidad como el SEO.

  1. ¿Qué son los Elementos Semánticos?

Los elementos semánticos son aquellos que no solo definen la apariencia del contenido, sino también su significado. Esto permite a los navegadores, motores de búsqueda y desarrolladores entender mejor la estructura y el propósito del contenido.

  1. El Elemento <header>

Definición

El elemento <header> se utiliza para contener contenido introductorio o de navegación de un documento o sección. Generalmente, incluye encabezados, logotipos, menús de navegación y otros elementos introductorios.

Ejemplo Básico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Header</title>
</head>
<body>
    <header>
        <h1>Bienvenido a Mi Sitio Web</h1>
        <img src="logo.png" alt="Logo del Sitio Web">
    </header>
</body>
</html>

Explicación

  • <header>: Define el encabezado de la página.
  • <h1>: Título principal del sitio web.
  • <img>: Logotipo del sitio web.

  1. El Elemento <nav>

Definición

El elemento <nav> se utiliza para contener enlaces de navegación, como menús y barras de navegación. Este elemento ayuda a los usuarios y a los motores de búsqueda a identificar las secciones de navegación de un sitio web.

Ejemplo Básico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Nav</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Inicio</a></li>
            <li><a href="about.html">Acerca de</a></li>
            <li><a href="contact.html">Contacto</a></li>
        </ul>
    </nav>
</body>
</html>

Explicación

  • <nav>: Define la sección de navegación.
  • <ul>: Lista desordenada que contiene los elementos de navegación.
  • <li>: Elemento de la lista.
  • <a>: Enlace a otra página del sitio web.

  1. El Elemento <footer>

Definición

El elemento <footer> se utiliza para contener información de pie de página, como derechos de autor, enlaces a políticas de privacidad, y otros elementos relacionados con el contenido final de una página o sección.

Ejemplo Básico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Footer</title>
</head>
<body>
    <footer>
        <p>&copy; 2023 Mi Sitio Web. Todos los derechos reservados.</p>
        <nav>
            <ul>
                <li><a href="privacy.html">Política de Privacidad</a></li>
                <li><a href="terms.html">Términos de Servicio</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

Explicación

  • <footer>: Define el pie de página de la página.
  • <p>: Párrafo que contiene los derechos de autor.
  • <nav>: Sección de navegación dentro del pie de página.
  • <ul>: Lista desordenada que contiene los enlaces de navegación.
  • <li>: Elemento de la lista.
  • <a>: Enlace a otra página del sitio web.

  1. Ejercicio Práctico

Instrucciones

Crea una página HTML que incluya un encabezado, una sección de navegación y un pie de página. Asegúrate de utilizar los elementos <header>, <nav> y <footer> correctamente.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio Práctico</title>
</head>
<body>
    <header>
        <h1>Mi Blog Personal</h1>
        <img src="logo.png" alt="Logo del Blog">
    </header>
    
    <nav>
        <ul>
            <li><a href="index.html">Inicio</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="about.html">Acerca de</a></li>
            <li><a href="contact.html">Contacto</a></li>
        </ul>
    </nav>
    
    <footer>
        <p>&copy; 2023 Mi Blog Personal. Todos los derechos reservados.</p>
        <nav>
            <ul>
                <li><a href="privacy.html">Política de Privacidad</a></li>
                <li><a href="terms.html">Términos de Servicio</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

Explicación

  • El <header> contiene el título del blog y un logotipo.
  • El <nav> principal contiene enlaces a las diferentes secciones del blog.
  • El <footer> incluye información de derechos de autor y un segundo <nav> con enlaces a la política de privacidad y términos de servicio.

  1. Conclusión

En esta lección, hemos aprendido sobre los elementos semánticos <header>, <nav> y <footer>. Estos elementos no solo mejoran la estructura y la accesibilidad de nuestras páginas web, sino que también facilitan la comprensión del contenido tanto para los usuarios como para los motores de búsqueda. En la próxima lección, exploraremos otros elementos semánticos como <article>, <section> y <aside>.

◄ Anterior
◄
Siguiente ►
►

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados