Cómo dar formato a texto en HTML

Estrada Web Group
Administrador

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 <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 de la serie:

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla