Formato de texto en HTML

HTML proporciona algunos elementos para indicar en qué formato se va a mostrar en un navegador web un determinado texto.

Elemento "b"

EJEMPLO El elemento "b" sirve para indicar que un texto se muestre en negrita. Así, para visualizar:

Visualización del archivo texto-en-negrita.html en Google Chrome, donde se muestra texto en negrita.

Se puede escribir ("texto-en-negrita.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de texto en negrita</title>
  </head>
  <body>
    <p>En este párrafo, <b>estas palabras se deben mostrar en negrita</b>, en un navegador web.</p>
  </body>
</html>

Elemento "i"

EJEMPLO El elemento "i" sirve para indicar que un texto se muestre en itálica (cursiva). En consecuencia, para ver:

Visualización del archivo texto-en-cursiva.html en Google Chrome, donde se muestra texto en cursiva.

El código puede ser ("texto-en-cursiva.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de texto en cursiva</title>
  </head>
  <body>
    <p>En este párrafo, <i>estas palabras se deben mostrar en cursiva</i>, en un navegador web.</p>
  </body>
</html>

EJEMPLO A un mismo texto se puede indicar más de un formato. Por ejemplo, para ver:

Visualización del archivo texto-en-cursiva-y-negrita.html en Google Chrome, donde se muestra texto en cursiva y negrita.

Podemos escribir el siguiente documento HTML ("texto-en-cursiva-y-negrita.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de texto en cursiva y negrita</title>
  </head>
  <body>
    <p>En este párrafo, <i>de estas palabras en cursiva <b>estas también se ven en negrita</b></i>, en un navegador web.</p>
  </body>
</html>

Obsérvese en el código, que las etiquetas <b> y </b> están anidadas dentro de las etiquetas <i> e </i>.

Elementos "strong" y "em"

EJEMPLO Por otra parte, el elemento "strong" (que alberga texto de gran importancia) y el elemento "em" (que contiene texto enfatizado), también muestran texto en negrita y cursiva, respectivamente. Véase que, al visualizar el archivo ("texto-strong-y-em.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de texto strong y em</title>
  </head>
  <body>
    <p>En este párrafo, <strong>estas palabras son de gran importancia</strong> y <em>estas están enfatizadas</em>, mostrándose en negrita y cursiva respectivamente en un navegador web.</p>
  </body>
</html>

En un navegador se visualizará:

Visualización del archivo texto-strong-y-em.html en Google Chrome, donde se muestra texto de gran importancia y texto enfatizado.

Nota: los elementos "b" e "i", no proporcionan la importancia semántica que sí tienen "strong" y "em".

Elemento "small"

EJEMPLO Con el elemento "small" se indica que un texto se muestre más pequeño en un navegador. Por ejemplo, para ver:

Visualización del archivo texto-small.html en Google Chrome, donde se muestra texto más pequeño con small.

Se puede escribir ("texto-small.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de texto small</title>
  </head>
  <body>
    <p>En este párrafo, <small>estas palabras se muestran más pequeñas</small>, en un navegador web.</p>
  </body>
</html>

Elementos "sub" y "sup"

EJEMPLO Los elementos "sub" y "sup" permiten indicar que un texto se muestre como un subíndice o como un superíndice, respectivamente. Por ejemplo, para ver en un navegador:

Visualización del archivo texto-subindice-y-superindice.html en Google Chrome, donde se muestra texto subíndice y superíndice.

Se puede escribir el siguiente documento HTML ("texto-subindice-y-superindice.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de texto subíndice y superíndice</title>
  </head>
  <body>
    <p>Texto normal.<sub>Texto subíndice.</sub></p>
    <p>Texto normal.<sup>Texto superíndice.</sup></p>
  </body>
</html>

Elemento "mark"

EJEMPLO El elemento "mark" permite indicar que un texto se muestre resaltado en un navegador, como por ejemplo:

Visualización del archivo texto-resaltado.html en Google Chrome, donde se muestra texto resaltado o marcado.

Para ello, se puede escribir el siguiente código ("texto-resaltado.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de texto resaltado</title>
  </head>
  <body>
    <p>En este párrafo, <mark>estas palabras se muestran resaltadas</mark>, en un navegador web.</p>
  </body>
</html>

Ejercicio resuelto
Formatos de texto