Etiquetas para resaltar texto en HTML

  • Por
  • 21 de junio de 2008
  • Valoración:
  • 4 Comentarios
  • HTML
Algunas etiquetas que pueden servir para resaltar texto en HTML, como subrayado, tachado, encabezamientos y formateos de texto de párrafo, como citas, trozos de código, etc.
HTML tiene unas cuantas herramientas para resaltar texto que vamos a ver en este artículo, que ofrece algunos detalles prácticos, aunque también teóricos, del lenguaje de etiquetas para la creación de páginas web. Para ver otros artículos prácticos consultar el taller de HTML.

Como debemos saber, HTML es un lenguaje que sirve para crear páginas web. Es especialmente indicado para escribir los contenidos de las páginas, aunque también tiene una buena gama de etiquetas para formatear texto y presentarlo de una manera atractiva o simplemente clara. Ya publicamos un completo manual de HTML, con unas explicaciones detalladas sobre la creación de páginas web, pero ahora vamos a ver un compendio de etiquetas que sirven especialmente para formatear y destacar texto, pues algunas de ellas no llegamos a verlas en el manual, por tratarse de etiquetas poco utilizadas.

Nota: antes de continuar es importante señalar que el formateo de texto ahora se hace con CSS, que permite trabajar de una manera mucho más detallada, cómoda y completa con el estilo de las páginas web.

Pues veamos las etiquetas para destacar texto:

<B> o <STRONG>
Las más conocidas y utilizadas son las negritas, que simplemente ponen el texto con una anchura mayor, como más resaltado.

Este es el efecto de una negrita

<I> o <EM>
Las itálicas o cursivas, que sirven para hacer que el texto se incline a un lado.

Este texto está itálica o bien cursiva

<U>
Esta etiqueta sirve para que se subraye el texto, apareciendo una línea por debajo del mismo. Aunque en HTML 4 esta etiqueta se ha marcado como obsoleta o no incluida en las especificaciones, todos los navegadores continúan entendiéndola.

Este texto está subrayado

<STRIKE>
Esta etiqueta no es muy conocida y tampoco muy utilizada. Sirve para que el texto aparezca tachado, es decir, con una línea por encima del texto. Esta etiqueta es muy útil cuando actualizamos una información que aparece en una página y la sustituimos por otra. En vez de borrar la anterior información la podemos tachar, para que los lectores puedan comprobar que la página se encuentra siempre actualizada y en revisión. Le pasa lo mismo que a la etiqueta <u>, que en la especificación de HTML 4 no está incluida. Sin enbargo, todos los navegadores la entienden y renderizan perfectamente.

Este texto está tachado

Encabezamientos <H1> … <H6>
Las etiquetas de encabezamientos, o headings en inglés, sirven para destacar un texto, pero no las podemos utilizar en cualquier caso, porque un encabezamiento siempre indica un titular o la apertura de una nueva sección con un título. Las tenemos que utilizar entonces para estructurar nuestros documentos en secciones y subsecciones y titular cada una de ellas con un nivel adecuado. <H1> debería haber uno en el encabezado principal del documento, pero luego podríamos tener varios <H2> y dentro de estos algunos <H3>, si es que los necesitamos. Y así sucesivamente.

Este es un encabezado h3

Formatos de párrafos para destacar textos

Existen algunas etiquetas para destacar párrafos enteros y darles um formato específico. Algunos ejemplos son:

<CODE> o <KBD>
Sirve para escribir un código fuente de un lenguaje de programación. Simplemente coloca una fuente de un tipo como courier, en el que todas las letras tienen la misma anchura.

var InstrumentoMusical = new Class({
initialize: function(tipo){
this.tipo = tipo;
}
});

<TT>
Texto de Teletipo. Que crea un estilo como el de las antiguas máquinas de teletipo, que transmitían información con caracteres.

Este texto es tipo teletipo.
Se puede fijar el tipo de letra que se utiliza.
En general con courier.

<CITE>
Sirve para colocar texto de cita, texto dicho por otra persona. Esta etiqueta generalmente pone el texto en cursiva, pero otros navegadores podrían interpretarla de otras maneras.

Sólo sé que no sé nada!

<BLOCKQUOTE>
Esta etiqueta es bastante útil, porque crea un margen tanto a la izquierda como la derecha, lo que produce un efecto como si fuera un fragmento extraído de otro lugar o que sirva para comentar la información anterior.

Este es un párrafo identado, de manera que se muestra con márgenes a ambos lados. Para que se vean los márgenes tengo que escribir bastante texto. Es una buena utilidad para destacar un trozo del texto.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

jhon bairon

24/10/2008
tengo 15 años y soy de Colombia, me gustaría crear un tipo de pagina web que sirva para buscar amigos tales como facebook, hi5, e-friends, etc., pero todas estas recopiladas en una sola para facilitar el acceso a todas o cada una de ellas.
si tienen una solución mi e-mail es yonbabolivar@hotmail.com, gracias

.oul

03/3/2009
nrmjyui

MARCELA

02/2/2010
HTML
ME PARECEMUY BUENA TODA LA INFORMACION QUE PUBLICAN, Y MUY FACIL DE ENTENDER, SOY AMA DE CASA Y MI CONOCIMIENTO ES MUY POCO, PERO ESTA EXPLICACION ME AYUDA BASTANTE PARA ENTENDER

Yoel

20/9/2010
Resaltar Texto
hola amigos, quisiera saber si hay alguna forma similar de hacer lo que hace no se si google o el mismo codigo html o javascript, que es cuando yo busco un sitio web y cuando le doy version html me salen las palabras que puse en el buscador resaltadas en colores...

mi idea es, que cuando yo en algun lugar (puede ser una pagina web) pegue un texto entonces una serie de palabras definidas por mi que se encuentren en ese texto que yo copie se marquen con un color determinado...

saludos, aprecio cualquier ayuda...

Compartir