Curso de HTML / Estructura básica de un documento HTML

Un documento HTML comienza normalmente con <!doctype html> y un elemento raíz html que contiene head y body. head reúne los metadatos; body contiene el contenido principal de la página. Esta estructura permite crear un archivo que puedes abrir directamente en un navegador.

Reconocer la estructura completa

Copia el siguiente ejemplo completo, sin incluir otro documento HTML alrededor. La sangría permite ver la relación entre elementos: head y body son hijos de html, no están uno dentro del otro.

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>My First HTML Document</title>

  </head>

  <body>

    <h1>Hello</h1>

    <p>This is the document body.</p>

  </body>

</html>

El navegador muestra “My First HTML Document” en la pestaña y “Hello” como encabezado dentro de la página. Son dos lugares diferentes porque corresponden a title y h1. La sangría del archivo facilita leer el código, pero no equivale al margen que tendrá el texto en pantalla.

Qué función cumple cada parte

El doctype ayuda a utilizar el modo de representación estándar del navegador. Aunque HTML permite omitir ciertas etiquetas en condiciones concretas, escribirlas explícitamente resulta más claro al aprender. La definición de los elementos de documento en WHATWG explica su estructura formal.

El ejemplo usa lang="en" porque su texto está en inglés. Para una página en español escribe lang="es". Este atributo no traduce el contenido ni indica dónde se aloja el sitio; ofrece información lingüística útil para pronunciación y otras herramientas.

Los ajustes iniciales de head

meta charset="utf-8" declara la codificación. También debes guardar realmente el archivo como UTF-8: cambiar la declaración no convierte por sí solo los bytes de un archivo guardado con otra codificación. Coloca la declaración cerca del inicio del documento.

meta name="viewport" configura el ancho de visualización usado en dispositivos móviles. No adapta automáticamente imágenes grandes, tablas o diseños con anchos fijos. title aporta el título del documento y debe describir la página concreta. La relación entre estos ajustes se amplía en título, descripción, idioma y codificación.

Guardar, abrir y modificar el archivo

Crea una carpeta de trabajo y un archivo de texto sin formato. Pega el ejemplo completo y guarda index.html con UTF-8. Si el editor añade .txt, utiliza la opción de guardar todos los tipos de archivo y comprueba la extensión en el explorador.

Abre el archivo con el navegador mediante “Abrir con” o arrastrándolo a la ventana. La dirección empezará por file://. Verifica por separado el título de la pestaña y el encabezado. Cambia primero solo title, guarda y recarga. Después cambia h1 y observa qué zona se modifica; restaura ambos al terminar.

Un enlace file:// apunta al sistema de archivos del equipo que lo abre. Enviarlo a otra persona no comparte tu copia. Para publicar necesitas colocar los archivos en un servidor o alojamiento y utilizar una URL accesible para los visitantes.

Diagnosticar un resultado inesperado

Si ves las etiquetas en pantalla, comprueba si el archivo terminó como index.html.txt. Si las modificaciones no aparecen, revisa el guardado, la recarga y la ruta del archivo abierto: puede haber varias copias con el mismo nombre. Si aparecen caracteres incorrectos, compara la codificación de guardado con charset.

Una página vacía exige comprobar que abriste el archivo correcto y que el contenido sigue dentro de body. Revisa también comillas o etiquetas sin cerrar, porque el navegador puede interpretar el resto de otra manera. La sintaxis de etiquetas y atributos ayuda a localizar ese tipo de error; la guía de archivos de MDN explica la organización de las carpetas de un proyecto.