Estructura Básica de un Sitio Web
Francisco Imanol Suarez
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.
Subscribe to my newsletter
Read articles from Francisco Imanol Suarez directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by