Texto con estilo: formato, citas y código
Hasta ahora hemos hablado de la estructura del texto: qué es un título, qué es un párrafo. Toca hablar de sus matices. Porque dentro de un párrafo normal, a veces necesitas que una palabra suene más fuerte, que una frase sea literalmente una cita de otra persona, o que un fragmento de código se vea como lo que es: código. Para eso están las etiquetas de este módulo — el vestuario del texto, por así decirlo.
Negrita y énfasis: dos parejas que no son gemelas
HTML tiene dos formas de resaltar texto en negrita, y dos de ponerlo en cursiva. A simple vista se ven exactamente igual en pantalla, pero por dentro significan cosas muy distintas — y esa diferencia le importa mucho a Google y a los lectores de pantalla, aunque a tu ojo le dé completamente igual.
Negrita con importancia real: "esto es crítico, no te lo saltes". Un lector de pantalla puede cambiar el tono de voz al leerlo, como si te lo remarcara al hablar.
Negrita puramente visual, sin peso semántico: nombres de producto, palabras clave en un resumen. Se ve igual que <strong>, pero no le dice al navegador "esto es importante", solo "esto se ve distinto".
Énfasis real, como si al leerlo en voz alta remarcaras esa palabra: "no toques ESE botón" (con retintín incluido). Cambia el significado de la frase.
Cursiva sin carga emocional: términos técnicos, nombres de barcos, palabras en otro idioma, pensamientos internos de un personaje. Se ve igual que <em>, pero no "suena" distinto.
La pregunta que te tienes que hacer no es "¿quiero que se vea en negrita?", sino
"¿si leyera esto en voz alta, cambiaría el tono en esta palabra?". Si la respuesta
es sí, usa <strong> o
<em>. Si es solo una cuestión estética, usa
<b> o <i>, y
resérvate CSS para casos más complejos.
Otros matices: resaltar, tachar, subir y bajar
Además de negrita y cursiva, HTML tiene un pequeño arsenal de etiquetas para matices muy concretos. Son menos frecuentes, pero cuando las necesitas, no hay sustituto real:
Resalta texto con un fondo de color, como si lo hubieras subrayado con un rotulador fluorescente. Perfecto para marcar coincidencias en un buscador interno.
Texto más pequeño para contenido secundario: letra pequeña legal, condiciones, avisos de copyright. No es un simple "hazlo más pequeño", es "esto es la letra pequeña".
Marcan texto eliminado (tachado) e insertado (subrayado) respectivamente. Perfectos para mostrar un precio rebajado: el antiguo tachado, el nuevo al lado.
Subíndice y superíndice. Imprescindibles para fórmulas químicas (H<sub>2</sub>O) o exponentes matemáticos (x<sup>2</sup>) y notas al pie.
Citas y referencias
Cuando reproduces las palabras de otra persona, HTML tiene etiquetas específicas para eso — y usarlas bien es la diferencia entre citar correctamente y, sin querer, hacer pasar por tuyas las palabras de otro.
Cita larga, de varias líneas, normalmente de otra fuente. El navegador suele indentarla automáticamente para separarla visualmente del resto del texto.
Cita corta, en línea con el texto. El navegador añade las comillas automáticamente — no las escribas tú a mano, o acabarás con comillas dobles sin querer.
El título de la obra o el nombre de la fuente citada, no el autor. Se muestra en cursiva por defecto.
Marca una abreviatura o sigla. El atributo title contiene el significado completo, que aparece como un pequeño tooltip al pasar el ratón por encima.
Información de contacto del autor de la página o artículo: email, dirección física, redes sociales. No es para cualquier dirección postal que aparezca en el texto, solo para la de contacto.
Escribir tus propias comillas dentro de <q>:
<q>"esto"</q>. El navegador ya añade
comillas automáticamente (y las cambia según el idioma de la página), así que
acabarás con comillas dobles de las dobles. Escribe solo el texto, sin comillas
propias.
Mostrar código en pantalla
Si alguna vez escribes un tutorial, una documentación o —como este mismo curso— necesitas mostrar código como texto visible (no que se ejecute, solo que se vea), HTML tiene un pequeño kit de herramientas pensado exactamente para eso.
Marca un fragmento de código en línea con el texto. Por defecto se muestra en fuente monoespaciada, la misma familia que usan los editores de código.
Preserva exactamente los espacios, tabulaciones y saltos de línea tal como los escribiste. Sin ella, el navegador colapsaría todo el espaciado en blanco en uno solo, arruinando cualquier bloque de código con indentación.
Representa una tecla o combinación de teclado, como Ctrl + C. Útil en tutoriales de atajos.
Marca una variable o un valor que el usuario debe sustituir por el suyo propio, como en "reemplaza nombre_usuario por tu usuario real".
<pre> y <code>
suelen ir juntas: <pre><code>...</code></pre>.
La primera preserva el formato, la segunda añade el significado semántico de
"esto es código". Es exactamente la combinación que usa este curso en cada uno
de sus playgrounds.
Ponlo a prueba
Comprueba lo que has aprendido
1. Vas a marcar una advertencia realmente importante dentro de un párrafo. ¿Qué etiqueta usas?
2. ¿Qué etiqueta añade las comillas automáticamente a una cita corta en línea?
3. ¿Para qué sirve <pre>?