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:
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:
Figura 3.7 Resultado de estructurar y marcar el texto original
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 |
|
| 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 |
|
| 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:
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 |
|
| 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:
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.