Estructura Básica de un Sitio Web

Introducción

La estructura básica de un sitio web es fundamental para el desarrollo de cualquier proyecto tecnologico. Es el esqueleto sobre el cual se construye todo el contenido y funcionalidades de un sitio. Una estructura bien organizada no solo facilita el trabajo de los desarrolladores, sino que también mejora la accesibilidad, la usabilidad y el rendimiento del sitio.

En este capítulo, exploraremos cómo configurar la etiqueta <head> y cómo crear una estructura base en la etiqueta <body>. Estos elementos son esenciales para definir aspectos globales del sitio, como metadatos, css y scripts, así como la organización inicial del contenido.

Objetivos del Capítulo

  • Configurar el <head>: Aprenderás a incluir metadatos importantes, como el título de la página, la codificación de caracteres y enlaces a recursos externos, enfatizando metadatos relacionados con accesibilidad.

  • Crear una Estructura Base en <body>: Estableceremos una estructura coherente y lógica para el contenido de tu página, utilizando elementos semánticos y buenas prácticas de HTML que promuevan la accesibilidad.

Importancia de la Estructura Básica

Una estructura bien definida ofrece múltiples beneficios:

  • Accesibilidad: Facilita la navegación para usuarios con algun tipo de discapacidad, permitiendo asi que tecnologías asistivas interpreten el contenido correctamente.

  • SEO: Mejora la optimización para motores de búsqueda al organizar el contenido de manera clara.

  • Mantenibilidad: Simplifica las actualizaciones y el mantenimiento del sitio, ya que una estructura clara es más comprensible.

  • Rendimiento: Contribuye a tiempos de carga más rápidos mediante una mejor organización de recursos.

Contenido del Capítulo

1. Elemento <head>

1.1 Importancia y función

El <head> es una sección crucial del documento HTML que contiene metadatos y enlaces a recursos externos. Estos elementos no son visibles directamente en la página web, pero son esenciales para su funcionamiento y optimización.

1.2 Inclusión de Metadatos

Los metadatos proporcionan información sobre la página web a los navegadores y motores de búsqueda. Algunos de los metadatos más importantes incluyen:

<title> Mi Página Web </title>
<meta charset="UTF-8">
<meta name="description" content="Descripción de la página">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">

1.3 Enlaces a Recursos Externos

En este podemos enlazar hojas de estilo, scripts de JavaScript y fuentes externas.

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="manifest" href="/manifest.json">

1.4 Uso de etiquetas importantes

Además de los metadatos y enlaces, hay otras etiquetas importantes que pueden incluirse en este:

<base href="https://www.ejemplo.com/">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Ejemplos de Código Completos

Ejemplo de Código Completo <head>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Descripción de la página">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="manifest" href="/manifest.json">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
    <!-- Contenido aquí -->
</body>
</html>

2. La estructura base en <body>

2.1 Creación de una Plantilla Base

La etiqueta <body> contiene todo el contenido visible de la página web. Crear una plantilla base estructurada te ayudará a mantener el orden y la coherencia en tu sitio. Asegúrate de que cada sección esté claramente definida y sea accesible.

2.2 Uso de Elementos Semánticos

Utilizar elementos HTML semánticos mejora tanto la accesibilidad como el SEO. Algunos de los elementos semánticos más importantes incluyen:

<header>: Contiene el encabezado de la página o sección, ideal para incluir navegación y títulos.
<main>: Define el contenido principal de la página y es crucial para la navegación de lectores de pantalla.
<footer>: Contiene el pie de página de la página o sección, incluyendo información de contacto y enlaces importantes.
<article>: Representa un contenido independiente que puede ser distribuido de forma independiente.
<section>: Agrupa contenido relacionado, ayudando a dividir la página en secciones lógicas.
<nav>: Contiene enlaces de navegación, facilitando el acceso a diferentes partes del sitio.

2.3 Organización Inicial del Contenido

Una buena práctica es organizar el contenido de tu página en secciones lógicas desde el principio. Esto no solo hace que tu página sea más fácil de entender y navegar, sino que también facilita futuras actualizaciones y modificaciones. Utiliza roles ARIA (Accessible Rich Internet Applications) cuando sea necesario para mejorar la accesibilidad.

2.4 Mejores Prácticas para una Estructura Limpia y Eficiente

  • Consistencia: Mantén una estructura consistente en todas las páginas de tu sitio web para facilitar la navegación.

  • Modularidad: Divide el contenido en módulos o componentes reutilizables, facilitando el mantenimiento y la escalabilidad.

  • Comentarios: Utiliza comentarios en el código para explicar secciones complejas o importantes.

  • Validación: Asegúrate de que tu HTML sea válido y siga las normas del W3C. Utiliza herramientas de validación para verificar la accesibilidad.

Ejemplos de codigo

