MÓDULO 1: FUNDAMENTOS

Títulos y Párrafos

Ya tienes el esqueleto. Ahora hay que llenarlo con texto. HTML tiene etiquetas específicas para títulos y párrafos, y no es casualidad: el navegador y Google las usan para entender tu página.

1. Los Títulos: etiquetas `<h1>` al `<h6>`

HTML tiene 6 niveles de títulos. Funcionan como los títulos de un libro: hay uno principal, luego secciones, luego subsecciones...

Piénsalo así, como el índice de un libro:

<h1> — El nombre del libro (solo uno por página)
<h2> — Capítulo
<h3> — Sección del capítulo
<h4> — Subsección
<h5> — Detalle fino
<h6> — Casi nunca se usa

<body>

  <!-- Título principal de la página -->
  <h1>Mi Blog de Tecnología</h1>

  <!-- Título de una sección -->
  <h2>Novedades de esta semana</h2>

  <!-- Título de un artículo dentro de esa sección -->
  <h3>El nuevo iPhone ya tiene fecha</h3>

</body>

⚠️ Regla importante:

Solo debe haber un <h1> por página. Es el título principal. Usar varios confunde a Google y a los lectores de pantalla para personas con discapacidad visual.

2. Los Párrafos: etiqueta `<p>`

Para cualquier bloque de texto normal, usas <p>. Cada <p> genera un bloque separado con espacio arriba y abajo automáticamente.

<body>

  <h1>Bienvenido a mi blog</h1>

  <p>Este es el primer párrafo. Puedo escribir todo
  lo que quiera aquí y el navegador lo mostrará junto.</p>

  <p>Este es el segundo párrafo. Automáticamente
  aparece separado del anterior.</p>

</body>

Resultado visual en el navegador:

Bienvenido a mi blog

Este es el primer párrafo. Puedo escribir todo lo que quiera aquí y el navegador lo mostrará junto.

Este es el segundo párrafo. Automáticamente aparece separado del anterior.

3. Desglose: ¿Qué pasa si no uso las etiquetas correctas?

❌ Error clásico: saltos de línea con Enter
En HTML, presionar Enter en tu código no crea un espacio visible en la página. Para separar párrafos siempre usas <p>.
✅ ¿Quiero un salto de línea sin nuevo párrafo?
Usa <br> (break). Es una etiqueta sin cierre que inserta exactamente un salto. Úsala con moderación, no para separar párrafos enteros.
✅ Jerarquía coherente
No saltes de <h1> directo a <h4>. Sigue el orden lógico: h1 → h2 → h3... Esto ayuda tanto a la accesibilidad como al SEO.

🛠️ Tu Misión

Abre el index.html que creaste en la lección anterior.
Dentro del <body>, agrega un <h1> con tu nombre.
Agrega un <h2> que diga "Sobre mí".
Debajo, escribe 2 párrafos <p> contando algo de ti.
Guarda y abre en el navegador. Observa cómo cada etiqueta tiene un tamaño diferente por defecto.
Bonus: agrega un <h2> que diga "Mis hobbies" y lista 3 cosas que te gustan, cada una en su propio <p>.

← Lección Anterior Siguiente Lección →