Cuando se habla de formatear en HTML se refiere al proceso de es­tru­c­tu­rar y diseñar el contenido de las páginas web, como textos e imágenes, usando etiquetas HTML. Con el uso adecuado de estas etiquetas se puede mostrar el contenido de forma clara, or­ga­ni­za­da y vi­sua­l­me­n­te atractiva.

De­fi­ni­ción: ¿qué significa formatear en HTML?

El lenguaje de marcado HTML pro­po­r­cio­na he­rra­mie­n­tas ese­n­cia­les para es­tru­c­tu­rar los elementos de una página. A través de las etiquetas HTML, se pueden organizar los elementos in­di­vi­dua­les, lo que se denomina formato en HTML. Esto permite definir cómo se mostrarán los textos, las imágenes y otros elementos en un documento HTML. Con estas etiquetas, es posible co­n­fi­gu­rar en­ca­be­za­dos, crear párrafos y presentar listas enu­me­ra­das.

¿Para qué sirve el formato en HTML?

El formato en HTML o formatear en HTML permite optimizar tanto la es­tru­c­tu­ra como la apa­rie­n­cia visual de los di­fe­re­n­tes elementos de una página web. Una buena es­tru­c­tu­ra y formato no solo mejora la le­gi­bi­li­dad de los textos, sino que también facilita a los usuarios la na­ve­ga­ción por la web. Además, el formato HTML favorece la op­ti­mi­za­ción para motores de búsqueda o SEO, ya que una web clara y bien es­tru­c­tu­ra­da es más fácil de analizar para los ra­s­trea­do­res de motores de búsqueda (programas que analizan el contenido de las páginas web).

Consejo

En nuestra guía “Tutorial básico de HTML: crea tu propio proyecto web” ofrecemos co­no­ci­mie­n­tos básicos sobre el lenguaje de marcado HTML.

¿Qué tipos de etiquetas existen para el formato en HTML?

En el formato en HTML se di­s­ti­n­guen entre etiquetas físicas y lógicas (conocidas en inglés como “physical tags” y “logical tags”):

  • Las etiquetas físicas: definen la apa­rie­n­cia exacta de un elemento en la página, es decir, de­te­r­mi­nan cómo se mostrarán vi­sua­l­me­n­te los textos y otros elementos. Por ejemplo, la etiqueta <b> muestra el texto en negrita y la etiqueta <i> en cursiva. Sin embargo, las etiquetas físicas no pro­po­r­cio­nan contexto semántico.
  • Las etiquetas lógicas: es­ta­ble­cen el si­g­ni­fi­ca­do de un elemento, ayudando así a es­tru­c­tu­rar se­má­n­ti­ca­me­n­te la página. Esto facilita la co­m­pre­n­sión del contenido a los motores de búsqueda, los na­ve­ga­do­res y las te­c­no­lo­gías asistivas. Un ejemplo de ello es la etiqueta <em>, que se utiliza para resaltar partes de un texto y suele marcar los pasajes co­rre­s­po­n­die­n­tes en cursiva.
Web Hosting
El hosting que crece con tu proyecto
  • Tiempo de actividad de 99.99 % y seguridad ga­ra­n­ti­za­da
  • Aumenta el re­n­di­mie­n­to según el tráfico de tu página web
  • Incluye dominio, SSL, e-mail y soporte 24/7

Las etiquetas más im­po­r­ta­n­tes para el formato en HTML

HTML ofrece una amplia variedad de etiquetas para formatear co­n­te­ni­dos web. Estas etiquetas permiten desde es­tru­c­tu­rar diseños de página completos hasta adaptar elementos in­di­vi­dua­les. Nuestra guía sobre etiquetas HTML ofrece una visión general de los comandos más im­po­r­ta­n­tes. La siguiente lista se centra es­pe­cí­fi­ca­me­n­te en las etiquetas para formatear textos en HTML y sus pri­n­ci­pa­les funciones:

