Cómo dar formato a texto en HTML

pasos para hacer una pagina web 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 . Requiere etiqueta de apertura y cierre. El texto que debe estar en negrita debe estar dentro de las etiquetas y .
También podemos usar la etiqueta para hacer que el texto sea fuerte, con una importancia semántica añadida. También se abre con y termina con la etiqueta .

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 se utiliza para poner el texto en cursiva. Se abre con y termina con la etiqueta .

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

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 . Tiene una etiqueta de apertura y una etiqueta de cierre .

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 se utiliza para sobrescribir un texto y el elemento 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 se utiliza para reducir el tamaño del texto. El texto que debe mostrarse más pequeño debe escribirse dentro de las etiquetas y .

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