Cargando...

HTML básico

En las lecciones anteriores conociste HTML y elegiste un editor. Ahora construirás una página básica completa: el esqueleto estándar con el que debe empezar todo archivo HTML moderno, más un poco de contenido visible.

¿Qué es un documento HTML básico?

Un documento HTML básico es un archivo de texto con una estructura exterior fija. Dentro colocas el contenido que ven los visitantes. Casi cada página de este curso reutiliza el mismo esqueleto exterior y cambia lo que va en el body.

Respuesta directa: el esqueleto necesario

Una página básica moderna incluye estas partes en este orden:

<!DOCTYPE html> — declara un documento HTML5
<html> — el elemento raíz que envuelve toda la página
<head> — información sobre la página (no el artículo visible principal)
<title> dentro del head — texto para la pestaña del navegador y favoritos
<body> — el contenido que la gente ve en la página

Documento HTML básico

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Esto es un encabezado</h1>
<p>Esto es un párrafo.</p>
</body>
</html>

Leer el ejemplo línea a línea

El doctype debe ir primero para que el navegador use reglas HTML modernas
Todo lo demás va dentro de <html> ... </html>
<head> guarda el título; los visitantes lo notan sobre todo en el nombre de la pestaña
<body> guarda el encabezado y el párrafo que ves en el área de la página
La mayoría de elementos necesitan una etiqueta de cierre con barra, como </p>

Head frente a body

Piensa en <head> como las notas entre bastidores y en <body> como el escenario. Los buscadores y navegadores usan el título y otros datos del head. Quien lee la página mira el body. Poner el texto principal del artículo solo en el head es un error típico de principiantes.

Anidación y orden

Los elementos HTML se anidan: un elemento puede estar dentro de otro. Mantén las etiquetas en un árbol claro. Cierra las etiquetas internas antes que las externas. Para el esqueleto básico conserva este orden: doctype, luego html, luego head (con title), luego body.

Pruébalo tú mismo

Crea un archivo llamado basic.html en tu editor
Pega el ejemplo de arriba
Cambia el texto del title y del encabezado
Guarda el archivo y ábrelo en el navegador
Tras guardar y actualizar, confirma que el título de la pestaña y el encabezado de la página se actualizaron

Pequeños consejos que ahorran tiempo después

Prefiere nombres de etiqueta en minúsculas (<p>, no <P>) para un estilo HTML moderno
Indenta las líneas anidadas para ver qué etiquetas van juntas
Mantén un <h1> claro como encabezado principal en los primeros ejemplos
Añadirás charset, enlaces, imágenes y más más adelante; domina primero este esqueleto

Errores comunes

Olvidar <!DOCTYPE html> arriba
Cerrar etiquetas en el orden incorrecto (por ejemplo cerrar html antes que body)
Poner el encabezado visible solo dentro de <head>
Guardar sin la extensión .html y preguntarte por el comportamiento raro del navegador
Escribir una etiqueta de apertura sin su cierre cuando el elemento necesita ambas

Resumen

Una página HTML básica usa doctype, html, head, title y body
El title aparece sobre todo en la pestaña del navegador
El contenido visible pertenece al body
Los elementos se anidan; cierra primero las internas
Practica editando un archivo pequeño y actualizando el navegador
Las lecciones posteriores añaden más elementos sobre el mismo esqueleto

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma