GATO GARABATO AGENCIA

Horario de atención: De Lunes a Sábado de 10:00 a.m. a 6:00 p.m. ✨🚀

Agencia de Publicidad y Marketing Digital en Puerto Vallarta y Bahía de Banderas

Clientes activos

Etiquetas de texto en HTML con ejemplos

¡Comparte este artículo con tus amigos!

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.

[pvc_stats postid="" increase="1" show_views_today="1"]

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

[pvc_stats postid="" increase="1" show_views_today="1"]
¡Comparte este artículo con tus amigos!

Recomendado para ti: