Curso HTML 19.3 Creación de un sitio multipágina con navegación completa

19.3 Creación de un sitio multipágina con navegación completa

En este punto del curso vamos a ver cómo diseñar y estructurar un sitio web con varias páginas, conectarlas mediante una barra de navegación coherente y aplicar buenas prácticas de accesibilidad y mantenimiento.

Estructura de archivos y carpetas

Una organización clara de carpetas facilita el mantenimiento. Por ejemplo:

  
  sitio-multipagina/
  ├── index.html
  ├── nosotros.html
  ├── servicios.html
  ├── contacto.html
  └── assets/
      ├── img/
      │   └── logo.png
      └── js/
          └── scripts.js
  

Barra de navegación semántica

Usaremos la etiqueta <nav> para separar la navegación del contenido principal. Dentro, una lista no ordenada <ul> contiene los vínculos.

Enlaces relativos y absolutas

• Relativos: indican la posición de un archivo respecto al documento actual.

  
  Servicios
        

• Absolutos: incluyen el protocolo y dominio completo.

  Servicios
        

Indicando la página activa

Podemos marcar el elemento de la lista correspondiente a la página actual añadiendo una clase o atributo ARIA:

El atributo aria-current='page' mejora la accesibilidad para lectores de pantalla.

Contenido principal y semántica

Cada página debe incluir una sección principal con <main>, encabezados <h2>… y <section> según el contenido:

  





  
Servicios
  

    
Consultoría
    
Ofrecemos asesoría técnica …
  
  

    
Desarrollo Web
    
Creamos sitios a medida …
  



  

Ejemplo completo de una página multipágina

A continuación, un boceto de index.html con navegación y áreas semánticas:

  





  
Bienvenido a nuestro sitio
  
En nuestra empresa brindamos soluciones integrales …
  

    
Nuestros valores
    

      
Calidad
      
Innovación
      
Compromiso
    
  



  

Buenas prácticas y conclusiones

• Mantener rutas relativas coherentes tras reorganizar carpetas.
• Usar marcas semánticas (nav, main, footer) para mejorar legibilidad y SEO.
• Añadir alt en imágenes y aria-current en la página activa para accesibilidad.
• Separar lógica y presentación: los estilos y scripts externos permanecen fuera del HTML.

Con esta configuración podrás replicar fácilmente el modelo en cualquier proyecto multipágina, garantizando coherencia en la navegación y orden en el mantenimiento a lo largo del tiempo.