Antes de entrar de lleno en los temas relacionados con la formatación del texto, es conveniente precisar algunos de los conceptos que rigen su uso.
Marcas de texto lógicas y tipográficas
HTML es un sistema de marcado cuya función es definir la estructura y aspecto de un documento. Debemos profundizar esta definición, que sin más aclaraciones no diría mucho, a fin de comprender mejor los conceptos de marcas lógicas y tipográficas. Una marca tipográfica tiene como función formatear visualmente un documento, es decir aplicarle negritas, cursivas, subrayarlo, etc.
Una marca lógica, por el contrario, tiene como función definir una estructura independientemente del aspecto. Es decir, independientemente del modo en que el navegador interpretará visualmente el marcado.
Para comprender mejor esta diferencia, tomemos dos elementos que sirven para formatear texto:
<ADDRESS></ADDRESS>
Se trata de una marca lógica que representa la información "dirección" en el documento. Dicho de otro modo, cuando estamos ante una dirección, una dirección de correo electrónido o un número de teléfono, según las reglas del HTML, hay que insertar esta marca lógica.
<I></I>
Se trata de una marca tipográfica que indica que el texto comprendido en el elemento va en cursiva. Es, por tanto, una marca cuya función es dar un determinado aspecto al documento y no marcar una estructura.
Veamos ahora juntos cuál es el resultado visual de su utilización en el interno de un documento web:
webmaster@html.it
webmaster@html.it
Sin mirar la fuente del documento, ¿podrías averiguar qué texto ha sido formateado con ADDRESS y cuál con I?. Visualmente ambas marcas (la primera es ADDRESS y la segunda I) producen el mismo resultado (el texto en cursiva). Sin embargo, desde el punto de vista de la estructura del documento, sólo el primero (ADDRESS) indica que dentro hay una dirección, mientras que el segundo no proporciona ninguna información de este tipo.
La marca FONT y el nuevo estándar HTML5
HTML 5 es el estándar que, desde hace casi dos años, rige las suertes del lenguaje de marcado más popular del mundo. Sin hacer juicios de valor sobre las novedades del nuevo estándar, queremos subrayar que el W3C ha desaconsejado el uso de la marca FONT en la formatación del texto en HTML. Así, los navegadores leen todavía esta marca, pero su uso está rigurosamente prohibido por el nuevo estándar.
En esta lección no tendremos en cuenta las indicaciones del W3C y explicaremos el uso de las marcas clásicas del HTML 5.
Formatear títulos de <H1> ad <H6>
La marca <Hn> (donde n puede ser cualquier número comprendido entre 1 y 6) se emplea para definir el estilo de los encabezados de la página, dándoles más o menos relieve según el número correspondiente. Como hemos señalado, los números van del 1 al 6, siendo más importantes los números más bajos que los altos. Visualmente, esta diversa importancia se plasma en la diferente dimensión del texto, como en el siguiente ejemplo:
Además de definir el estilo de los encabezados, la marca <Hn> introduce separaciones de párrafo.
<FONT>
La marca tipográfica FONT es una de las más utilizadas y frecuentes en el actual web publishing. En la sección Impostar el fondo del documento (elemento BODY), hemos visto que el atributo TEXT da un color único a todo el texto del documento. La marca FONT tiene, en parte, una función similar, aunque es mucho más amplia y conceptualmente diversa.
La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto comprendido dentro quedaría formateado tal y como estuviera indicado. Sin embargo, conceptualmente la marca FONT ha sido concebida para definir partes limitadas de texto. Por otro lado, mientras TEXT determina tan sólo en color del texto, la marca FONT puede definir el tipo utilizado, así como su tamaño y color.
Aquí tienes la sintaxis correcta de la marca:
<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT>
El atributo FACE="arial" indica el tipo que se visualizará; SIZE=5 el tamaño del tipo, que puede estar comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7); COLOR=red indica el color del texto (que puede expresarse asimismo en valores hexadecimales).
<B>, <I>, <U>
<B>, <I>, <U> son tres de las marcas de formatación tipográfica más usadas del HTML. Todas ellas deben constar de apertura y cierre:
<B> Texto en negrita </B>
El texto comprendido entre estas marcas queda formateado en negrita (la B corresponde al inglés BOLD).
<I> Texto en cursiva </I>
El texto comprendido entre estas marcas queda formateado en cursiva (la I corresponde al inglés ITALIC)
<U> Texto subrayado </U>
El texto comprendido entre estas marcas queda subrayado aun sin ser un enlace (la U corresponde al inglés UNDERLINE).
Existe también la marca STRIKE para el texto tachado:
<STRIKE> Texto tachado </STRIKE>
<SUP> y <SUB>
Estas dos marcas tipográficas crean respectivamente superíndices(SUP), en los que el texto está en posición ligeramente superior respecto al texto normal, y subíndices (SUB), posición ligeramente inferior respecto al texto normal. Es posible anidar diversas marcas a fin de obtener efectos de superposición sucesiva. Estos elementos se usan, sobre todo, en las notas o en las fórmulas matemáticas.
La sintaxis correcta es:
HTMLpoint <SUP>©</SUP> es una marca registrada
HTMLpoint <SUB>©</SUB> es una marca registrada
Texto preformateado
HTML lee el texto, obviamente, de izquierda a derecha y, sin ningún tipo de formatación, cambia de renglón al final de cada línea sin interrupciones. La formatación que examinamos en esta lección indica al navegador dónde saltar de línea, qué tipo de carácter utilizar, qué palabras resaltar, etc. A menudo, sin embargo, hay que importar un documento creado con un editor de texto normal sin formatear, tal y como ha sido creado. Para ello, HTML prevé las marcas de texto preformateado, las cuales no leen ni interpretan algunas marcas de HTML ni los caracteres especiales:
<XMP> Texto para formatear </XMP>
<PRE> Texto para formatear </PRE>
Ambas marcas tienen la misma función, aunque el estándar de HTML 4 prevé el uso de XMP y no de PRE.
Breve descripción de las marcas lógicas
Al inicio de la lección, hemos definido la diferencia entre marcas tipográficas y lógicas. Ahora citamos las marcas lógicas más interesantes y su correspondiente utilización en HTML:
<ADDRESS>
Se emplea para indicar información relacionada con cualquier tipo de dirección (e-mail, teléfono, etc.).
<BLOCKQUOTE>
Se usa en las citas textuales que ocupan más de dos o tres líneas.
<CITE>
Indica la fuente de la cita.
<CODE>
Se utiliza para formatear líneas de códigos de programación.
<DFN>
El texto comprendido dentro es una definición.
<EM>
Da énfasis al texto comprendido dentro.
<KBD> y <SAMP>
Poco utilizados. Indican cosas que el ordenador debería decir al usuario y viceversa, según un típico concepto de Unix.
<STRONG>
Denota énfasis fuerte.
<VAR>
Asociado a CODE, indica las variables de programación.
Comenta: