Formato de texto en HTML

En la mayoría de sitios web, el contenido principal consiste en texto. Los elementos que enriqueces un sitio, como imágenes e iconos, suelen girar en torno a este contenido. Por ello es fundamental para nuestro sitio web o blog saber cómo presentar el texto adecuadamente en HTML.

Como ya hemos visto, la etiqueta <p> nos permite diferenciar párrafos. No obstante para presentar algunos formatos de texto, como texto en negrita o en cursiva, es necesario usar otras etiquetas.

Las etiquetas que permiten dar forma al texto en HTML se dividen en dos. Etiquetas de estilo físico y de estilo lógico.


Etiquetas de estilo físico.

Estas etiquetas son las que dan forma al texto de manera específica y exacta, sin dar a los navegadores más opciones.

Etiqueta de texto en negrita.

<b>Este texto se mostrara en negrita</b>

Etiqueta de texto en cursiva.

<i> Este texto se mostrara en cursiva</i>

Etiqueta de texto tachado.

<strike> Este texto se mostrara tachado</strike>

Etiqueta de sub-índice y súper índice.

<p>Después de este texto se muestra un numero en sub-índice₁</p>

<p> Después de este texto se muestra un numero en súper índice ¹</p>

Etiqueta de aumento y reducción de texto.

<big>Este texto se mostrar grande</big>

                De esta misma forma podemos usar una etiqueta <big> dentro de otra.

<big><big>Este texto se mostrara más grande que el anterior</big></big>

Etiqueta de letra monoespaciado. También llamado teletype (teletipo), su función es mostrar las letras sin importar su tamaño con el mismo espacio.

<p>Este es un texto normal</p>

<tt>Este es un texto que se mostrar monoespaciado</tt>

Etiquetas de estilo lógico.

Las etiquetas de estilo lógico son descriptivas y permiten que los navegadores encuentren la mejor manera de presentar el texto.

Etiqueta de texto en negrita.

<strong>Este texto será mostrado en negrita</strong>

Etiqueta de texto en cursiva.

<em>Este texto se mostrara en cursiva</em>

Etiqueta de citas textuales.

<cite>Esta es una cita textual copiada de algún otro autor</cite>

Etiqueta de texto monoespaciado.

<kbd>Este texto se mostrar monoespaciado</kbd>

Etiqueta de texto para una definición.

<p>Palabra o termino</p><dfn>Texto que contiene una definición</dfn>

Etiquetas para mostrar códigos. Estas se usan para mostrar un código de programación.

<code>#main-wrapper{border: 1px solid #ccc;}</code>

O bien

<samp>#main-wrapper{border: 1px solid #ccc;}</samp>

La etiqueta Font

Esta etiqueta nos permite dar forma al texto de manera más amplia de dos maneras básicas.

<font>Texto que se mostrara según los parámetros de la etiqueta</font>

1. El tamaño del texto.

<font size=”13”>Este es el texto al que buscamos darle forma mediante la etiqueta font</font>

2. Cambiando color al texto.

<font size=”13px” color=”red”> Este es el texto al que buscamos darle forma mediante la etiqueta font </font>

Un último detalle en cuanto al manejo del texto en HTML es la etiqueta <pre> la cual nos permite mostrar el texto tal cual lo escribimos sin etiquetas adicionales.

<pre>Este texto será mostrado tal cual lo escribamos</pre>