Ver índice de contenidos del libro

3.2. Marcado básico de texto

Una vez estructurado el texto en párrafos y secciones, el siguiente paso es el marcado de los elementos que componen el texto. Los textos habituales están formados por elementos como palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc. HTML proporciona varias etiquetas para marcar cada uno de los diferentes tipos de texto.

Entre las etiquetas más utilizadas para marcar texto se encuentran <em> y <strong>. La definición formal de estas dos etiquetas se muestra a continuación:

Etiqueta <em>
Atributos comunes básicos, internacionalización y eventos
Atributos propios -
Tipo de elemento En línea
Descripción Realza la importancia del texto que encierra
Etiqueta <strong>
Atributos comunes básicos, internacionalización y eventos
Atributos propios -
Tipo de elemento En línea
Descripción Realza con la máxima importancia el texto que encierra

La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del texto. La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la página. Ejemplo:

<html>
 
<head>
<title>Ejemplo de etiqueta em y strong</title>
</head>
 
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de texto 
como <em>muy importantes</em> y otros segmentos como <strong>los 
más importantes</strong>.</p>
</body>
 
</html>

Por defecto, los navegadores muestran los elementos <em> en cursiva para hacer evidente su importancia y muestran los elementos <strong> en negrita, para indicar que son los más importantes:

Ejemplo de uso de las etiquetas em y strong

Figura 3.6 Ejemplo de uso de las etiquetas em y strong

Ejercicio 2

Estructurar y marcar el siguiente texto extraído de la Wikipedia para que el navegador lo muestre con el aspecto de la siguiente imagen:

Resultado de estructurar y marcar el texto original

Figura 3.7 Resultado de estructurar y marcar el texto original

Descargar texto original

Ver solución

HTML también permite marcar de forma adecuada las modificaciones realizadas en el contenido de una página. En otras palabras, HTML permite indicar de forma clara el texto que ha sido eliminado y el texto que ha sido añadido a un determinado texto original. Las etiquetas utilizadas son <ins> y <del>, cuya definición formal es la siguiente:

Etiqueta <ins>
Atributos comunes básicos, internacionalización y eventos
Atributos propios
  • cite = "url" - Indica la URL de la página en la que se puede obtener más información sobre el motivo por el que se realizó la modificación.

  • datetime = "fecha" - Especifica la fecha y hora en la que se realizó el cambio

Tipo de elemento Bloque y en línea
Descripción Se emplea para marcar una modificación en los contenidos originales consistente en la inserción de un nuevo contenido
Etiqueta <del>
Atributos comunes básicos, internacionalización y eventos
Atributos propios
  • cite = "url" - Indica la URL de la página en la que se puede obtener más información sobre el motivo por el que se realizó la modificación.

  • datetime = "fecha" - Especifica la fecha y hora en la que se realizó el cambio

Tipo de elemento Bloque y en línea
Descripción Se emplea para marcar una modificación en los contenidos originales consistente en el borrado de cierto contenido

Las dos etiquetas cuentan con los mismos atributos específicos, que opcionalmente se pueden añadir para proporcionar más información sobre los cambios realizados. El atributo cite se emplea para indicar la dirección de un documento externo en el que se puede encontrar más información relacionada con la inserción o el borrado de texto. El atributo datetime puede utilizarse para indicar la fecha y la hora en la que se realizó cada cambio.

Ejemplo:

<html>
<head><title>Ejemplo de etiqueta ins y del</title></head>
<body>
 
<h3>Ejemplo de etiqueta ins y del</h3>
 
<p>El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de <del datetime="20091025" cite="http://librosweb.es/xhtml/capitulo_3/marcado_basico_de_texto.html">marcado de hipertexto</del> <ins datetime="20091026" cite="http://librosweb.es/xhtml/capitulo_3.html"> marcas hipertextuales</ins>) es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto.</p>
 
</body>
</html>

Los navegadores muestran el ejemplo anterior de la siguiente manera:

Ejemplo de uso de las etiquetas ins y del

Figura 3.8 Ejemplo de uso de las etiquetas ins y del

Por defecto, el texto eliminado (marcado con la etiqueta <del>) se muestra tachado de forma que el usuario pueda identificarlo fácilmente como un texto que formaba parte del texto original y que ya no tiene validez. El texto insertado (marcado con la etiqueta <ins>) se muestra subrayado, de forma que el usuario pueda identificarlo como un texto nuevo que no formaba parte del texto original.

Por otra parte, en muchos tipos de páginas (artículos, noticias) es habitual citar literalmente un texto externo. HTML define la etiqueta <blockquote> para incluir citas textuales en las páginas web. La definición de la etiqueta HTML con el nombre más largo se muestra a continuación:

Etiqueta <blockquote>
Atributos comunes básicos, internacionalización y eventos
Atributos propios
  • cite = "url" - Indica la dirección de la página web original de la que se extrae la cita

Tipo de elemento Bloque
Descripción Se emplea para indicar que el texto que encierra es una cita textual de otro texto externo

Al igual que <ins> y <del>, la etiqueta <blockquote> permite indicar mediante el atributo cite la dirección de un documento del que se ha extraído la cita. Ejemplo:

<html>
<head><title>Ejemplo de etiqueta blockquote</title></head>
 
<body>
<p>Según el W3C, el valor del 
atributo <em>cite</em> en las etiquetas <strong>blockquote</strong> tiene el 
siguiente significado:</p>
 
<blockquote cite="http://www.w3.org/TR/html401/struct/text.html">"El valor de este atributo 
es una dirección URL que indica el documento original de la cita."</blockquote>
</body>
 
</html>

El aspecto que muestra el ejemplo anterior en cualquier navegador es el siguiente:

Ejemplo de uso de la etiqueta blockquote

Figura 3.9 Ejemplo de uso de la etiqueta blockquote

Para indicar de forma clara que el texto es una cita externa, los navegadores muestran por defecto el texto del elemento <blockquote> con un gran margen en la parte izquierda.