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.
1. <em> y <strong>
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.
Veamos un ejemplo de ello:
<html> <head> <title>tupacbruch.com curso html</title> </head> <body> <h1>Ejemplo de etiquetas em y strong</h1> <p>El lenguaje HTML permite marcar algunos segmentos de texto como <em>destacados</em> y otros segmentos como <strong>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:
Ejercicio:
Estructurar y marcar los primeros dos párrafos del siguiente artículo de Wikipedia ↗. Para que el navegador lo muestre con el aspecto de la siguiente imagen, siendo qué Lionel Andrés Messi Cuccittini va en negrita; y Dream Team del Balón de Oro en cursiva:
Resultado:
<html>
<head>
<title>Lionel Messi</title>
</head>
<body>
<h1>Lionel Messi</h1>
<p><strong>Lionel Andrés Messi Cuccittini</strong> (Rosario, Santa Fe; 24 de junio de 1987),
conocido como Leo Messi, es un futbolista argentino que juega como delantero o centrocampista
en el Paris Saint-Germain de la Ligue 1 de Francia. Es internacional con la selección de Argentina,
equipo del que es capitán y máximo goleador histórico.</p>
<p>Considerado con frecuencia el mejor jugador del mundo y uno de los mejores de todos los tiempos,
es el único futbolista en la historia que ha ganado, entre otras distinciones,
siete veces el Balón de Oro, los cuatro primeros de forma consecutiva;
además de recibir seis Botas de Oro, un FIFA World Player, y un The Best FIFA.
En 2020, se convirtió en el primer futbolista en recibir un premio Laureus,
además de ser incluido en el <em>Dream Team del Balón de Oro</em>.
</p>
</body>
</html>2. <ins> y <del>
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>Ejemplos de etiqueta ins y del</title></head><body> <h3>Veamos un ejemplo de etiqueta ins y del</h3> <p>Citaré a Bender de futurama. Pues, crearé mi propia cita <del datetime="20220110" cite="http://tupacbruch.com/"> con juegos de azar y mujerzuelas</del> <ins datetime="20220110" cite="http://tupacbruch.com"> con etiquetas del e ins</ins> a modo de ejemplo. </p> </body></html>
Los navegadores muestran el ejemplo anterior de la siguiente manera:
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.
3. <blockquote>
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>
<h1>Ejemplo de Blockquote</h1>
<p>En HTML, el 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:
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.
