Completo tutorial de HTML - Formateando el texto

Además de todo lo relativo a la organización de los párrafos, uno de los
aspectos primordiales del formateo de un texto es el de la propia letra. Resulta
muy común y práctico presentar texto resaltado en negrita, itálica y otros.
Paralelamente el uso de índices, subíndices resulta vital para la publicación de
textos cient&iaacute;ficos. Todo esto y mucho más es posible por medio del HTML
a partir de multitud de etiquetas entre las cuales vamos a destacar algunas.

---

Negrita

---

Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas <b> y
</b> (bold). Esta misma tarea es desempeñada por <strong> y </strong> siendo
ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razon de
esfuerzo.

---

Escribiendo un código de este tipo:

---

<b>Texto en negrita</b>

---

Obtenemos este resultado:

---

Texto en negrita 

|| Nota: ¿Qué diferencia hay entre  <b> y <strong>?

---

Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que
las hace distintas. La etiqueta <b> indica negrita, mientras que la etiqueta
<strong> indica que se debe escribir resaltado. El HTML lo interpretan los
navegadores según su criterio, es por eso que las páginas se pueden ver de
distinta manera en unos browsers y en otros. La etiqueta <H1> quiere decir "encabezado
de nivel 1", es el navegador el responsable de formatear el texto de manera
que parezca un encabezado de primer nivel. En la práctica los encabezados de
Internet Explorer y Netscape son muy parecidos (tamaño de letra grande y en
negrita), pero otro navegador podría colocar los encabezados con subrayado
si le pareciese oportuno.

---

La diferencia entre <b> y <strong> se podrá entender ahora. Mientras que <b>
significa simplemente negrita y todos los navegadores la interpretarán como
negrita, <strong> es una etiqueta que significa que se tiene que resaltar
fuertemente el texto y cada navegador es el responsable de resaltarlo como
desee. En la práctica <strong> coloca el texto en negrilla, pero podría ser
que un navegador decidiese resaltar colocando negrilla, subrayado y color
rojo en el texto. ||

---

Itálica

---

También en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y
otra un poco más larga: <em> y </em>. En este manual, y en la mayoría de las
páginas que veréis por ahí, os encontraréis con la primera forma sin duda más
sencilla a escribir y a acordarse.

---

He aquí un ejemplo de texto en itálica:

---

<i>Texto en itálica</i>

---

Que da el siguiente efecto:

---

Texto en itálica

---

Subrayado

---

El HTML nos propone también para el subrayado el par de etiquetas: <u> y </u>
(underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha
precaución dado que los enlaces hipertexto van, a no ser que se indique lo
contrario, subrayados con lo que podemos confundir al lector y apartarlo del
verdadero interés de nuestro texto.

---

Subíndices y supraíndices

---

Este tipo de formato resulta de extremada utilidad para textos científicos. Las
etiquetas empleadas son:

---

^y para los supraíndices

---

_y para los subíndices

---

Aquí tenéis un ejemplo:

---

La ¹³CC₃H₄ClNOS es un heterociclo alergeno
enriquecido

---

El resultado:

---

La 13CC3H4ClNOS es un heterociclo alergeno
enriquecido

---

Anidar etiquetas

---

Todas estas etiquetas y por supuesto el resto de las vistas y que veremos más
adelante pueden ser anidadas unas dentro de otras de manera a conseguir
resultados diferentes. Así, podemos sin ningún problema crear texto en negrita e
itálica embebiendo una etiqueta dentro de la otra:

---

<b>Esto sólo está en negrita <i>y esto en negrita e itálica</i></b>

---

Esto nos daria:

---

Esto sólo estáa en negrita y esto en negrita e itálica 

|| Consejo: Cuando anides etiquetas HTML hazlo correctamente. Nos referimos a que si abres etiquetas dentro de otra más principal, antes de cerrar la etiqueta principal cierres
las etiquetas que hayas abierto dentro de ella. 
 
Debemos evitar códigos como el siguiente:

---

<b>Esto está en negrita e <i>itálica</b></i>

---

En favor de códigos con etiquetas correctamente anidadas:

---

<b>Esto está en negrita e <i>itálica</i></b>

---

---

Esto es muy aconsejable, aunque los navegadores entiendan bien las etiquetas
mal anidadas, por dos razones:

~1) Sistemas como XML no son tan permisivos con estos errores y puede que
en el futuro nuestras páginas no funcionen correcamente.
~1) A los navegadores les cuesta mucho tiempo de procesamiento resolver
este tipo de errores, incluso más que construir la propia página y debemos
evitarles que sufran por una mala codificación.

||