Texto, títulos y enlaces
🎯 Al terminar esta lección podrás…
- Escribir párrafos y organizarlos con títulos de distintos niveles.
- Resaltar texto con significado: importancia y énfasis.
- Crear enlaces a otras páginas, a secciones y a correos.
📌 Antes de empezar
Esta lección continúa la lección 1. Todo el código de los ejemplos va dentro de <body>, en tu archivo index.html.
1.Párrafos
La etiqueta <p> define un párrafo. Cada párrafo empieza en una línea nueva y deja un espacio antes y después.
<p>Este es el primer párrafo de mi página.</p>
<p>Este es el segundo párrafo.</p>⚠️ Importante · El navegador ignora los espacios extra
Da igual cuántos espacios o saltos de línea escribas en el código: el navegador los reduce a un solo espacio. Si quieres separar bloques de texto, usa párrafos distintos.
Salto de línea y línea divisoria
<br>inserta un salto de línea dentro de un párrafo (útil en direcciones o versos).<hr>dibuja una línea horizontal que separa temas.
Ambas son etiquetas vacías: no tienen contenido ni etiqueta de cierre.
<p>Calle Principal 123<br>Ciudad de México</p>
<hr>
<p>Otro tema distinto empieza aquí.</p>2.Títulos y jerarquía
HTML ofrece seis niveles de encabezados, de <h1> (el más importante) a <h6> (el menos importante).
<h1>Título principal</h1>
<h2>Sección</h2>
<h3>Subsección</h3>
<h4>Apartado</h4>
<h5>Detalle</h5>
<h6>Detalle menor</h6>Piensa en ellos como el índice de un libro: el h1 es el título de la obra, los h2 son los capítulos y los h3 los apartados de cada capítulo.
💡 Buenas prácticas con los títulos
- Usa un solo
<h1>por página. - No saltes niveles: después de un
h2viene unh3, no unh5. - Elige el nivel por su significado, no por el tamaño de la letra. El tamaño se cambia después con CSS.
Los lectores de pantalla y los buscadores usan los títulos para entender y recorrer la página.
3.Énfasis y formato
Algunas etiquetas dan un significado al texto, además de cambiar su apariencia:
| Etiqueta | Significado | Aspecto habitual |
|---|---|---|
<strong> | Importancia fuerte | negrita |
<em> | Énfasis, como al hablar | cursiva |
<mark> | Texto resaltado por relevancia | fondo amarillo |
<small> | Letra pequeña (avisos, derechos) | texto menor |
<code> | Fragmento de código | monoespaciado |
<p>Guarda el archivo <strong>antes</strong> de abrirlo. ¿<em>Seguro</em> que lo guardaste?</p>📌 Nota · ¿Y <b> e <i>?
Existen, y también ponen negrita y cursiva, pero no aportan significado. Prefiere <strong> y <em> salvo que solo busques un efecto visual (y para eso, lo ideal es CSS).
✏️ Practica en vivo
Cambia los niveles de título y compara tamaños. Recuerda: el nivel se elige por significado, no por tamaño.
4.Enlaces
Los enlaces son lo que hace de la web una «red». Se crean con la etiqueta <a> (de anchor, «ancla») y su atributo href (hypertext reference), que indica el destino.
Tipos de enlace
<!-- 1. A otro sitio web (dirección completa) -->
<a href="https://developer.mozilla.org/es/" target="_blank" rel="noopener">Documentación de MDN</a>
<!-- 2. A otra página de tu propio sitio -->
<a href="contacto.html">Contacto</a>
<!-- 3. A una sección de la misma página -->
<a href="#resumen">Ir al resumen</a>
<h2 id="resumen">Resumen</h2>
<!-- 4. A un correo electrónico -->
<a href="mailto:hola@ejemplo.com">Escríbeme</a>- Enlace externo: lleva la dirección completa, con
https://. - Enlace interno: apunta a otro archivo de tu proyecto.
- Ancla: el
#salta a un elemento que tenga eseiden la misma página. - Correo:
mailto:abre el programa de correo del visitante.
⚠️ Importante · target="_blank" y rel="noopener"
target="_blank" abre el enlace en una pestaña nueva. Al usarlo con sitios externos, agrega rel="noopener" por seguridad: evita que la página abierta pueda controlar la tuya.
💡 Consejo · Escribe textos de enlace que se entiendan solos
Evita «haz clic aquí». Mejor: «Consulta la guía de HTML de MDN». Quien navega con lector de pantalla suele recorrer solo los enlaces, y «aquí» no le dice nada.
✏️ Practica en vivo
El primer enlace abre una pestaña nueva (se desactiva por seguridad dentro del editor, pero en tu archivo funcionará). El segundo salta a un elemento con id.
5.Rutas: dónde está el archivo
En un enlace interno, el valor de href es una ruta: el camino hasta el archivo. Imagina esta carpeta:
mi-sitio/
├── index.html
├── contacto.html
└── cursos/
├── html.html
└── css.html| Desde | Hacia | Ruta en href |
|---|---|---|
index.html | contacto.html | contacto.html (misma carpeta) |
index.html | cursos/html.html | cursos/html.html (entra a una carpeta) |
cursos/html.html | index.html | ../index.html (sube una carpeta) |
cursos/html.html | css.html | css.html (misma carpeta) |
📌 Nota
../ significa «sube una carpeta». Esta lección usa justo eso: el enlace «Inicio» de arriba apunta a ../. Si un enlace no funciona, revisa primero mayúsculas, minúsculas y la extensión: Contacto.html y contacto.html son nombres distintos en muchos servidores.
6.Caracteres especiales
Los símbolos < y > forman parte de la sintaxis. Si quieres mostrarlos como texto, escribe su entidad:
| Quieres mostrar | Escribe |
|---|---|
< | < |
> | > |
& | & |
| © (derechos de autor) | © |
Con charset="UTF-8" puedes escribir directamente tildes, eñes y signos como ¿ ¡ sin entidades.
7.Errores frecuentes
- Usar títulos para agrandar letra. Los títulos son estructura; el tamaño es tarea de CSS.
- Varios
<h1>o saltos de nivel (h2→h4). - Olvidar las comillas en
href="…". - Enlaces sin
https://:href="google.com"se interpreta como un archivo de tu carpeta, no como un sitio web. - Poner espacios o mayúsculas distintas en el nombre del archivo enlazado.
- Escribir varios espacios esperando que se vean: el navegador los junta.
📒 Apuntes para llevar
<p>crea un párrafo;<br>un salto de línea;<hr>una línea divisoria.- Los títulos van de
<h1>a<h6>: un soloh1y sin saltar niveles. <strong>indica importancia y<em>énfasis; ambos tienen significado, no solo estilo.- Un enlace es
<a href="destino">texto</a>. - Enlaces externos con
https://; internos con la ruta del archivo; anclas con#id; correos conmailto:. target="_blank"se acompaña derel="noopener".../sube una carpeta en una ruta.- Para mostrar
<,>o&usa<,>y&.
8.Glosario
| Término | Significado |
|---|---|
| Encabezado | Título de una sección, de h1 a h6. |
| Enlace (hipervínculo) | Elemento que lleva a otro lugar al hacer clic. |
href | Atributo que guarda la dirección de destino de un enlace. |
| Ancla | Enlace a una parte concreta de la misma página, mediante #id. |
id | Atributo que da un nombre único a un elemento. |
| Ruta relativa | Dirección de un archivo calculada desde el archivo actual. |
| Entidad | Código como < para mostrar un carácter especial. |
🧠 Comprueba lo aprendido
Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.
¿Cuántos <h1> conviene usar por página?
Un único <h1> identifica el tema principal de la página.
¿Qué etiqueta indica importancia fuerte (no solo negrita)?
<strong> aporta significado de importancia; <b> solo cambia el aspecto.
Quieres un enlace que lleve a la sección con id="contacto" de la misma página. ¿Qué escribes?
El # seguido del id salta a ese elemento dentro de la misma página.
Un enlace externo con target="_blank" debería llevar también…
rel="noopener" evita que la página abierta pueda controlar la tuya.
Tu progreso se guarda en este navegador y se refleja en el índice del curso.
🚀 ¡Ahora te toca!
Pon todo esto en práctica creando una pequeña página de «recomendaciones» con títulos, texto y enlaces.