Elaboración paso a paso

Estructura mínima del documento

Un documento HTML está compuesto por tres partes principales:

<!DOCTYPE html> - Declara el tipo de documento HTML5

<html lang="es"> - Elemento raíz que contiene todo el documento. El atributo lang especifica el idioma del contenido.

<head> - Contiene información para navegadores y buscadores (metadatos). Este contenido no se visualiza en la página.

<body> - Cuerpo del documento donde va todo el contenido visible. Todo lo que se visualiza debe estar necesariamente contenido entre las etiquetas de apertura y cierre del body.

</html> - Cierre del documento. No debe aparecer nada por debajo de esta línea.

Esta estructura básica es la base de toda página web y debe respetarse siempre para que el documento sea válido.

PRUEBA:

Metadatos

Los metadatos son información sobre el documento que se coloca en el <head> y que no se visualiza en la página, pero es fundamental para navegadores y buscadores.

<meta charset="UTF-8"> - Define la codificación de caracteres. UTF-8 permite mostrar correctamente acentos, eñes y caracteres especiales. Antes de la aparición del UTF-8 era común el ISO-8859-1 para poder representar los caracteres españoles (entre otros).

<meta name="viewport"> - Esencial para diseño responsive. width=device-width ajusta el ancho al dispositivo. Las opciones de escala controlan el zoom:

Lo más común y recomendado es width=device-width, initial-scale=1.0 que muestra la página a tamaño normal y permite zoom.

<title> - Título que aparece en la pestaña del navegador y en los resultados de búsqueda de Google. Recomendado: 50-60 caracteres máximo.

<meta name="description"> - Descripción breve que aparece en los resultados de búsqueda. Importante para SEO. Longitud recomendada: 150-160 caracteres.

<meta name="keywords"> - Palabras clave relacionadas con el contenido, separadas por comas. Menos relevante actualmente para SEO, pero útil para documentación.

<meta name="author"> - Identifica al creador o autor del documento. Puede incluir nombre completo, empresa o seudónimo.

<meta name="language"> - Especifica el idioma del contenido. Valores comunes: es (español), en (inglés), fr (francés).

<meta name="robots"> - Controla el comportamiento de los buscadores:

<meta name="date"> - Fecha de creación o última modificación en formato YYYY-MM-DD.

Estos metadatos mejoran la accesibilidad, SEO y funcionalidad de la página web.

Layout básico - parte 1

El layout básico más simple es que la página tenga tres partes: Una cabecera (header), una zona principal (main) y un pie (footer).

Además los elementos son de tipo bloque, es decir que ocupan todo el ancho de la página y la altura determinada por el contenido. Eso permite que puedan crecer hacia abajo indefinidamente

Layout básico - parte 2

Pero con el HTML solamente no se aprecia la estructura. Por eso vamos a añadirle colores a cada parte

Ahora podemos apreciar lo que queríamos decir con "elementos bloque". Ocupan todo el ancho de la página y se van apilando hacia abajo. Sin embargo un párrafo se va construyendo de izquierda a derecha y se denomina un "elemento inline"

Sin embargo, tal como decíamos, los elementos bloque sólo ocupan el espacio vertical que precise el contenido, por lo que una página así no queda bien y tendremos que fijar un alto para cada elemento en la asi

Layout básico - parte 3

Sin embargo, tal como decíamos, los elementos bloque sólo ocupan el espacio vertical que precise el contenido, por lo que una página así no queda bien y tendremos que fijar un alto para cada elemento.