Formateando el texto

Vemos como colocar negritas, itálicas, subrayados, subíndices y supreíndices.

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í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.

Pero antes de comenzar cabe hacer una reflexión sobre por qué son interesantes estas etiquetas y se siguen usando, a pesar que están entrando prácticamente en el terreno de CSS, ya que en la práctica están directamente formateando el aspecto de las fuentes. Son importantes porque las etiquetas en si no están para definir un estilo en concreto, sino una función de ciertas palabras dentro de un contenido. Por ejemplo, las negritas quieren decir que algo tiene más fuerza o importancia dentro de un texto y una itálica se puede usar para un texto que citado o algún énfasis particular. En cuanto a subíndices y superíndices todavía es más claro, ya que éstos especifican cosas que tiene que ver con el contenido y no con la presentación.

Negrita

Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas B y su cierre (bold). Esta misma tarea es desempeñada por STRONG y su cierre, siendo ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razón de esfuerzo.

Escribiendo un código de este tipo:

<b>Texto en negrita</b>

Obtenemos este resultado:

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 con fuerza. 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 los navegadores habituales 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 negrita, 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 y su cierre (italic) y otra un poco más larga: EM y su cierre. 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:

Subrayado

El HTML nos propone también para el subrayado el par de etiquetas: 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.

Además, cabe decir que la etiqueta U se ha quedado obsoleta, debido a que es algo que realmente se debe hacer del lado del CSS, al ser básicamente un estilo.

Subíndices y supraíndices

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

<sup> y </sup> para los supraíndices
<sub> y </sub> para los subíndices

Aquí tenéis un ejemplo:

La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido

El resultado:

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:

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.
  2. 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.

Todo lo que se ha visto hasta el momento en el Manual de HTML se puede ver en un vídeo para aprender visualmente. Si te interesa puedes acceder al Videotutorial de HTML - Parte 1, documento básico y formato de texto.

Autor

Rubén Alvarez

Rubén es doctor en química y programador aficionado con experiencia en PHP.

Compartir

Comentarios

sara

11/2/2002
A la hora de formatear un párrafo se puede alinear a la derecha, izquierda y centrar. ¿Por qué no se puede justificar? ¿no existe esa etiqueta? La apariencia del artículo que estoy leyendo quedaría mucho mejor si los párrafos estuviesen justificados.

RESPUESTA:

Que se vea mejor con un justificado, para mi, es una opinión. De hecho, muchos gurus del diseño y la usabilidad piensan lo contrario.

De todos modos, si que se puede justificar un texto, lo que pasa es que esta justificación solo se verá en los navegadores más modernos.

Las Hojas de estilo en cascada (CSS) hacen posible el justificado. Para ello se utiliza el atributo text-align: justify. Tenemos un manual de CSS donde explicamos la utilización de las hojas de estilo.

También puedes probar con el atributo align tradicional del HTML, igualándolo a justify (align="justify"), pues creo que los navegadores más modernos si que lo tendrán en cuenta.

Daniel

01/4/2007
Hola en realidad estoy comenzando a trabajar con html y este manual me esta siendo de gran ayuda pero en este vinculo encontraras unu notepad que viene identado por bloques lo que facilitara el aprendizaje y posibles errores de codigo.
By

diego

01/10/2008
la ingresa no "INGRESA".solo alinea a la derecha, isquierda, al centro. pero no Justifica.
y yo necesito eso por eso busco en paginas y no encuentro.
trabajo con "Galeon"

gif

27/7/2010
Error y resumen
bueno el el anterior pos se nos explico algo hacerca del formatiado del texto y de algunas funciones como lo son <sub> con su respectiva </sub> aunque reo que hay un pequeño error


en el parrafo cuando se menciona :

La 13CC3H4ClNOS es un heterociclo alergeno enriquecido


ya que el 13 se muestra como una elevación y no como un subindice espero lo puedan corregir un saludo

Katzujari

22/12/2010
Re: Texto Justificado
Puies no recuerdo muy bien, pero me parece que para justificar el texto solo hace falta usar la etiqueta <div> xon su cierre corr3espondiente

<div align='justify'> Aquí el texto bla bla bla</div>

Y el texto quedará justificado, aunque desconozco completamente si funcione para todos los navegadores.

eliu NICOLAS

25/5/2012
exelente
hola les escribo para decirles que me a parecido muy util el manual de html felicitaciones..saludos !!