Formateo del texto en el lenguaje HTML

Formateo del texto

Este texto está en negrita

Este texto está en cursiva

Esto es un _subindice y esto es un ^superindice

---

Elementos de formateo

En el capitulo anterior, aprendiste sobre el atributo style.

HTML también tiene elementos especiales para el texto con una significancia especial.

HTML emplea elementos como <b> y <i> para dar formato al texto que se quiere presentar, por ejemplo en negrita o cursiva.

Los elementos de formateo se diseñaron para diferenciar el texto que es singular por alguna razón:

• <b> - Texto en negrita
• <strong> - Para un texto que es semánticamente importante
• <i> - Texto en cursiva
• <em> - Para un texto que es semánticamente importante
• <mark> - Marca o resalta el texto
• <small> - Empequeñece el texto
• <del> - Indica que el texto ha sido considerado como algo erróneo o inadecuado
• <ins> - Indica que el texto ha sido insertado o añadido
• <sub> - Hace del texto un Subíndice
• <sup> - Hace del texto un Superíndice

---

Los elementos <b> y <strong>

El elemento <b> se emplea para texto que debería visualizarse en negrita, que no tiene importancia extra alguna:

<b>
 Este texto esta en negrita
</b>

El elemento <strong> se emplea para texto de mayor importancia, es decir que es semánticamente “más” importante:

<strong>
 Este texto es de mayor importancia
</strong>

Los elementos <i> y <em>

El elemento <i> se emplea para texto que debería visualizarse en cursiva, que no tiene importancia extra alguna:

<i>
 Este texto esta en cursiva
</i>

El elemento <em> se emplea para distinguir o enfatizar texto que además es semánticamente importante:

<em>
 Este texto esta enfatizado
</em>

Nota: los navegadores muestran <strong> como muestran <b>, y muestran <em> como muestran <i>. Sin embargo, existe una diferencia en el significado de estas etiquetas: <b> e <i> hacen que el texto se muestre en negrita y en cursiva, pero <strong> y <em> implican que el texto es “importante”.

El elemento <small>

El elemento <small> se emplea para texto pequeño:

<h2>
 Formato <small>pequeño</small> en HTML
</h2>

El elemento <mark>

El elemento <mark> se emplea para texto que se desea marcar o resaltar:

<h2>
 Formato <mark>Resaltado</mark> en HTML
</h2>

El elemento <del>

El elemento <del> indica que el texto ha sido considerado como algo erróneo o inadecuado:

<p>
 Mi color favorito es <del>azul</del> rojo.
</p>

El elemento <ins>

El elemento <ins> indica que el texto ha sido insertado o añadido:

<p>
 Mi color <ins>favorito</ins> es el rojo.
</p>

El elemento <sub>

El elemento <sub> hace del texto un Subíndice:

<p>
 Este es un <sub>subíndice</sub>.
</p>

El elemento <sup>

El elemento <sup> hace del texto un Superíndice:

<p>
 Este es un <sup>superíndice</sup>.
</p>

---

Resumen de lo aprendido

Etiqueta	Descripción
<b>	Texto en negrita
<em>	Texto enfatizado o diferenciado
<i>	Texto en cursiva
<small>	Texto pequeño
<strong>	Texto importante
<sub>	Texto como subíndice
<sup>	Texto como superíndice
<ins>	Texto insertado o añadido
<del>	Texto errado o inadecuado, que probablemente se ha sustituido
<mark>	Texto marcado/resaltado

• Usa el atributo style para dar estilo a los elementos HTML
• Usa background-color para el color de fondo
• Usa color para los colores de texto
• Usa font-family para los tipos de fuente del texto
• Usa font-size para los tamaños de texto
• Usa text-align para la alineación del texto