Texto: elementos especiales

En la lección anterior vimos las etiquetas de texto más habituales. Esta lección cubre los elementos más específicos: anotaciones tipográficas, texto técnico, semántica especializada y el manejo de comentarios en el código. No los necesitarás en cada proyecto, pero conviene conocerlos para usarlos cuando el contenido los pida.

Anotaciones tipográficas

HTML incluye etiquetas para casos concretos de marcado tipográfico:

: resalta texto como si le pasaras un marcador fluorescente. Útil para señalar términos relevantes en resultados de búsqueda, o fragmentos que quieres destacar en un contexto determinado.

<p>En los resultados, la palabra <mark>CSS</mark> aparece 47 veces.</p>

: texto de menor importancia o tamaño. Útil para notas al pie, avisos legales, créditos.

<p><small>© 2025 Mi empresa. Todos los derechos reservados.</small></p>

 y : subíndice y superíndice. Imprescindibles para fórmulas químicas, notas al pie numeradas o expresiones matemáticas.

<p>El agua es H<sub>2</sub>O.</p>
<p>La velocidad de la luz es 3 × 10<sup>8</sup> m/s.</p>

<del> e <ins>: texto borrado e insertado en una revisión de documento. El navegador los muestra tachado y subrayado respectivamente. Admiten los atributos cite (URL que explica el cambio) y datetime (fecha del cambio).

<p>El precio es <del>29,99 €</del> <ins>19,99 €</ins>.</p>

Texto técnico: `<code>`, `<kbd>`, `<samp>`, `<var>` y `<pre>`

Para contenido de naturaleza técnica, HTML tiene etiquetas específicas que, además de su valor semántico, el navegador muestra en fuente monoespaciada por defecto:

<code>: fragmento de código informático.
<kbd>: texto que el usuario debe teclear (keyboard).
<samp>: salida producida por un programa (sample output).
<var>: nombre de variable, en matemáticas o en programación.

<p>La función <code>parseInt()</code> convierte una cadena en número.</p>
<p>Para guardar, pulsa <kbd>Ctrl + S</kbd>.</p>
<p>El programa devolvió: <samp>Error 404: Not Found</samp>.</p>
<p>El área es <var>A</var> = <var>b</var> × <var>h</var>.</p>

Estas cuatro son elementos en línea. Para bloques de código de varias líneas existe <pre>, que tiene un comportamiento especial: respeta los espacios y saltos de línea exactamente como los escribiste en el editor. Normalmente se combina con <code>:

<pre><code>function saluda(nombre) {
    return "Hola, " + nombre;
}
</code></pre>

Nota: En los ejemplos de código de este manual siempre aparecen juntos <pre><code>. Es la combinación correcta: <pre> preserva el formato, <code> indica que es código.

Semántica especializada: `<abbr>`, `<dfn>` y `<address>`

<abbr> marca una abreviatura o acrónimo. El atributo title contiene la forma completa y aparece como tooltip al pasar el ratón.

<p>Trabajo con <abbr title="Cascading Style Sheets">CSS</abbr> a diario.</p>

<dfn> señala el término que está siendo definido en ese punto del texto. Útil en glosarios o cuando introduces un concepto nuevo:

<p>Un <dfn>selector CSS</dfn> es el patrón que indica a qué elementos se aplica una regla de estilo.</p>

<address> contiene información de contacto relativa al autor o propietario del documento. Es un elemento de bloque y se muestra en cursiva por defecto. No es para marcar cualquier dirección postal en el contenido, sino específicamente la información de contacto del documento.

<address>
    Escríbenos a: <a href="mailto:hola@ejemplo.com">hola@ejemplo.com</a><br>
    Calle Mayor, 10. Madrid.
</address>

Comentarios en el código

Los comentarios son notas en el código que el navegador ignora por completo. Se escriben entre :

<!-- Este es un comentario -->
<p>Este texto sí se muestra.</p>
<!-- TODO: revisar este párrafo antes de publicar -->

Sirven para documentar el código, marcar tareas pendientes, o desactivar temporalmente una sección sin borrarla. Son visibles en el código fuente de la página, así que no incluyas información sensible en ellos.

Fuentes CSS

La lección anterior introdujo font-size, font-weight, line-height y font-style. Aquí completamos el cuadro con las propiedades que controlan la familia tipográfica y su variante.

font-family acepta una lista de fuentes separadas por comas. El navegador usa la primera que encuentre disponible. La lista debe terminar siempre con una familia genérica como respaldo:

