Texto y formato
El texto es el elemento más antiguo, más abundante y más subestimado de la web. Antes de pensar en colores, animaciones o layouts, hay texto: títulos, párrafos, citas, código, abreviaturas. HTML tiene un conjunto de etiquetas pensadas específicamente para estructurar y dar significado al contenido textual. CSS, por su parte, se ocupa de su apariencia visual.
En esta lección veremos ambas cosas: las etiquetas HTML para marcar el texto según su propósito, y una primera introducción a las propiedades CSS que controlan cómo se ve ese texto en pantalla. El grueso de la tipografía CSS (fuentes, familias, unidades) quedará para su lección específica más adelante.
Encabezados: <h1> a <h6>
Los encabezados organizan el contenido en niveles jerárquicos, como los capítulos y secciones de un libro. HTML proporciona seis niveles, de <h1> (el más importante) a <h6> (el menos).
<h1>Manual de HTML y CSS</h1>
<h2>Texto y formato</h2>
<h3>Encabezados</h3>El navegador los muestra con tamaños decrecientes por defecto, pero eso es solo la apariencia predeterminada. Lo importante es el significado: los encabezados no se eligen por su tamaño visual, sino por su posición en la jerarquía del documento. Si necesitas un texto grande pero no es un título, usa CSS. Si es un título de sección, usa el nivel que le corresponda aunque luego lo vayas a redimensionar.
Algunas orientaciones prácticas:
- Usa
<h1>una sola vez por página, para el título principal del contenido (no confundir con el título de la pestaña, que va en<title>). - No saltes niveles sin motivo. Pasar de
<h2>a<h4>sin<h3>en medio confunde tanto a los lectores de pantalla como a los motores de búsqueda. - Los encabezados son elementos de bloque: el contenido que los sigue aparece en una nueva línea.
Son también, dicho sea de paso, uno de los factores que más pesan en SEO. Un documento bien estructurado con encabezados coherentes es más fácil de indexar.
Párrafos: <p>
La etiqueta <p> marca un párrafo de texto. Es un elemento de bloque: cada párrafo ocupa su propio espacio vertical, separado del anterior y del siguiente.
<p>Este es un párrafo. Puede contener texto, enlaces y otros elementos en línea.</p>
<p>Este es otro párrafo. El navegador añade espacio entre ellos automáticamente.</p>Una cosa que sorprende al principio: el navegador ignora completamente los saltos de línea y los espacios múltiples que escribas en tu editor. Esto:
<p>Este texto
tiene espacios
y saltos</p>...se muestra como una sola línea. Para separar párrafos, usa <p>. Para un salto de línea dentro del mismo párrafo, existe <br>, aunque conviene no abusar de él (más sobre esto a continuación).
Cierra siempre el párrafo con </p>. Los navegadores pueden adivinar el final del párrafo en muchos casos, pero confiar en eso es apostar a que el código siempre se interpretará igual, y esa no es una apuesta que convenga hacer.
Saltos de línea y separadores: <br> y <hr>
<br> inserta un salto de línea dentro de un elemento, sin crear un párrafo nuevo. Es un elemento vacío (no tiene etiqueta de cierre).
<p>Calle Mayor, 10<br>
28001 Madrid</p>Tiene sentido en casos donde el salto de línea forma parte del contenido, como una dirección postal o unos versos. Lo que no tiene sentido es usarlo para crear espacio visual entre bloques. Si quieres más espacio entre párrafos, usa CSS (margin). Usar varios <br> seguidos para "empujar" contenido hacia abajo es una práctica de los años noventa que no aporta nada bueno.
<hr> inserta una línea horizontal que separa secciones de contenido. También es un elemento vacío y de bloque. En HTML5 tiene un significado semántico concreto: representa un cambio temático dentro de una sección. Su apariencia, naturalmente, se controla con CSS:
<p>Fin de una sección.</p>
<hr>
<p>Inicio de otra.</p>hr {
border: none;
border-top: 1px solid #ccc;
margin: 2rem 0;
}En versiones antiguas de HTML, <hr> aceptaba atributos como width, align o noshade para controlar su aspecto. Todos están obsoletos.
Énfasis semántico: <strong> y <em>
Para marcar texto con énfasis dentro de un párrafo, HTML ofrece dos etiquetas con significado semántico:
<strong>: indica que el texto tiene importancia especial. Los navegadores lo muestran en negrita por defecto.<em>: indica énfasis, en el sentido de "pronuncia esto diferente". Los navegadores lo muestran en cursiva por defecto.
<p>No pulses ese botón <strong>bajo ningún concepto</strong>.</p>
<p>El problema no es lo que dijo, sino <em>cómo</em> lo dijo.</p>La clave aquí es que <strong> y <em> expresan significado, no apariencia. Si lo que quieres es poner un texto en negrita por razones puramente estéticas (sin que eso implique mayor importancia), hazlo con CSS:
p.destacado { font-weight: bold; }Puede parecer una distinción sutil, pero es fundamental. Un lector de pantalla leerá con más énfasis el contenido de <em>. Un motor de búsqueda puede dar más peso a las palabras dentro de <strong>. Si solo quieres que se vea en negrita, no les des esa señal falsa.
Otras etiquetas de énfasis: <b>, <i> y <u>
Estas tres etiquetas existen desde los primeros tiempos de HTML y siguen siendo válidas en HTML5, pero con un matiz importante: no tienen significado semántico fuerte. Son esencialmente presentacionales.
<b>: texto en negrita sin importancia especial. Por ejemplo, una palabra clave en un resumen técnico, o el nombre de un producto en una descripción.<i>: texto en cursiva por convención tipográfica, no por énfasis. Títulos de obras, términos en otro idioma, pensamientos de un personaje en una narración.<u>: texto subrayado. Úsalo solo cuando el subrayado tenga un significado concreto (por ejemplo, un nombre propio en ciertos idiomas). Evítalo en general porque el usuario lo confundirá con un enlace.
Nota: Si dudas entre <strong> y <b>, hazte esta pregunta: ¿el texto es más importante que el resto, o simplemente quieres que se vea diferente? Si es lo segundo, usa CSS.
Citas: <blockquote>, <cite> y <q>
<blockquote> marca un bloque de texto citado de otra fuente. Es un elemento de bloque. Puede incluir un atributo cite con la URL de la fuente (no visible por defecto, pero útil para procesamiento automático).
<blockquote cite="https://www.w3.org/People/Berners-Lee/">
<p>La web es más un fenómeno social que tecnológico.</p>
<cite>Tim Berners-Lee</cite>
</blockquote><cite> es un elemento en línea que marca el título de una obra o el nombre del autor de una cita. El navegador lo muestra en cursiva por defecto.
Para citas breves dentro de un párrafo existe <q>, que el navegador rodea de comillas automáticamente (aunque el comportamiento exacto varía según el idioma configurado):
<p>Como dijo Einstein: <q>La imaginación es más importante que el conocimiento.</q></p>Espacios y entidades
El navegador colapsa cualquier secuencia de espacios en blanco (incluidos tabuladores y saltos de línea) en un único espacio. Si necesitas un espacio que no se rompa al final de línea (para mantener "Coca Cola" unido, por ejemplo), usa la entidad :
<p>Coca Cola</p>Las entidades HTML también sirven para escribir caracteres especiales que de otro modo el navegador podría confundir con código. Las más habituales:
| Entidad | Carácter | Uso |
|---|---|---|
& | & | Ampersand literal |
< | < | Menor que (en código HTML) |
> | > | Mayor que (en código HTML) |
| (espacio) | Espacio de no ruptura |
© | © | Copyright |
® | ® | Marca registrada |
€ | € | Símbolo del euro |
Nota: Si tu archivo está guardado en UTF-8 y has declarado <meta charset="UTF-8">, puedes escribir directamente caracteres como á, é, ñ, © o € sin necesidad de entidades. Las entidades son imprescindibles principalmente para <, > y & cuando aparecen en el contenido como texto literal.
Referencia rápida: CSS de texto para empezar
Aunque el capítulo de tipografía CSS es posterior, conviene conocer desde ahora las propiedades más básicas para no tener que esperar. Son las que usarás casi en cualquier proyecto:
p {
color: #333; /* color del texto */
font-size: 1rem; /* tamaño (rem es relativo al tamaño raíz del documento) */
font-weight: normal; /* grosor: normal, bold, o un número de 100 a 900 */
line-height: 1.6; /* interlineado: sin unidad, escala con la fuente */
font-style: italic; /* cursiva: normal, italic, oblique */
}Un par de cosas que vale la pena interiorizar desde el principio: usa rem en lugar de px para el tamaño del texto, para que respete los ajustes de accesibilidad del navegador del usuario. Y usa valores sin unidad en line-height (como 1.6 en lugar de 24px) para que el interlineado escale automáticamente cuando cambie el tamaño de fuente.
La herencia es otro concepto que entra en juego aquí: si defines color o font-size en el elemento body, todos los elementos dentro de él los heredarán, a menos que los sobreescribas. Es una de las razones por las que CSS se llama "en cascada": los estilos fluyen hacia abajo en el árbol del documento.
Tu proyecto
Abre proyecto.html. Debajo del <h1> con tu nombre, añade:
- Un
<h2>con tu título profesional o especialidad. - Un
<p>con dos o tres frases presentándote. Usa<strong>para destacar algo importante y<em>si quieres enfatizar alguna palabra.
<h1>Laura Suárez</h1>
<h2>Arquitecta</h2>
<p>Más de quince años diseñando espacios residenciales y comerciales
en Madrid y Lisboa. Cada proyecto parte de <strong>escuchar al
cliente</strong> y entender cómo vive en el espacio.</p>Guarda y recarga el navegador. La página empieza a tener sustancia, aunque todavía sin ningún estilo. Eso cambiará.
Recapitulación
En esta lección hemos cubierto el vocabulario fundamental del texto en HTML:
- Encabezados (
<h1>a<h6>) para jerarquía, no para tamaño visual. - Párrafos (
<p>), saltos de línea (<br>) y separadores temáticos (<hr>). - Énfasis semántico (
<strong>,<em>) frente a énfasis visual (<b>,<i>). Si solo quieres que se vea diferente, usa CSS. - Citas en bloque (
<blockquote>), citas en línea (<q>) y autoría (<cite>). - Entidades para caracteres especiales:
<,>,&, . Con UTF-8 declarado, tildes y ñ se escriben directamente. - Un primer vistazo a las propiedades CSS de texto:
color,font-size,font-weight,line-height.
El hilo conductor de todo esto es el mismo que atraviesa el manual entero: HTML marca el significado, CSS controla la apariencia. Cuando tengas claro qué es un fragmento de texto, la etiqueta correcta es obvia.
En la próxima lección: elementos de texto más específicos: anotaciones tipográficas (<mark>, <sub>, <del>), texto técnico (<code>, <pre>) y semántica especializada (<abbr>, <address>).