Cómo dar formato a texto en HTML

HTML nos brinda la posibilidad de formatear texto, como lo hacemos en Word o en cualquier software de edición de texto. En este artículo, veremos algunas de estas opciones.


  • Hacer que el texto esté en negrita: para poner el texto en negrita utilizaremos la etiqueta <b>. Requiere etiqueta de apertura y cierre. El texto que debe estar en negrita debe estar dentro de las etiquetas <b> y </b>.
  • También podemos usar la etiqueta <strong> para hacer que el texto sea fuerte, con una importancia semántica añadida. También se abre con <strong> y termina con la etiqueta </strong>.

     Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Cómo poner en negrita un texto en HTML</title>
</head>
<body>
    <!—Texto normal-->
    <p>>Hola crea tu página web html desde cero </p>

    <!—Texto en negrita-->
    <p><b>Hola crea tu página web html desde cero</b></p>

    <!—Texto fuerte-->   
    <p><strong>Hola crea tu página web html desde cero </strong></p>

</body>

</html>

Ver Demo

Poner el texto en cursiva o enfatizar:

La etiqueta <i> se utiliza para poner el texto en cursiva. Se abre con <i> y termina con la etiqueta </i>.

La etiqueta <em> se usa para enfatizar el texto, con una importancia semántica añadida. Se abre con <em> y termina con la etiqueta </em>.

Ejemplo

<!DOCTYPE html>

<html>

<head>
    <title>Italic</title>
</head>

<body>

    <! --Texto normal -->
    <p>Curso gratis de html</p>

    <!-- Cursiva -->
    <p><i> Curso gratis de html </i></p>

    <!-- Enfatizar -->   
    <p><em> Curso gratis de html </em></p>

</body>

</html>

Ver Demo

Resaltar un texto

También es posible resaltar un texto en HTML usando la etiqueta <mark>. Tiene una etiqueta de apertura <mark> y una etiqueta de cierre </mark>.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Resaltar</title>
</head>
<body>

    <!-- Texto normal -->
    <p>Aprende a programar html desde cero</p>

    <!--Texto resaltado-->   
    <p><mark> Aprende a programar html desde cero </mark></p>

</body>

</html>

Ver Demo

Creación de un subíndice o superíndice de texto

El elemento <sup> se utiliza para sobrescribir un texto y el elemento <sub> se utiliza para subíndice de un texto. Ambos tienen etiqueta de apertura y de cierre.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Subíndice y superíndice</title>
</head>
<body>

    <!-- Texto normal -->
    <p>Curso gratuito de html5</p>

    <!-- Texto Superíndice --> 
    <p> Curso <sup> gratuito de html5</sup></p>

    <!-- Texto Subíndice -->   
    <p> Curso <sub> gratuito de html5</sub></p>

</body>

</html>

Ver Demo

Reducir el tamaño del texto:

El elemento <small> se utiliza para reducir el tamaño del texto. El texto que debe mostrarse más pequeño debe escribirse dentro de las etiquetas <small> y </small>.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Texto pequeño</title>
</head>

<body>

    <!-- Texto normal -->
    <p>Crea tu página web con html desde cero</p>

    <!--Texto tamaño reducido-->   
    <p> Crea tu página web con html <small> desde cero </small></p>

</body>

</html>

Ver Demo

Tachando el texto

El elemento <del> se usa para tachar el texto, esto es útil por ejemplo para marcas el texto como eliminado. También tiene una etiqueta de apertura y de cierre.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Tachado</title>
</head>
<body>

    <!--Texto Normal-->
    <p>Crear mi propia web html desde cero</p>

    <!--Texto tachado-->   
    <p> Crear mi propia <del> web html desde cero </del></p>

</body>

</html>

Ver Demo

Subrayar un texto

La etiqueta <ins> se usa para subrayar un texto que marca la parte como insertada o agregada. También tiene una etiqueta de apertura y de cierre.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Texto subrayado</title>
</head>
<body>

    <!--Texto Normal-->
    <p>Aprende a programar desde cero</p>

    <!--Texto subrayado-->   
    <p><ins> Aprende a programar desde cero </ins></p>

</body>

</html>

Ver Demo

Artículos relacionados
0 Comentarios
Enviame un comentario