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
Cómo dar formato a texto en HTML
Cómo dar formato a texto en HTML

HTML nos brinda la posibilidad de formatear te

El elemento DOCTYPE de html5
El elemento DOCTYPE de html5

En la primera lección de HTML5 veremos el elem

El manejo de Atributos en HTML
El manejo de Atributos en HTML

Un atributo se utiliza para definir las caract

0 Comentarios
Enviame un comentario