Módulo 2: Estructura básica de una página HTML

En esta lección aprenderás la estructura básica de una página HTML y conocerás las etiquetas esenciales que debes usar en todo documento web.

Estructura mínima de una página HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>¡Hola mundo!</h1>
    <p>Este es mi primer párrafo en HTML.</p>
  </body>
</html>

Recuerda:
Todo documento HTML tiene una estructura que comienza con <!DOCTYPE html>, y está dividido en la sección <head> (información) y la sección <body> (contenido visible).

Etiquetas de títulos: <h1> a <h6>

HTML tiene 6 niveles de títulos, de <h1> (más importante) a <h6> (menos importante).

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Encabezado menor</h3>

Párrafos: <p>

La etiqueta <p> sirve para crear párrafos de texto.

<p>Este es un párrafo en HTML.</p>

Saltos y separadores: <br> y <hr>

<br> inserta un salto de línea.
<hr> inserta una línea horizontal divisoria.

<p>Primera línea.<br>Segunda línea.</p>
<hr>
<p>Texto después del separador.</p>

Comentarios en HTML

Los comentarios sirven para documentar el código. No aparecen en la página web, pero ayudan a organizar tu trabajo.

<!-- Esto es un comentario en HTML -->

Buenas prácticas de indentación y orden

Una buena estructura facilita la lectura y mantenimiento del código:

Indenta el código con 2 o 4 espacios.
Cierra siempre las etiquetas que lo requieran.
Usa comentarios para marcar secciones importantes.

<body>
    <h1>Mi página web</h1>
    <p>Bienvenido a mi web.</p>
</body>

Preguntas de Repaso

Pregunta 1

¿Cuál es la etiqueta correcta para el título más importante?

A) <head>
B) <title>
C) <h1>
D) <h6>

Pregunta 2

¿Qué etiqueta se usa para crear párrafos?

A) <h1>
B) <p>
C) <br>
D) <body>

Pregunta 3

¿Qué hace la etiqueta <br>?

A) Inserta una imagen
B) Crea un salto de línea
C) Crea un comentario
D) Inserta un párrafo

Pregunta 4

¿Cómo se escriben los comentarios en HTML?

A) // Comentario
B) /* Comentario */
C)
D) <comment>Comentario</comment>

Pregunta 5

¿Cuál es una buena práctica de HTML?

A) No usar sangría
B) Dejar etiquetas abiertas
C) Indentar y ordenar el código
D) No usar comentarios

Esta lección forma parte del curso básico de HTML. En la siguiente, aprenderás a trabajar con enlaces e imágenes.

Universo de unos y ceros

Módulo 2: Estructura básica de una página HTML