Programar texto en HTML

Por un lado explicaremos cómo hacer los formatos de texto en HTML para cosas interesantes y útiles (negrita, cursiva, tachado, subrayado, superíndice, subíndice, texto más pequeño, texto más grande,…) y por otro pondremos a vuestra disposición códigos que nos siguen sido útiles para otras muchas cosas.
 
Formatos de texto HTML: negrita, cursiva, tachado, subrayado, superíndice, subíndice, texto más pequeño y texto más grande
Vamos a ver una serie de etiquetas y atributos básicos para la creación de páginas webs. No entraremos a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente indicaremos las que han sido más utilizadas en el pasado, aunque algunas se consideren deprecated (no recomendadas).
Las primeras etiquetas que veremos son las que se usaban en el pasado para dar formato al texto. Para ello tenemos una serie de etiquetas que escribimos en HTML envolviendo la palabra o el texto y que transforman ese texto en el formato que nosotros le hayamos querido dar. Algunas de estas etiquetas están no recomendadas (deprecated) por lo que no debemos emplearlas. Otras etiquetas han adquirido un nuevo significado en las últimas versiones de HTML, pero no vamos a entrar a definir este nuevo significado. Debido a su amplia difusión en el pasado conviene conocer los que fueron usos tradicionales de estas etiquetas, a medida que avances en el conocimiento de HTML podrás comprobar cómo para algunas etiquetas se consideran hoy día nuevos significados.

ETIQUETA USO OBSERVACIONES ETIQUETA USO OBSERVACIONES
<b>…</b> Poner texto en negrita Puede ser sustituido por CSS <strong>…</strong> Poner texto en negrita Puede ser sustituido por CSS
<i>…</i> Poner texto en cursiva Puede ser sustituido por CSS <em>…</em> Poner texto en cursiva Puede ser sustituido por CSS
<u>…</u> Poner texto subrayado Deprecated. Sustituir por CSS <small>…</small> Poner texto más pequeño Puede ser sustituido por CSS
<big>…</big> Poner texto más grande Puede ser sustituido por CSS <sub>…</sub> Poner texto subíndice Puede ser sustituido por CSS
<sup>…</sup> Poner texto superíndice Puede ser sustituido por CSS <strike>…</strike> Poner texto como tachado Deprecated. Sustituir por CSS
<s>…</s> Poner texto como tachado Deprecated. Sustituir por CSS <del>…</del> Poner texto como tachado Puede ser sustituido por CSS

Como verás, algunas de las etiquetas que vamos a explicar están obsoletas (deprecated en inglés). Estas etiquetas en principio no deben de ser usadas porque dejarán de existir en las nuevas versiones a partir de HTML 5 y es posible que los navegadores dejen de reconocerlas en un futuro. Los motivos para incluirlas en este curso son porque han sido etiquetas muy populares en el pasado y te puedes encontrar muchas páginas webs que hacen uso de ellas. Además son etiquetas reconocidas por prácticamente todos los navegadores actuales y son una buena forma de introducirnos en los lenguajes propios de desarrollos webs desde el punto de vista didáctico. Una vez se entiendan estos conceptos, es más fácil abordar aspectos más avanzados como las hojas de estilo CSS.
 
Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar en su interior. Por ejemplo:
<b>Este texto aparecerá escrito en negrita</b> pero este no.
 
Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto:
<b><i>Este texto aparecerá escrito en negrita y en cursiva</i></b>.
 
Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más interior a la más exterior. Veamos las etiquetas que hemos citado en la tabla anterior.
 
NEGRITA
Existen dos etiquetas que hacen que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es en principio indiferente y aunque pueda atribuírseles un significado diferente a cada una de ellas no vamos a prestarle atención a esto ahora. La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Normalmente se preferirá usar técnicas CSS en lugar de esta etiqueta pero es una etiqueta que debemos conocer.
 
CURSIVA
Para escribir un texto en cursiva se ha utilizado mucho en el pasado la etiqueta <i> y que por supuesto debes cerrarla con la etiqueta </i>. También se ha utilizado la etiqueta <em> y que también se debe cerrar con la etiqueta </em>. Como en el caso de la negrita, aunque podrían atribuírseles distintos significados no vamos a prestarle atención a esta cuestión ahora. Aquí presentamos un ejemplo:
Esta palabra la vamos a poner en cursiva con la etiqueta <i> y esta otra también con la etiqueta <em>.
 
SUBRAYADO (DEPRECATED)
Para que la palabra o el texto quedara subrayado se usó en el pasado el rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta </u>.
<u>Así subrayaríamos una frase importante</u> para que nos diera el resultado de que Así subrayaríamos una frase importante.
Está etiqueta está obsoleta (deprecated), lo que significa que ya no se recomienda su uso. Para lograr el resultado deseado se deben usar hojas de estilo CSS.
 
PALABRAS MÁS GRANDES O MÁS PEQUEÑAS
Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados (los encabezados son etiquetas especiales que explicaremos más adelante). La variación de tamaño se podía conseguir gracias a las etiquetas <big> para agrandar el texto y <small> para disminuirlo.
Cada vez que se escribe una etiqueta big, se hace el texto un punto más grande. Estas etiquetas también se podían combinar por lo que si escribimos dos veces la etiqueta <big> haremos crecer la palabra dos puntos.
Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>.
No recomendamos su uso ya que las nuevas versiones de HTML no van a admitir esta etiqueta. La modificación del tamaño del texto se debe hacer a través de técnicas CSS.
 
SUPERÍNDICES Y SUBÍNDICES
Mediante HTML también podemos escribir expresiones con símbolos matemáticos. Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un subíndice y <sup> será la etiqueta para un superíndice. Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos matemáticos como esta: H<sub>2</sub>O, con resultado H2O, o números elevados a potencias 7<sup>3</sup>, con resultado 73. Los subíndices y superíndices con estas etiquetas pueden ser sustituidos por técnicas de CSS, pero muchas personas prefieren usar estas etiquetas.
 
TEXTO TACHADO
Existen tres etiquetas que se han venido usando para conseguir que un texto quede tachado. Hablamos de las etiquetas <strike>, <s> y <del>. Todas ellas ofrecen el mismo resultado. Puedo proceder a tachar una palabra <strike>así</strike>, <s>así</s> o <del>así</del> y todas tienen como resultado el mismo: así, así y así.
La etiqueta strike está “deprecated”, lo que significa que ya no se recomienda su uso. La etiqueta s también fue “deprecated”, aunque a partir de HTML 5 se ha re-definido su significado. Para lograr el tachado de un texto se recomienda usar técnicas CSS (hojas de estilo).
 
Con esto terminamos el tutorial. Espero que les sirva. Saludos.

Volver al menú de Páginas Web Volver al menú de Internet Volver a Inicio

* Base de información obtenida de diferentes lugares web y de la experiencia personal.

Anuncios