# ¿Qué es el formato en HTML?

Cuando se habla de formatear en HTML se refiere al proceso de estructurar 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, organizada y visualmente atractiva.

## Definición: ¿qué significa formatear en HTML?

El lenguaje de marcado [HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html/) proporciona herramientas esenciales para **estructurar los elementos de una página**. A través de las etiquetas HTML, se pueden organizar los elementos individuales, 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 configurar encabezados, crear párrafos y presentar listas enumeradas.

## ¿Para qué sirve el formato en HTML?

El formato en HTML o formatear en HTML permite optimizar tanto la estructura como la apariencia visual de los diferentes elementos de una página web. Una buena estructura y formato no solo **mejora la legibilidad de los textos**, sino que también facilita a los usuarios la navegación por la web. Además, el formato HTML favorece la [optimización para motores de búsqueda](https://www.ionos.mx/digitalguide/online-marketing/marketing-para-motores-de-busqueda/seo-conceptos-basicos/) o SEO, ya que una **web clara y bien estructurada** es más fácil de analizar para los rastreadores 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](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/aprende-html-tutorial-para-principiantes/)” ofrecemos conocimientos básicos sobre el lenguaje de marcado HTML.

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

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

- Las **etiquetas físicas**: definen la apariencia exacta de un elemento en la página, es decir, determinan cómo se mostrarán visualmente 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 proporcionan contexto semántico.
- Las **etiquetas lógicas**: establecen el significado de un elemento, ayudando así a estructurar semánticamente la página. Esto facilita la comprensión del contenido a los motores de búsqueda, los navegadores y las tecnologías asistivas. Un ejemplo de ello es la etiqueta `<em>`, que se utiliza para resaltar partes de un texto y suele marcar los pasajes correspondientes en cursiva.

## Las etiquetas más importantes para el formato en HTML

HTML ofrece una amplia variedad de etiquetas para formatear contenidos web. Estas etiquetas permiten desde estructurar diseños de página completos hasta adaptar elementos individuales. Nuestra guía sobre [etiquetas HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-tags/) ofrece una visión general de los comandos más importantes. La siguiente lista se centra específicamente en las etiquetas para formatear textos en HTML y sus principales funciones:

<table>
  <thead>
    <tr>
      <th>Etiqueta HTML</th>
      <th>Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`<b>`</td>
      <td>Etiqueta física que muestra una palabra, frase o sección de texto en negrita.</td>
    </tr>
    <tr>
      <td>`<strong>`</td>
      <td>Etiqueta lógica que resalta secciones de texto, tanto visualmente como para el navegador.</td>
    </tr>
    <tr>
      <td>`<i>`</td>
      <td>Etiqueta física que muestra palabras, frases o secciones de texto concretas en cursiva.</td>
    </tr>
    <tr>
      <td>`<em>`</td>
      <td>Etiqueta lógica para enfatizar partes importantes del texto, que generalmente se muestran en cursiva.</td>
    </tr>
    <tr>
      <td>`<u>`</td>
      <td>Subraya el texto seleccionado.</td>
    </tr>
    <tr>
      <td>`<h1>` a `<h6>`</td>
      <td>Estas etiquetas crean encabezados, siendo el nivel 1 el más grande y el 6 el más pequeño.</td>
    </tr>
    <tr>
      <td>`<p>`</td>
      <td>Esta etiqueta crea párrafos.</td>
    </tr>
    <tr>
      <td>`<big>`</td>
      <td>Con esta etiqueta se aumenta el tamaño del texto seleccionado.</td>
    </tr>
    <tr>
      <td>`<small>`</td>
      <td>Esta etiqueta reduce el tamaño de letra de un fragmento.</td>
    </tr>
    <tr>
      <td>`<sup>`</td>
      <td>La etiqueta se utiliza para elevar caracteres individuales, como en la ecuación e = mc², que se muestran más pequeños y ligeramente por encima de la línea de texto.</td>
    </tr>
    <tr>
      <td>`<sub>`</td>
      <td>Con esta etiqueta, los caracteres se muestran en subíndice. Un ejemplo de ello es la fórmula química del agua: H2O.</td>
    </tr>
    <tr>
      <td>`<ins>`</td>
      <td>La etiqueta indica que se ha insertado texto en un documento.</td>
    </tr>
    <tr>
      <td>`<del>`</td>
      <td>La etiqueta indica que se ha eliminado texto.</td>
    </tr>
    <tr>
      <td>`<strike>`</td>
      <td>Esta etiqueta se usa para tachar secciones de texto.</td>
    </tr>
    <tr>
      <td>`<mark>`</td>
      <td>Con esta etiqueta HTML se puede resaltar el fondo de palabras, frases y secciones de texto con color.</td>
    </tr>
  </tbody>
</table>

## Ejemplos de uso del formato en HTML

Formatear en HTML ofrece muchas posibilidades para estructurar y presentar de manera atractiva los textos y otros elementos de una página web. Para aprovechar al máximo el potencial del formato en HTML, es importante saber cómo utilizar bien las etiquetas HTML. Los siguientes 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 correspondiente.

```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>
<div class="hash d-none" hidden>hash_fb304a2bf5f32a6ffbc0d012a475ad4dcd640602</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Resultado**:

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

### Ejemplo 2: resaltar fragmentos de un texto

Si deseas resaltar un fragmento tanto para los lectores como para los motores de búsqueda y los navegadores, utiliza la etiqueta HTML `<strong>`. Esta etiqueta enfatiza la importancia de la sección marcada. También en este caso, el fragmento correspondiente generalmente se muestra en negrita.

```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>
<div class="hash d-none" hidden>hash_fb304a2bf5f32a6ffbc0d012a475ad4dcd640602</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Resultado**:

La última palabra de la frase se **resalta**.

### Ejemplo 3: mostrar palabras o fragmentos de un texto en cursiva

Las palabras extranjeras 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>`.

```html

<html>
<head>
    <title>Ejemplo de texto en cursiva</title>
</head>
<body>
    <p>La siguiente palabra está en <i>cursiva</i>.</p>
<div class="hash d-none" hidden>hash_fb304a2bf5f32a6ffbc0d012a475ad4dcd640602</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Resultado**:

La siguiente palabra está en *cursiva*.

### Ejemplo 4: subrayar texto

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

```html

<html>
<head>
    <title>Ejemplo de texto subrayado</title>
</head>
<body>
    <p><u>Subrayar</u> una palabra es útil en algunas situaciones.</p>
<div class="hash d-none" hidden>hash_fb304a2bf5f32a6ffbc0d012a475ad4dcd640602</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Resultado**:

[![Imagen: Formato en HTML: ejemplo con texto subrayado](https://www.ionos.mx/digitalguide/fileadmin/_processed_/7/5/csm_formato-html-ejemplo-subrayar_c83feee869.webp "Formato en HTML: ejemplo con texto subrayado")](https://www.ionos.mx/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/formato-html-ejemplo-subrayar.png) 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 información obsoleta o que ya no es actual.

```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>
<div class="hash d-none" hidden>hash_fb304a2bf5f32a6ffbc0d012a475ad4dcd640602</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Resultado**:

[![Imagen: Formato en HTML: ejemplo con texto tachado](https://www.ionos.mx/digitalguide/fileadmin/_processed_/2/2/csm_formato-html-ejemplo-tachar_224d32c6fb.webp "Formato en HTML: ejemplo con texto tachado")](https://www.ionos.mx/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/formato-html-ejemplo-tachar.png) Formato en HTML: ejemplo con texto tachado


This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/formato-en-html/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/formato-en-html/) for AI/LLM consumption.