Etiquetas de texto en HTML con ejemplos

El manejo de texto es uno de los fundamentos clave en la creación de páginas web, ya que permite estructurar y dar formato al contenido de manera clara y atractiva.

En HTML, existen diversas etiquetas diseñadas específicamente para organizar títulos, párrafos, estilos de texto y citas, entre otros. Con estas herramientas, los desarrolladores pueden enriquecer la experiencia del usuario, destacando información importante o presentando contenido de forma jerárquica y visualmente comprensible.

A continuación, exploraremos las etiquetas de texto más comunes y cómo utilizarlas, acompañadas de ejemplos prácticos que ilustran su funcionalidad.

Títulos (Headings):

Son etiquetas utilizadas para definir títulos jerárquicos en una página. Van desde <h1> (el más importante) hasta <h6> (el menos importante).

				
					<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Encabezado menor</h3>
<h4>Encabezado aún más pequeño</h4>
<h5>Encabezado pequeño</h5>
<h6>Encabezado más pequeño</h6>

Párrafos:

Se utiliza para contener bloques de texto.

				
					<p>Este es un párrafo de texto. Puedes agregar más contenido aquí.</p>

Texto en negritas o fuerte:

<b>: Aplica un estilo en negritas sin darle importancia semántica.
<strong>: Indica que el texto es importante, aplicando también negritas.

				
					<p>Esto es <b>negritas</b> sin importancia semántica.</p>
<p>Esto es <strong>negritas importantes</strong>.</p>

Texto en cursiva o enfático:

<i>: Aplica estilo cursivo sin importancia semántica.
<em>: Indica que el texto tiene énfasis.

				
					<p>Esto es <i>cursiva</i> decorativa.</p>
<p>Esto es <em>texto enfatizado</em>.</p>

Texto subrayado o de énfasis adicional:

Subraya el texto.

				
					<p>Este es un texto <u>subrayado</u>.</p>

Texto tachado:

Indica texto eliminado o tachado.

				
					<p>Este es un texto <s>tachado</s>.</p>
<p>Este es un texto <del>eliminado</del>.</p>

Texto en subíndice y superíndice:

Usado en fórmulas matemáticas, químicas o para notas al pie.

				
					<p>H<sub>2</sub>O (fórmula del agua)</p>
<p>E = mc<sup>2</sup> (fórmula de Einstein)</p>

Bloques de citas:

<blockquote>: Para citas largas.
<q>: Para citas cortas.

				
					<blockquote>“El éxito es la suma de pequeños esfuerzos repetidos día tras día.”</blockquote>
<p>Mi amigo dijo: <q>¡Hola mundo!</q></p>

Texto preformateado:

Preserva los espacios, saltos de línea y tabulaciones tal como se escriben.

				
					<pre>
  Este texto
    tiene espacios
  y saltos de línea.
</pre>

Resaltar texto:

Destaca texto como si estuviera resaltado.

				
					<p>Esto es un texto <mark>resaltado</mark>.</p>

Texto más pequeño:

Reduce el tamaño del texto.

				
					<p>Este es un texto normal, pero este es <small>pequeño</small>.</p>

Abreviaturas:

Muestra el significado de una abreviatura al pasar el cursor.

				
					<p>El término <abbr title="HyperText Markup Language">HTML</abbr> es muy importante.</p>

Código o monoespaciado:

Muestra texto con fuente de código.

				
					<p>Para crear un enlace, usa la etiqueta <code>&lt;a&gt;</code>.</p>

Ejemplo con varias etiquetas:

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de etiquetas de texto</title>
</head>
<body data-rsssl=1>
    <h1>Hola, mundo!</h1>
    <p>Esto es un <strong>párrafo importante</strong> con texto en <i>cursiva</i>.</p>
    <p>Fórmula del agua: H<sub>2</sub>O</p>
    <p>Nota al pie: 10<sup>2</sup></p>
    <blockquote>“El conocimiento es poder.” - Francis Bacon</blockquote>
    <p>Aprender HTML es <mark>fácil</mark> y divertido.</p>
</body>
</html>

Las etiquetas de texto en HTML son esenciales para garantizar que la información en un sitio web sea accesible, comprensible y bien presentada. Desde los encabezados que estructuran jerárquicamente el contenido hasta los estilos como negritas, cursivas o resaltados que enfatizan detalles clave, estas herramientas permiten a los desarrolladores comunicar ideas de manera efectiva.

Con una buena comprensión de estas etiquetas y su propósito semántico, es posible crear páginas web más organizadas y fáciles de navegar, mejorando tanto la funcionalidad como la experiencia del usuario. ¡Dominar estas etiquetas es un gran paso hacia el diseño web profesional!