Estructura base en <body>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Descripción de la página">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
    <header>
        <h1>Bienvenido a Mi Sitio Web</h1>
        <nav>
            <ul>
                <li><a href="#home">Inicio</a></li>
                <li><a href="#about">Acerca de</a></li>
                <li><a href="#contact">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Inicio</h2>
            <p>Contenido de la página de inicio.</p>
        </section>
        <section id="about">
            <h2>Acerca de</h2>
            <p>Información sobre nosotros.</p>
        </section>
    </main>
    <footer>
        <p>Contacto: info@ejemplo.com</p>
    </footer>
</body>
</html>

Desafío 1: Configuración del <head>

Objetivo: Configurar correctamente la etiqueta <head> con todos los metadatos esenciales y enlaces a recursos externos.

Instrucciones:

  • Crea un archivo HTML y asegúrate de incluir la etiqueta <head>.

  • Añade los siguientes metadatos:

    • Título de la página.

    • Codificación de caracteres como UTF-8.

    • Descripción breve de la página.

    • Configuración de la ventana gráfica para hacer el sitio responsive.

    • Color del tema del navegador móvil.

  • Enlaza una hoja de estilo CSS externa y una fuente de Google Fonts.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Descripción de la página">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
    <!-- Contenido aquí -->
</body>
</html>

Desafío 2: Creación de una Plantilla Base en <body>

Objetivo: Establecer una estructura base coherente en la etiqueta <body> utilizando elementos HTML semánticos.

Instrucciones:

  • Dentro de la etiqueta <body>, crea una estructura básica utilizando los siguientes elementos semánticos:

    • <header>: Incluir un título y una barra de navegación.

    • <main>: Contenido principal de la página.

    • <section>: Una sección de contenido dentro del <main>.

    • <footer>: Pie de página con información de contacto.

  • Asegúrate de que la estructura sea lógica y fácil de entender.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Descripción de la página">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
    <header>
        <h1>Bienvenido a Mi Sitio Web</h1>
        <nav>
            <ul>
                <li><a href="#home">Inicio</a></li>
                <li><a href="#about">Acerca de</a></li>
                <li><a href="#contact">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Inicio</h2>
            <p>Contenido de la página de inicio.</p>
        </section>
        <section id="about">
            <h2>Acerca de</h2>
            <p>Información sobre nosotros.</p>
        </section>
    </main>
    <footer>
        <p>Contacto: info@ejemplo.com</p>
    </footer>
</body>
</html>

Recursos Adicionales

Para profundizar en los conceptos discutidos en este capítulo, te recomendamos consultar los siguientes recursos:

Ejercicios prácticos adicionales

Ejercicio 1: Implementación de ARIA Roles

Añade ARIA roles a un documento HTML existente para mejorar la accesibilidad.

Ejercicio 2: Validación HTML

Usa una herramienta de validación (como W3C Validator) para verificar el código HTML de tu sitio y corrige los errores encontrados.

Sección de Preguntas Frecuentes (FAQ)

P: ¿Qué son los metadatos y por qué son importantes?

R: Los metadatos proporcionan información adicional sobre la página web a navegadores y motores de búsqueda. Son importantes para hacer que la página sea accesible y optimizada para SEO.

P: ¿Qué es el atributo alt en las imágenes y por qué es importante?

R: El atributo alt proporciona un texto alternativo para las imágenes, lo cual es crucial para usuarios que utilizan lectores de pantalla. Tambien podemos encontrarnos casos en los cuales este atributo esta vacio dado que nos encontramos en un caso de imagen decorativa

Aca tenes un post sobre la importancia del atributo ALT en las imagenes

Imágenes y Diagramas

Mapa de la Estructura de un Sitio Web

Incluir diagramas que ilustren la estructura básica de un sitio web puede ayudar a los lectores a visualizar la información discutida.

    <html>
    ├── <head>
    │   ├── <meta>
    │   ├── <link>
    │   └── <title>
    └── <body>
        ├── <header>
        ├── <main>
        │   ├── <section>
        │   └── <article>
        └── <footer>

Comentarios en el Código

Si queres podes crear comentarios en el codigo para identificar cada seccion como lo hacemos aca abajo

<!DOCTYPE html>
<html lang="es">
<head>
    <!-- Meta datos de la página -->
    <meta charset="UTF-8">
    <meta name="description" content="Descripción de la página">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
    <!-- Encabezado del sitio -->
    <header>
        <h1>Bienvenido a Mi Sitio Web</h1>
        <!-- Barra de navegación -->
        <nav>
            <ul>
                <li><a href="#home">Inicio</a></li>
                <li><a href="#about">Acerca de</a></li>
                <li><a href="#contact">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <!-- Contenido principal -->
    <main>
        <section id="home">
            <h2>Inicio</h2>
            <p>Contenido de la página de inicio.</p>
        </section>
        <section id="about">
            <h2>Acerca de</h2>
            <p>Información sobre nosotros.</p>
        </section>
    </main>
    <!-- Pie de página -->
    <footer>
        <p>Contacto: info@ejemplo.com</p>
    </footer>
</body>
</html>

Al incorporar estas sugerencias, no solo mejorarás la accesibilidad y usabilidad de la web, sino que también facilitarás el aprendizaje de tus lectores con ejemplos claros, recursos adicionales y ejercicios prácticos.