body {
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

Las familias genéricas principales son: serif (con serifa, tipo Times), sans-serif (sin serifa, tipo Helvetica), monospace (paso fijo, tipo Courier) y system-ui (la fuente por defecto del sistema operativo del usuario).

@font-face permite cargar una fuente propia desde el servidor, sin depender de lo que tenga instalado el usuario ni de servicios externos:

@font-face {
    font-family: "MiFuente";
    src: url("/fonts/mifuente.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

body {
    font-family: "MiFuente", sans-serif;
}

font-display: swap indica al navegador que muestre el texto con la fuente de respaldo mientras descarga la personalizada, en lugar de ocultarlo. Evita el efecto conocido como FOIT (Flash of Invisible Text). El formato woff2 es el estándar actual: buena compresión y soporte universal en navegadores modernos.

font-variant: small-caps transforma las letras minúsculas en mayúsculas de menor tamaño. Se usa puntualmente en titulares o siglas:

abbr { font-variant: small-caps; }

La propiedad abreviada font agrupa en una línea font-style, font-variant, font-weight, font-size/line-height y font-family. El orden es estricto y font-size y font-family son obligatorias:

p {
    font: italic small-caps bold 1rem/1.6 "Inter", sans-serif;
}
/* equivale a:
   font-style: italic;
   font-variant: small-caps;
   font-weight: bold;
   font-size: 1rem;
   line-height: 1.6;
   font-family: "Inter", sans-serif; */

CSS: propiedades de texto

text-align alinea el texto horizontalmente dentro de un bloque. Los valores más usados son left, right, center y justify. Los valores start y end se adaptan a la dirección del texto y son la opción recomendada en sitios con soporte para idiomas de derecha a izquierda:

h2 { text-align: center; }
p  { text-align: justify; }

text-decoration controla las líneas decorativas del texto. La forma abreviada acepta tipo, color y grosor en cualquier orden:

a      { text-decoration: none; }          /* quita el subrayado */
del    { text-decoration: line-through; }   /* tachado */
.error { text-decoration: underline wavy red; }
h3     { text-decoration: underline; text-decoration-thickness: 2px; }

Los valores de text-decoration-style son: solid, dashed, dotted, wavy y double.

text-transform cambia mayúsculas y minúsculas visualmente, sin modificar el HTML:

h1  { text-transform: uppercase; }   /* TODO EN MAYÚSCULAS */
nav { text-transform: capitalize; }  /* Primera Letra De Cada Palabra */

letter-spacing y word-spacing ajustan el espacio entre letras y entre palabras. Usa unidades relativas para que escalen con el tamaño de la fuente:

h1 { letter-spacing: 0.05em; }
p  { word-spacing: 0.1em; }

text-indent aplica sangría a la primera línea del bloque:

p { text-indent: 1.5em; }

white-space controla cómo el navegador trata los espacios y saltos de línea del contenido:

normal: colapsa espacios múltiples y ajusta el texto al contenedor (valor por defecto).
nowrap: impide que el texto se rompa en varias líneas.
pre: respeta espacios y saltos de línea exactamente como en el código fuente.
pre-wrap: como pre, pero ajusta el texto al contenedor si es necesario.

.etiqueta   { white-space: nowrap; }    /* el texto no se parte */
.fragmento  { white-space: pre-wrap; }  /* respeta formato, no desborda */

vertical-align alinea verticalmente elementos en línea (inline o inline-block) respecto al texto que los rodea. No funciona en elementos de bloque; para centrar un bloque verticalmente, usa flexbox. Los valores más usados son baseline (por defecto), middle, top, bottom, sub y super:

img.icono   { vertical-align: middle; }  /* alinea el icono con el centro del texto */
.superindice { vertical-align: super; font-size: 0.7em; }

Tu proyecto

Abre proyecto.html y añade dos cosas:

Una cita de un cliente o colega usando <blockquote> y <cite>.
Tu titulación o especialización marcada con <abbr> para que aparezca el texto completo al pasar el ratón.

<blockquote>
  <p>Laura transformó por completo la forma en que vivimos el espacio.
  No solo es funcional: es exactamente lo que necesitábamos.</p>
  <cite>Carmen R., cliente residencial</cite>
</blockquote>

<p><abbr title="Escuela Técnica Superior de Arquitectura de Madrid">ETSAM</abbr>, 2008.</p>

Recapitulación

Anotaciones tipográficas:  para resaltar,  para texto secundario, / para subíndices y superíndices, <del>/<ins> para mostrar cambios.
Texto técnico: <code> para fragmentos de código, <kbd> para teclas, <samp> para salida de programa, <var> para variables. Para bloques multilínea, combinar <pre><code>.
Semántica especializada: <abbr title="..."> para abreviaturas con tooltip, <dfn> para definiciones, <address> para información de contacto del documento.
Los comentarios () son invisibles en pantalla pero visibles en el código fuente. Nunca incluir datos sensibles.
font-family acepta una lista de fuentes con una familia genérica al final como respaldo. @font-face carga fuentes propias desde el servidor; usar font-display: swap para evitar texto invisible durante la carga.
font-variant: small-caps transforma minúsculas en versalitas. La abreviada font agrupa estilo, variante, peso, tamaño, interlineado y familia en una línea.
text-align alinea el texto (left, center, right, justify). text-decoration controla subrayados y tachados, con sub-propiedades de color, estilo y grosor.
text-transform cambia entre mayúsculas y minúsculas visualmente. letter-spacing y word-spacing ajustan el espacio entre letras y palabras.
white-space controla el tratamiento de espacios y saltos de línea: nowrap evita partición, pre-wrap respeta el formato sin desbordar.
vertical-align alinea elementos en línea respecto al texto circundante. Para centrar bloques verticalmente, usar flexbox.

En la próxima lección: veremos los enlaces, como crearlos, y como indicar al navegador las rutas exactas donde obtener los recursos enlazados.

Apuntes sobre Html2