Formateo del texto - HTML5 básico - Capítulo 7


En este capítulo aprenderás a formatear el texto con etiquetas html. A poner el texto en negrita, cursiva, subrayado, etc.

Texto en negrita en html

La etiquetas <b> </b> de bold (negrita en español) se utilizan para crear texto en negrita. Pueden utilizarse individualmente o en conjunto con otras etiquetas de texto, como por ejemplo, dentro de un párrafo.

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilizando el texto con html.</title>
</head>
<body>

    <p>Esto es un párrafo en letra normal.</p>
    <b>Esto es un párrafo en negrita.</b>
    <p>Esto es un párrafo en letra normal, pero con una parte en <b>negrita</b>.</p>

</body>
</html>

Resultado en el navegador

Texto en negrita html

Texto en cursiva en html

La etiquetas <i> </i> de italics (cursiva en español) se utilizan para crear texto en cursiva. Pueden utilizarse individualmente o en conjunto con otras etiquetas de texto, como por ejemplo, dentro de un párrafo al igual que ocurre con la etiqueta b.

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilizando el texto con html.</title>
</head>

<body>

    <p>Esto es un párrafo en letra normal.</p>
    <i>Esto es un párrafo en cursiva.</i>
    <p>Esto es un párrafo en letra normal, pero con una parte en <i>cursiva</i>.</p>

</body>
</html>

Resultado en el navegador

Texto en cursiva html

Las etiquetas strong y em html

Visualmente hablando tenemos dos etiquetas que son iguales a <b> y a <i>, se trata de <strong>, equivalente a la etiqueta <b> y <em> equivalente a la etiqueta <i>.

A nivel semántico desde html5 (la última versión ahora en el día que escribo esto y la que estás aprendiendo en este curso) se utilizan strong y em para dar un mayor énfasis a las palabras en negrita o en cursiva. Este énfasis es utilizado por el navegador para saber si ciertas palabras o frases son más importantes en la página que otras. Se utiliza para los lectores de voz, por temas de accesibilidad, en los que queremos que el oyente tenga claro que esa parte es más importante. Si solo quieres resaltar visualmente una parte, puedes utilizar b o i.

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilizando el texto con html.</title>
</head>

<body>

    <p>Esto es un párrafo en letra normal.</p>
    <i>Esto es un párrafo en cursiva con mayor importancia para el navegador, aunque el usuario me ve igual.</i>
    <p>Esto es un párrafo en letra normal, pero con una parte en <strong>negrita "fuerte", el navegador me da más importancia</strong>.</p>

</body>
</html>

Resultado en el navegador

Diferencia entre strong b y em i html

Como resaltar el texto con colores en html

Podemos utilizar las etiquetas <mark> </mark> de mark (marcar) o marker en inglés (marcador) para marcar el texto en un color.

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilizando el texto con html.</title>
</head>

<body>

    <p>Esto es un párrafo en letra normal.</p>
    <mark>Esto es un párrafo marcado.</mark>
    <p>Esto es un párrafo en letra normal, pero con una parte  <mark>marcada</mark>.</p>

</body>
</html>

Resultado en el navegador

mark html

Cómo subrayar texto en html

Para subrayar el texto hay que utilizar la etiqueta <ins> </ins> de inserted en inglés (insertado).

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilizando el texto con html.</title>
</head>

<body>

    <p>Esto es un párrafo en letra normal.</p>
    <ins>Esto es un párrafo subrayado.</ins>
    <p>Esto es un párrafo en letra normal, pero con una parte  <ins>subrayada</ins>.</p>

</body>
</html>

Resultado en el navegador

ins html

Cómo tachar texto en html

Para tachar el texto hay que utilizar la etiqueta <del> </del> de delete en inglés (eliminado, eliminar).

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilizando el texto con html.</title>
</head>

<body>

    <p>Esto es un párrafo en letra normal.</p>
    <del>Esto es un párrafo tachado.</del>
    <p>Esto es un párrafo en letra normal, pero con una parte  <del>tachada</del>.</p>

</body>
</html>

Resultado en el navegador

del html

Cómo crear superíndes y subíndices en html

Los superíndes y los subíndices son números, letras o símbolos que se muestran con un tamaño reducido al resto del texto, normalmente utilizados para matemáticas.

Para especificar un superíndice hay que utilizar la etiqueta <sup> </sup> de superscript en inglés (superíndice) y para un subíndice con la etiqueta <sub> </sub> de subscript en inglés (subíndice).

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilizando el texto con html.</title>
</head>

<body>

    <p>Este número lleva un superíndice: 20<sup>5</sup></p>
    <p>Este número lleva un subíndice: 77<sub>25</sub></p>

</body>
</html>

Resultado en el navegador

sup y sub html

Ejercicios de html

14- Crea un párrafo que contenga las etiquetas b, i y mark.

15- Escribe en un párrafo un número como este: 702.

16- Crea un párrafo con solo una parte tachada en el texto.

17- Intenta reproducir este texto con el mismo resultado:
El cielo estaba nublado me recordaba que debí hacer caso al aviso de tormenta que dieron esta mañana en la televisión.
Bueno, lo hecho, hecho está, ya era tarde para lamentarse.

La solución la encontrarás aquí: Haz click aquí.


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.