HTML: Formato de texto

HTML proporciona algunos elementos para formatear el texto de maneras muy diferentes. Por ejemplo, por nombrar tres formatos populares, podemos crear texto en negrita, en cursiva o subrayado. Los formatos se pueden aplicar a los elementos de texto, como sería el caso de los encabezados y los párrafos.

Lista de elementos descritos en este artículo:

Negrita, cursiva y subrayado

Texto en negrita: elementos <b> y <strong>

Para escribir texto en negrita (ejemplo: texto) se utiliza dos elementos: <b> y <strong>. Estos dos elementos no son sinónimos y se aplican de forma diferente, por lo que es importante conocer la diferencia entre uno y otro.

El elemento <b> se utiliza para definir texto en negrita; es un elemento estético y sin valor semántico. Por lo tanto, todo texto que esté entre las etiquetas <b> (de apertura) y </b> (de cierre) aparecerá en negrita.

El elemento <strong> tiene valor semántico y se utiliza para marcar texto como importante, y también se verá en negrita. Todo texto que esté entre las etiquetas <strong> (de apertura) y </strong> (de cierre) será considerado como más importante que el resto, es decir, con mayor énfasis.

Ejemplo de código HTML de texto en negrita:

<p>Este párrafo tiene <b>texto en negrita.</b></p>
<p>Este párrafo tiene <strong>texto importante.</strong></p>

Texto en cursiva: elementos <i> y <em>

Para escribir texto en cursiva (ejemplo: texto) se utiliza dos elementos: <i> y <em>. De igual manera, estos dos elementos no son sinónimos y se aplican de forma diferente. Por tanto, tienen diferente aplicabilidad.

El elemento <i> se utiliza para definir texto en cursiva; se trata de un elemento estético y sin valor semántico. Por lo tanto, el texto que esté entre las etiquetas <i> (de apertura) y </i> (de cierre) aparecerá en cursiva.

El elemento <em> tiene valor semántico y se utiliza para dar énfasis al texto, pero no tanto énfasis como en el caso del elemento <strong>, que es como si fuera su “hermano mayor”. Además, el elemento <em> se puede anidar, y por cada nivel se le da un énfasis mayor. El texto contenido entre las etiquetas <em> (de apertura) y </em> (de cierre) se verá en cursiva.

Ejemplo de código HTML de texto en cursiva:

<p>Este párrafo tiene <i>texto en cursiva.</i></p>
<p>Este párrafo tiene <em>texto enfatizado.</em></p>

Texto subrayado: elemento <u>

Para subrayar texto (ejemplo: texto) será suficiente con encerrarlo entre las etiquetas <u> (de apertura) y </u> (de cierre). Por lo tanto, todo texto que esté entre estas etiquetas aparecerá subrayado. A diferencia de los elementos anteriores, para subrayar texto no hay otra etiqueta con valor semántico.

Ejemplo de código HTML de texto subrayado:

<p>Este párrafo tiene <u>texto subrayado.</u></p>

Modificación de texto

Con HTML también se puede formatear texto para indicar las modificaciones que se hayan realizado en el contenido de una página. Concretamente, se puede marcar el texto que ha sido añadido o eliminado en un texto original.

Texto añadido: elemento <ins>

Para indicar que un texto ha sido añadido (ejemplo: texto) después de modificar un documento HTML se usan las etiquetas <ins> (de apertura) y </ins> (de cierre). Todo contenido que esté entre estas dos etiquetas se verá como texto insertado. Por supuesto, el estilo que tenga el texto dependerá de las hojas de estilo CSS de cada sitio web. En nuestro caso aparece verde y subrayado.

Ejemplo de código HTML de texto insertado:

<p>Este párrafo tiene <ins>texto insertado.</ins></p>

Texto modificado: elemento <del>

Para marcar un texto como eliminado (ejemplo: texto) después de modificar el documento se usa las etiquetas <del> (de apertura) y </del> (de cierre). Por tanto, el texto que esté dentro de estas dos etiquetas se verá como texto eliminado del documento original. Su apariencia dependerá de las hojas de estilo CSS de cada sitio web. En nuestro caso se visualiza de color rojo y tachado.

Ejemplo de código HTML de texto eliminado:

<p>Este párrafo tiene <ins>texto eliminado.</ins></p>

Atributos de texto añadido y/o eliminado

Los dos elementos utilizados para marcar texto añadido y texto eliminado de un documento original tiene dos atributos específicos:

• cite
• datetime

