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>
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>
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>
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>
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>
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>
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>