Etiquetas de texto
El texto es el 80% del contenido de la web. Artículos, descripciones de producto, documentación, posts de blog... todo es texto. HTML te da un puñado de etiquetas para estructurar ese texto y darle significado. No son muchas, pero usarlas bien marca la diferencia entre una web profesional y una chapuza.
Encabezados: h1 a h6
Los encabezados definen la jerarquía del contenido. Piensa en ellos como el índice de un libro:
<h1>Guía para montar tu PC gaming en 2026</h1>
<h2>Elige la CPU</h2>
<p>La CPU es el cerebro del ordenador...</p>
<h3>Intel vs AMD</h3>
<p>En 2026, ambas marcas tienen opciones excelentes...</p>
<h3>Cuántos núcleos necesitas</h3>
<p>Para gaming, 6-8 núcleos son más que suficientes...</p>
<h2>Elige la GPU</h2>
<p>La tarjeta gráfica determina cuántos FPS vas a mover...</p>
<h3>NVIDIA vs AMD vs Intel Arc</h3>
<p>NVIDIA sigue dominando en ray tracing, pero...</p>Reglas de los encabezados:
- Solo un
<h1>por página. Es el título principal. Google lo usa para entender de qué va la página. - No te saltes niveles. Después de
<h2>va<h3>, no<h4>. La jerarquía debe tener sentido. - No uses encabezados para hacer texto grande. Si quieres texto grande, usa CSS. Los encabezados son para estructura, no para estilo.
Si alguien extrae solo los encabezados de tu página, debería poder entender la estructura del contenido. Si no se entiende, tus encabezados están mal.
Párrafos y saltos
El <p> es la etiqueta más usada de HTML. Define un párrafo de texto:
<p>El café de especialidad se cultiva a más de 1.200 metros de altitud.
Cada grano se selecciona a mano para garantizar la máxima calidad.</p>
<p>Los orígenes más apreciados son Etiopía, Colombia y Guatemala,
aunque Kenia y Rwanda están ganando terreno rápidamente.</p>Dato importante: HTML ignora los saltos de línea y los espacios múltiples. Si pones 5 líneas vacías entre dos palabras, el navegador muestra un solo espacio. Para hacer un salto de línea real dentro de un párrafo, usa <br>:
<p>
Café Arábica<br>
Origen: Huila, Colombia<br>
Altitud: 1.800m<br>
Notas: chocolate, frutos rojos, caramelo
</p>Usa <br> con moderación. Si necesitas separar bloques de contenido, usa varios <p> en lugar de llenar un párrafo de <br>.
Línea horizontal
La etiqueta <hr> dibuja una línea horizontal. Se usa para separar secciones temáticas dentro del contenido:
<h2>Capítulo 1: El despertar</h2>
<p>La alarma sonó a las 5:47. No era la hora que había programado...</p>
<hr>
<h2>Capítulo 2: El misterio</h2>
<p>Al bajar a la cocina, todo estaba exactamente como lo había dejado...</p>Énfasis y relevancia
No todas las palabras dentro de un párrafo tienen la misma importancia. HTML te da etiquetas para marcar esas diferencias:
<p>
El plazo de entrega es <strong>máximo 48 horas</strong>.
Los envíos a Canarias pueden tardar <em>un poco más</em>.
</p>| Etiqueta | Significado | Aspecto por defecto |
|---|---|---|
<strong> |
Importancia fuerte, relevancia | Negrita |
<em> |
Énfasis, matiz | Cursiva |
<mark> |
Texto resaltado, relevante en contexto | Fondo amarillo |
<small> |
Letra pequeña, disclaimers | Tamaño reducido |
<del> |
Texto eliminado/tachado | Tachado |
<ins> |
Texto insertado/añadido | Subrayado |
<sub> |
Subíndice (H₂O) | Abajo y más pequeño |
<sup> |
Superíndice (E=mc²) | Arriba y más pequeño |
No uses
<b>ni<i>para negrita y cursiva. Existen, pero no tienen significado semántico. Usa<strong>y<em>siempre. El aspecto visual lo defines con CSS.
Citas
Para citas largas (de bloque), usa <blockquote>:
<blockquote cite="https://es.wikipedia.org/wiki/Tim_Berners-Lee">
<p>La web es más una creación social que técnica. La diseñé para un efecto social
— para ayudar a las personas a trabajar juntas — y no como un juguete técnico.</p>
<footer>— Tim Berners-Lee, inventor de la World Wide Web</footer>
</blockquote>Para citas cortas dentro de un párrafo, usa <q>:
<p>Como dijo Steve Jobs: <q>El diseño no es solo cómo se ve, es cómo funciona.</q></p>El navegador añade comillas automáticamente alrededor del <q>.
Comentarios en HTML
Puedes escribir notas en tu código que el navegador ignora por completo. No se muestran en pantalla, pero están ahí para ti y para quien lea tu código después:
<!-- Esto es un comentario. El navegador lo ignora. -->
<h1>Menú del día</h1>
<!-- TODO: añadir sección de postres cuando esté lista -->
<ul>
<li>Ramen de miso</li>
<li>Gyozas caseras</li>
<!-- <li>Mochi de matcha</li> — desactivado temporalmente -->
</ul>La sintaxis es <!-- texto -->. Todo lo que esté entre <!-- y --> desaparece de la página. Úsalos para:
- Dejar notas para tu yo del futuro o para otros desarrolladores.
- Desactivar código temporalmente sin borrarlo (como el mochi del ejemplo).
- Marcar secciones del documento para orientarte en archivos largos.
Los comentarios son invisibles en la página, pero siguen estando en el código fuente. Cualquiera puede verlos con "Ver código fuente" en el navegador. Nunca pongas contraseñas, datos privados o notas vergonzosas en un comentario HTML.
Código y texto preformateado
Si escribes documentación técnica o un blog de programación, necesitas estas etiquetas:
<!-- Código inline dentro de un párrafo -->
<p>Usa <code>document.querySelector()</code> para seleccionar elementos del DOM.</p>
<!-- Bloque de código preformateado -->
<pre><code>function calcularDescuento(precio, porcentaje) {
return precio * (1 - porcentaje / 100);
}
const precioFinal = calcularDescuento(99.99, 20);
console.log(precioFinal); // 79.992</code></pre><code>: marca texto como código. Inline, se usa dentro de un párrafo.<pre>: texto preformateado. Respeta los espacios y saltos de línea tal cual los escribes.<pre><code>: la combinación clásica para bloques de código. Es lo que usan GitHub, Stack Overflow y este mismo curso.
span: el comodín inline
La etiqueta <span> por sí sola no hace nada visible. Es un contenedor inline sin significado propio, útil para aplicar estilos o comportamientos a un trozo de texto:
<p>
Precio: <span style="color: #ef4444; font-weight: bold;">29,99 €</span>
<span style="text-decoration: line-through; color: #888;">49,99 €</span>
</p>En la sección de CSS aprenderás a hacer esto con clases en lugar de estilos inline. Por ahora, quédate con que <span> es tu "selector de texto" para cuando necesitas marcar un trozo sin cambiar su significado semántico.
Ejemplo completo: artículo de blog
Vamos a juntar todo en algo real: un artículo de un blog de tecnología.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5 atajos de VS Code que deberías usar — DevBlog</title>
</head>
<body>
<h1>5 atajos de VS Code que te van a cambiar la vida</h1>
<p><small>Publicado el 15 de marzo de 2026 · 5 min de lectura</small></p>
<p>Si usas VS Code y no conoces estos atajos, estás perdiendo
<strong>horas cada semana</strong>. Los uso <em>todos los días</em>.</p>
<hr>
<h2>1. Multi-cursor: Ctrl + D</h2>
<p>Selecciona la palabra actual y pulsa <code>Ctrl + D</code>
para seleccionar la siguiente aparición. Repite para seleccionar más.</p>
<h2>2. Mover línea: Alt + ↑/↓</h2>
<p>Mueve la línea actual arriba o abajo. <mark>Probablemente el atajo
que más uso</mark> en mi día a día.</p>
<h2>3. Borrar línea: Ctrl + Shift + K</h2>
<p>Borra la línea entera sin seleccionarla. Adiós a seleccionar +
borrar como un <del>principiante</del> <ins>profesional en formación</ins>.</p>
<h2>4. Terminal integrado: Ctrl + `</h2>
<p>Abre la terminal sin salir del editor. Puedes ejecutar
<code>npm run dev</code> o <code>git push</code> sin cambiar de ventana.</p>
<h2>5. Paleta de comandos: Ctrl + Shift + P</h2>
<p>El atajo más poderoso. Accede a <strong>cualquier</strong>
funcionalidad de VS Code escribiendo lo que necesitas.</p>
<hr>
<blockquote>
<p>Un desarrollador que domina sus herramientas es un desarrollador
que sale a su hora.</p>
</blockquote>
</body>
</html>Escribe un artículo de blog con etiquetas de texto
Crea un archivo articulo.html con un artículo de blog sobre un tema que te interese: tus 5 herramientas favoritas, los mejores trucos de un juego, una review de tu último gadget, recetas fáciles para la uni...
Tu artículo debe usar al menos:
<h1>para el título y<h2>para las secciones<p>para los párrafos<strong>y<em>para enfatizar<code>si mencionas algo técnico<blockquote>para una cita<hr>para separar secciones
lightbulb Pistas
Escribe como si fuera un post real que publicarías en tu blog. Que tenga personalidad. Usa <small> para la fecha de publicación y <mark> para resaltar algo importante.
