Estructura básica HTML

Nivel: Introductorio — primer archivo HTML

La estructura básica HTML es el esqueleto mínimo de una página: declaración del documento, cabecera informativa (head) y cuerpo visible (body). Con un editor de texto y un navegador puedes crear tu primer archivo .html hoy.

Objetivo: armar, guardar y abrir un documento HTML mínimo. Si aún no sabes qué es HTML, lee primero el tutorial de definición y vuelve.

Paso 1: Abrir un editor de texto simple

En Windows puedes usar el Bloc de notas; en otros sistemas, cualquier editor de texto plano. No hace falta un programa profesional para el primer ejercicio. Evita guardar como documento de Word: necesitamos texto plano.

Paso 2: Escribir el esqueleto mínimo

Copia esta estructura base (puedes entenderla línea a línea):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Mi primera página</title>
</head>
<body>
  <h1>Hola</h1>
  <p>Esta es mi primera página HTML.</p>
</body>
</html>

DOCTYPE indica HTML moderno. html envuelve todo. head guarda datos para el navegador (título, codificación). body es lo que se ve.

Paso 3: Guardar como .html

Al guardar, elige “todos los archivos” si el editor lo pide, y nombra el archivo con extensión .html (por ejemplo mi-pagina.html). Codificación UTF-8 si aparece la opción. Guárdalo en una carpeta fácil de encontrar.

Paso 4: Abrirlo en el navegador

Haz doble clic en el archivo o arrástralo a una ventana del navegador. Debes ver el título “Hola” y el párrafo. Si ves el código crudo, probablemente se guardó con otra extensión (como .txt): corrige el nombre y vuelve a abrir.

Paso 5: Cambiar algo y recargar

Edita el texto del h1, guarda y recarga la pestaña (F5). Ese ciclo editar → guardar → recargar es el ritmo básico de aprendizaje web.

Errores comunes

• Guardar como .txt o como documento de Word.
• Olvidar cerrar etiquetas importantes.
• Escribir contenido fuera de body.
• No recargar el navegador tras guardar.

Consejos prácticos

1. Mantén indentación (sangrías) para leer el árbol de etiquetas.
2. Usa siempre lang="es" y charset="utf-8" desde el inicio.
3. Cambia de a una cosa por vez para detectar errores.
4. Guarda una carpeta “practicas-html” solo para estos ejercicios.

Preguntas frecuentes

¿Puedo usar el celular?

Es posible con apps de edición, pero al inicio es más cómodo en computador.

¿Necesito internet para abrir el archivo?

No. Un HTML local se abre sin conexión.

¿Qué sigue después?

Más etiquetas de contenido: títulos, párrafos, enlaces e imágenes, de a un tutorial.

¿Por qué no se ve igual que un sitio famoso?

Porque aún no hay CSS ni recursos avanzados. Primero la estructura; después el estilo.

Checklist final

• Creé un archivo .html.
• Incluí doctype, html, head y body.
• Lo abrí en el navegador y vi el contenido.
• Cambié un texto, guardé y recargué.
• Sé el siguiente paso: más etiquetas de contenido.