Objetivos de aprendizaje

Al finalizar esta lección, serás capaz de:

Comprender la estructura general de una página web en HTML.
Identificar las etiquetas principales que conforman un documento HTML.
Crear tu primer archivo HTML funcional y visualizable en el navegador.

Contenidos teóricos con ejemplos claros y explicativos

HTML (HyperText Markup Language) es el lenguaje que usamos para estructurar contenido en la web. No es un lenguaje de programación, sino un lenguaje de marcado: usamos etiquetas para indicar el tipo de contenido que queremos mostrar y cómo se organiza.

Partes principales de un archivo HTML

Un documento HTML típico se divide en dos grandes partes: el <head> y el <body>, ambos contenidos dentro de una etiqueta <html>.

<html>: Es el contenedor raíz de todo el documento.
<head>: Contiene metadatos, como el título de la página, enlaces a hojas de estilo (CSS) o configuración del idioma.
<body>: Contiene todo el contenido visible de la página: texto, imágenes, botones, etc.

Código paso a paso (comentado)

<!DOCTYPE html>
<!-- Esta línea indica que el documento es HTML5 -->

<html lang="es">
<!-- La etiqueta raíz. "lang" especifica el idioma del contenido. -->

<head>
  <!-- Aquí van los metadatos (información sobre la página) -->
  <meta charset="UTF-8">
  <!-- Define el conjunto de caracteres para el texto -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Ajusta el diseño para dispositivos móviles -->
  <title>Mi primera página web</title>
  <!-- El título que se mostrará en la pestaña del navegador -->
</head>

<body>
  <!-- Aquí va todo lo que queremos que el usuario vea -->

  <h1>¡Hola, mundo!</h1>
  <!-- Un encabezado de nivel 1, ideal para títulos principales -->

  <p>Esta es mi primera página web hecha con HTML.</p>
  <!-- Un párrafo de texto -->

</body>

</html>

¿Cómo ver este código?

Abre un editor de texto como Visual Studio Code o Bloc de Notas.
Copia y pega el código.
Guarda el archivo con extensión .html (por ejemplo, index.html).
Haz doble clic en el archivo para abrirlo en tu navegador.

Resumen de los conceptos aprendidos

HTML es el lenguaje con el que estructuramos el contenido web.
Todo documento HTML empieza con <!DOCTYPE html>, seguido de la etiqueta <html>.
Dentro de <html>, usamos <head> para metadatos y <body> para el contenido visible.
El contenido que ves en el navegador (como textos, imágenes, enlaces) va dentro del <body>.

Ejercicio práctico final basado en lo aprendido

Crea un archivo llamado mi_primera_web.html y escribe el siguiente contenido:

Un título en la pestaña del navegador: “Mi Web de Prueba”.
Un encabezado principal (h1) que diga tu nombre.
Un párrafo que describa quién eres o qué te gusta hacer.
Guarda el archivo y ábrelo en tu navegador.

Recomendaciones o tips adicionales

Siempre cierra tus etiquetas: por ejemplo, <p> debe cerrarse con </p>.
Usa indentación para que tu código sea más legible.
Los navegadores son tolerantes, pero es importante escribir HTML limpio y bien estructurado.

4 - Estructura básica de una página web en HTML