09- ✍️ Formato de texto en HTML con ejemplos

---

• Formato de texto HTML
• Elementos de formato HTML: `<b>` y `<strong>`
• Elementos `<i>` y `<em>`
• Elemento `small`
• Elemento `mark`
• Elemento `del`
• Elemento `ins`
• Elemento `sub`
• Elemento `sup`
• Resumen de elementos de formato

---

Formato de texto HTML

El formato de texto en **HTML** permite definir cómo se verá el contenido en una página web, como negritas, cursivas, colores y tamaños de letra.

Ejemplo

Este es un texto en negrita

Este es un texto en cursiva

Este texto es de color azul

Este texto es más grande

Código del ejemplo

<p><strong>Este es un texto en negrita</strong></p>
<p><em>Este es un texto en cursiva</em></p>
<p style="color:blue;">Este texto es de color azul</p>
<p style="font-size:24px;">Este texto es más grande</p>
                        

---

Elementos de Formato HTML: `<b>` y `<strong>`

Los elementos **`<b>`** y **`<strong>`** se utilizan para destacar texto, haciéndolo visiblemente más grueso (negrita).

• El elemento **``** se usa para dar formato negrita sin implicar importancia adicional (ej. nombres de productos en un texto).
• El elemento **``** se usa para indicar que el texto es de gran importancia y debe tener un énfasis fuerte.

Ejemplo

Este texto está en negrita usando el tag <b>.

Este texto es importante y está en negrita con el tag <strong>.

Código del ejemplo

<p><b>Este texto está en negrita usando el tag <b>.</b></p>
<p><strong>Este texto es importante y está en negrita con el tag <strong>.</strong></p>
                        

---

Elementos `<i>` y `<em>`

Los elementos **`<i>`** e **`<em>`** se usan para aplicar énfasis o cursiva al texto.

• El elemento **``** se utiliza para texto que debe aparecer en cursiva por razones tipográficas o estilísticas, pero sin implicar un énfasis especial (ej. términos técnicos, frases en otro idioma).
• El elemento **``** indica énfasis semántico, es decir, que una parte del texto es importante y debe ser enfatizada por un lector de pantalla o un motor de búsqueda.

Ejemplo

Este texto está en cursiva visual usando el tag <i>.

Este texto tiene énfasis semántico usando el tag <em>.

Código del ejemplo

<p><i>Este texto está en cursiva visual usando el tag <i>.</i></p>
<p><em>Este texto tiene énfasis semántico usando el tag <em>.</em></p>
                        

---

Elemento `small`

El elemento **`<small>`** se utiliza para hacer el texto más pequeño de lo normal, generalmente para notas al pie, avisos de derechos de autor o textos aclaratorios que no son tan importantes como el contenido principal.

Ejemplo

Texto normal.

Este texto es más pequeño usando el tag <small>.

Código del ejemplo

<p>Texto normal.</p>
<p><small>Este texto es más pequeño usando el tag <small>.</small></p>
                        

---

Elemento `mark`

El elemento **``** se utiliza para resaltar un texto, similar a usar un marcador fluorescente, indicando que es relevante en un contexto particular.

Ejemplo

Este es un texto normal.

Este texto está resaltado usando el tag <mark>.

Código del ejemplo

<p>Este es un texto normal.</p>
<p><mark>Este texto está resaltado usando el tag <mark>.</mark></p>
                        

---

Elemento `del`

El elemento **`<del>`** se usa para mostrar un texto tachado, indicando que ha sido eliminado o ya no es relevante en una revisión o modificación del documento.

Ejemplo

Este texto está tachado usando el tag <del>.

Código del ejemplo

<p><del>Este texto está tachado usando el tag <del>.</del></p>
                        

---

Elemento `ins`

El elemento **`<ins>`** se usa para mostrar texto insertado, a menudo representado con un subrayado, indicando que es una adición a una versión anterior del documento.

Ejemplo

Este texto está subrayado usando el tag <ins>.

Código del ejemplo

<p><ins>Este texto está subrayado usando el tag <ins>.</ins></p>
                        

---

Elemento `sub`

El elemento **`<sub>`** se utiliza para definir texto en subíndice, generalmente usado en fórmulas científicas o matemáticas para representar subíndices.

Ejemplo

El agua tiene la fórmula química H₂O.

Código del ejemplo

<p>El agua tiene la fórmula química H<sub>2</sub>O.</p>
                        

---

Elemento `sup`

El elemento **`<sup>`** se utiliza para definir texto en superíndice, comúnmente usado en expresiones matemáticas para exponentes o en abreviaturas.

Ejemplo

Este es un texto con superíndice, como en x².

Código del ejemplo

<p>Este es un texto con superíndice, como en x<sup>2</sup>.</p>
                        

---

Resumen de elementos de formato

A continuación, una tabla con los elementos de formato de texto en HTML que hemos visto y sus descripciones:

Etiqueta	Descripción
`<b>`	Define texto en negrita (sin énfasis semántico).
`<strong>`	Define texto importante (con énfasis semántico).
`<i>`	Define una parte del texto en un tono o estilo alternativo (cursiva visual).
`<em>`	Define texto enfatizado (énfasis semántico).
`<small>`	Define texto más pequeño.
`<mark>`	Define texto marcado o resaltado.
`<del>`	Define texto eliminado o tachado.
`<ins>`	Define texto insertado o subrayado.
`<sub>`	Define texto en subíndice.
`<sup>`	Define texto en superíndice.

Ir al índice