Etiqueta HTML De­s­cri­p­ción
<b> Etiqueta física que muestra una palabra, frase o sección de texto en negrita.
<strong> Etiqueta lógica que resalta secciones de texto, tanto vi­sua­l­me­n­te como para el navegador.
<i> Etiqueta física que muestra palabras, frases o secciones de texto concretas en cursiva.
<em> Etiqueta lógica para enfatizar partes im­po­r­ta­n­tes del texto, que ge­ne­ra­l­me­n­te se muestran en cursiva.
<u> Subraya el texto se­le­c­cio­na­do.
<h1> a <h6> Estas etiquetas crean en­ca­be­za­dos, siendo el nivel 1 el más grande y el 6 el más pequeño.
<p> Esta etiqueta crea párrafos.
<big> Con esta etiqueta se aumenta el tamaño del texto se­le­c­cio­na­do.
<small> Esta etiqueta reduce el tamaño de letra de un fragmento.
<sup> La etiqueta se utiliza para elevar ca­ra­c­te­res in­di­vi­dua­les, como en la ecuación e = mc², que se muestran más pequeños y li­ge­ra­me­n­te por encima de la línea de texto.
<sub> Con esta etiqueta, los ca­ra­c­te­res se muestran en subíndice. Un ejemplo de ello es la fórmula química del agua: H2O.
<ins> La etiqueta indica que se ha insertado texto en un documento.
<del> La etiqueta indica que se ha eliminado texto.
<strike> Esta etiqueta se usa para tachar secciones de texto.
<mark> Con esta etiqueta HTML se puede resaltar el fondo de palabras, frases y secciones de texto con color.
Compra y registra tu dominio ideal
  • Ce­r­ti­fi­ca­do SSL Wildcard gratis
  • Registro privado
  • Función Domain Connect para una co­n­fi­gu­ra­ción DNS si­m­pli­fi­ca­da gratis

Ejemplos de uso del formato en HTML

Formatear en HTML ofrece muchas po­si­bi­li­da­des para es­tru­c­tu­rar y presentar de manera atractiva los textos y otros elementos de una página web. Para apro­ve­char al máximo el potencial del formato en HTML, es im­po­r­ta­n­te saber cómo utilizar bien las etiquetas HTML. Los si­guie­n­tes ejemplos prácticos muestran cómo funciona esto en términos generales.

Ejemplo 1: mostrar texto en negrita

Para mostrar en negrita una palabra o un fragmento de un texto, se usa la etiqueta <b>. Esta etiqueta física solo modifica el aspecto visual de la palabra o fragmento co­rre­s­po­n­die­n­te.

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de texto en negrita</title>
</head>
<body>
    <p>Con la etiqueta correcta, el texto se muestra en <b>negrita</b>.</p>
</body>
</html>
html

Resultado:

Con la etiqueta correcta, el texto se muestra en negrita.

Ejemplo 2: resaltar fra­g­me­n­tos de un texto

Si deseas resaltar un fragmento tanto para los lectores como para los motores de búsqueda y los na­ve­ga­do­res, utiliza la etiqueta HTML <strong>. Esta etiqueta enfatiza la im­po­r­ta­n­cia de la sección marcada. También en este caso, el fragmento co­rre­s­po­n­die­n­te ge­ne­ra­l­me­n­te se muestra en negrita.

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo para resaltar fragmentos de texto</title>
</head>
<body>
    <p>La última palabra de la frase se <strong>resalta</strong>.</p>
</body>
</html>
html

Resultado:

La última palabra de la frase se resalta.

Ejemplo 3: mostrar palabras o fra­g­me­n­tos de un texto en cursiva

Las palabras ex­tra­n­je­ras a menudo se muestran en cursiva dentro de los textos para que llamen la atención al leer. En este caso, se utiliza la etiqueta HTML <i>.

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de texto en cursiva</title>
</head>
<body>
    <p>La siguiente palabra está en <i>cursiva</i>.</p>
</body>
</html>
html

Resultado:

La siguiente palabra está en cursiva.

Ejemplo 4: subrayar texto

Por supuesto, el formato en HTML también ofrece la po­si­bi­li­dad de subrayar palabras o secciones completas de texto, es decir, añadir una línea debajo. Para ello, es necesario utilizar la etiqueta <u>.

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de texto subrayado</title>
</head>
<body>
    <p><u>Subrayar</u> una palabra es útil en algunas situaciones.</p>
</body>
</html>
html

Resultado:

Imagen: Formato en HTML: ejemplo con texto subrayado
Formato en HTML: ejemplo con texto subrayado

Ejemplo 5: tachar texto

El contenido entre la etiqueta <strike> se muestra tachado. El uso de esta etiqueta HTML es útil, entre otras cosas, para marcar in­fo­r­ma­ción obsoleta o que ya no es actual.

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de texto tachado</title>
</head>
<body>
    <p>La oferta es válida hasta el <strike>1 de noviembre</strike> 1 de diciembre.</p>
</body>
</html>
html

Resultado:

Imagen: Formato en HTML: ejemplo con texto tachado
Formato en HTML: ejemplo con texto tachado
Ir al menú principal