El atributo cite se utiliza para indicar la URL de la página en la que se puede conseguir más información sobre el motivo de los cambios realizados en el documento original. Por su parte, el atributo datetime se utiliza para indicar la hora y la fecha en la que se realizaron dichos cambios. Veamos un ejemplo:

<p>Este párrafo tiene
  <ins cite="https://recursivos.com" datetime="20201231">cambios.</ins>
</p>

Superíndices y subíndices

Texto superíndice: elemento <sup>

Para escribir texto en superíndice (ejemplo: ^texto) se utiliza el elemento <sup>. De esta manera, se pueden escribir expresiones matemáticas sencillas o unidades métricas, como el m² (metro cuadrado) o el m³ (metro cúbico). Por tanto, todo el texto que esté entre las etiquetas <sup> (de apertura) y </sup> (de cierre) se verá más alto y más pequeño que el texto principal.

Ejemplo de código HTML de texto superíndice:

<p>Este párrafo tiene <sup>texto superíndice.</sup></p>

Texto subíndice: elemento <sub>

El texto subíndice (ejemplo: _texto) se escribe con el elemento <sub>. Este elemento se usa para escribir expresiones muy concretas, como la molécula del agua (H₂O). Por tanto, todo texto contenido entre las etiquetas <sub> (de apertura) y </sub> (de cierre) se verá más bajo y pequeño que el texto principal.

Ejemplo de código HTML de texto subíndice:

<p>Este párrafo tiene <sub>texto subíndice.</sub></p>

Relevancia del texto

Texto resaltado: elemento <mark>

Se puede escribir texto resaltado (ejemplo: resaltado) —como si estuviera marcado con un rotulador fluorescente— con el elemento <mark>. El uso de este elemento está pensado para resaltar la relevancia o importancia de un texto, a modo de anotación. Por lo tanto, el texto entre las etiquetas <mark> (de apertura) y </mark> (de cierre) aparecerá resaltado, con el fondo amarillo.

Ejemplo de código HTML de texto resaltado:

<p>Este párrafo tiene <mark>texto resaltado.</mark></p>

Texto tachado: elemento <s>

Para escribir texto tachado (ejemplo: texto) se utiliza el elemento <s>. En versiones anteriores al HTML5, este elemento tenía valor estético, pero a partir de HTML5 tiene valor semántico: representa texto que ya no es relevante o impreciso. Todo texto que esté entre las etiquetas <s> (de apertura) y </s> (de cierre) aparecerá tachado.

Ejemplo de código HTML de texto tachado:

<p>Este párrafo tiene <s>texto tachado.</s></p>

Tamaño del texto

Generalmente se define el tamaño del texto con las hojas de estilo CSS con la propiedad font-size. Pero también se puede reducir o incrementar el tamaño a través de las etiquetas HTML, partiendo del tamaño actual como base.

Recudir tamaño del texto: elemento <small>

Se puede poner el texto más pequeño (ejemplo: texto) sin tener que recurrir a las hojas de estilo CSS gracias al elemento <small>. Por lo tanto, todo texto que esté entre las etiquetas <small> (de apertura) y </small> (de cierre) se verá más pequeño que el texto normal.

En versiones anteriores a HTML5, este elemento tenía un propósito estético, pero a partir de HTML5 tiene un propósito semántico: representar texto que puede ser considerado “letra pequeña” de un documento. También se utiliza para hacer comentarios laterales, sobre derechos de autor o legalidad.

Ejemplo de código HTML de texto pequeño:

<p>Este párrafo tiene <small>texto pequeño.</small></p>

El elemento <small> se puede anidar recursivamente en varios niveles, de modo que el texto se verá cada vez más pequeño. Por ejemplo, este código:

<p> Texto normal y texto...
  <small> cada
    <small> vez
      <small> más
        <small> pequeño. </small>
      </small>
    </small>
  </small>
</p>

Se verá así:

Texto normal y texto... cada vez más pequeño.

Incrementar tamaño del texto: elemento <big>

Se puede poner el texto más grande (ejemplo: texto) sin tener que recurrir a las hojas de estilo CSS mediante el elemento <big>. De este modo, todo el texto que esté entre las etiquetas <big> (de apertura) y </big> (de cierre) aparecerá más grande que el texto normal.

Ejemplo de código HTML de texto grande:

<p>Este párrafo tiene <big>texto grande.</big></p>

El elemento <big> también se puede anidar recursivamente, de modo que el texto se verá cada vez más grande. Por ejemplo, este código:

<p> Texto normal y texto...
  <big> cada
    <big> vez
      <big> más
        <big> grande. </big>
      </big>
    </big>
  </big>
</p>

Se verá así:

Texto normal y texto... cada vez más grande.