Ejemplo de estructura de una página HTML

En este tutorial vamos a explicar las partes de una estructura básica de una página hecha en HTML. Como veremos, la sección del body (donde va toda la información que se muestra al usuario), puede y debe hacerse más compleja, conteniendo capas y estructuras que conformes los menús, el contenido y el pie de página, entre otros.

Junto con esta guía, te recomiendo que leas los siguientes documentos:

Conceptos básicos de HTML.
Normas elementales en HTML.
Videotutoriales de HTML y HTML básico.
Como hacer buenas páginas en HTML.
Todos los capítulos del subapartado Crear una página web de este manual.

Introducción

Cada página HTML debe constar de dos secciones:

El HEAD o cabecera, donde está la información sobre la página web, como el título, una breve descripción y algunas palabras clave. También puede contener información de estilos (CSS) y librerías JavaScript.
El BODY o cuerpo, donde está todo el contenido que el usuario va a ver en su navegador.

Las siguientes etiquetas HTML se utilizan para construir la estructura básica de una web:

<html> significa el inicio (y final) del documento.
<head> significa el inicio (y final) de la sección de cabecera del documento.
<title> Es el título del documento. Esto se muestra por la mayoría de los navegadores como título de la ventana, cuando agregas una web a favoritos, etc. Los motores de búsqueda como Google suelen utilizarlo también como título en los resultados de búsqueda, por lo que es muy importante para la optimización de la página web y el SEO en general. Por todo esto, debes escoger muy bien el título de cada página de tu sitio web y procurar que todos sean únicos y descriptivos.
<body> significa el inicio (y final) del contenido visible del documento (lo que ve el usuario final).

Estructura básica en HTML

Un ejemplo completo de un documento HTML sería (ojo, sólo la estructura básica):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Título de ejemplo</title> </head> <body> <p>¡Esta es mi web!</p> </body> </html>

Artículos Relacionados
Enlázanos
Si te gusta esta web y quieres enlazarnos, te sugiero estas imágenes y textos totalmente...
Normas elementales en HTML
Este tutorial está basado en las recomendaciones del W3C (y II), donde la idea...
Guia CSS de la propiedad Float y Clear para estructurar una web
Al momento de diseñar nuestra pagina web, las propiedades más importante que debemos...
Mapas y ayudas. Como hacer una web
Como empezar una web: Mapas y ayudas Incluso en Sitios bien estructurados y con funciones...

Última Actualización: 1/02/10