Etiquetas para citas textuales

Existen etiquetas que sirven para indicar que un fragmento de texto es una cita procedentes de otras fuentes o está relacionado con otros documentos. Es como cuando leemos una noticia vemos un texto que viene copiado literalmene o representa una cita literal de lo dicho por una persona, solemos ver esto entre comillado o con cursiva o ambas cosas a la vez. Esto se indica en HTML5 mediante etiquetas (¡como no!) que visualmente suelen modificar el texto afectado poniéndolo en cursiva. Como siempre estas eqiquetas pueden redefinirse para que muestre el texto con el formato que queramos.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<article>

<p>Hoy en día cada vez usamos más los llamados ebooks, y ¿qué es un <abbr title="Electronic Book">EBook</abbr>? </p>

<blockquote>Los E-books son la versión digital de los tradicionales libros impresos, los cuales pueden ser visualizados a través de un programa o dispositivo diseñado para aquello.</blockquote>

<p>Así es como lo define la web <cite>ConceptoDefinicion</cite>.</p>

Aunque también puede referirse al <q>dispositivo móvil que está diseñado sólo para visualizar libros digitales</q>

</article>

<footer>Autor: <address>Crea Tu Web</address></footer>

</body>

</html>

Etiquetas aplicables a citas y abreviaturas

Pueses escribir esta página en tu editor y guardarla como ejercicio03.htm. Analiza el código y observa las etiquetas usadas. En común tienen que dan iformación sobre el origen el texto del elemento.

Etiquetas	Descripción	Ejemplo
<abbr>	Para definir una abreviatura. Utilliza el atributo title con un texto como valor, que se mostrará al pasar el ratón sobre la abreviatura o acrónimo que tengamos mdo.	Pasa el ratón por la abreviatura CSS.
<address>	Marca información de contacto como el autor o propietarios de un documento, por eso suele usarse en un la sección article y en footer. El estilo por defecto es cursiva y es un elemento tipo bloque: lleva aparejado una salto de linea antes y después.	Autor Crea tu web.
<blockquote>	Marca un bloque de texto cuyo contenido está extraído desde otro lugar. Es un bloque, con una linea en blanco antes y después. Lleva una indentación, o sea, un margen izquierdo mayor que el resto del documento. Puede usar el atributo cite para indicar el origen del contenido, aunque no será visible.	¿Qué es un ebook? Un libro electrónico, libro digital o ciberlibro, conocido en inglés como e-book o eBook, es la publicación electrónica o digital de un libro.
<cite>	Esta etiqueta indica que el texto es un título de un documento o una obra. Habitualmente aparece en cursiva.	Mi libro favorito es Los asquerosos, una inrteresante crítica social.
<q>	Se usa para marcar un texto que es una cita textual de otro. Es un elemento en linea y para destacarse aparece encerrado entrecomillas. También puede señlarse la fuente del texto mediane el atributo cite	Ya sabemos que La principal actividad del W3C es desarrollar protocolos y directrices que aseguren el crecimiento de la Web a largo plazo

Como es habitual estas etiquetas dan al texto un formato o estilo por defecto que puede ser modificado mediante la correspondiente definición de estilo con las reglas CSS. Lo importante para HTML 5 sigue siendo el significado que dan al texto.

No obstante es habitual ver usos fuera de lo recomendado, por ejemplo blockquote, que se suele usar simplemente para indentar el texto. Es cómodo pero para eso podemos usar un bloque div con el margen que queramos.

La etiqueta blockquote, viene muy bien para indentar un bloque de texto pero no es su finalidad. Esta etiqueta se usa para indicar que un texto está extraído de otro lugar. Algo parecido a la etiqueta q.

Solo aclarar que aunque aparentemente estas etiquetas no aportan gran cosa al aspecto del documento, no debemos olvidar que nuestra página debe aparecer en buscadores y los robots de estos buscadores analizan las páginas. Estos robots utilizan las etiquetas para interpretar lo que están escaneando. Así que mejor usar las que ya existen que inventar otras que los robots no conocen, y si se desa mofificar el formato por defecto siempre podemos hacerlo mediante el uso de estilos CSS.

Y ahora vamos a modificar para aplicar estilos que sustituyan a los predefinidos. Necesitamos usar la etiqueta <style>
para redefinir estos elementos:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

abbr{text-decoration: underline double}
blockquote {font-style:italic; width: 400px}
cite{color:blue}
q{font-style:italic}
</style>

</head>

<body>

<article>

<p>Hoy en día cada vez usamos más los llamados ebooks, y ¿qué es un <abbr title="Electronic Book">EBook</abbr>? </p>

<blockquote>Los E-books son la versión digital de los tradicionales libros impresos, los cuales pueden ser visualizados a través de un programa o dispositivo diseñado para aquello.</blockquote>

<p>Así es como lo define la web <cite>ConceptoDefinicion</cite>.</p>

Aunque también puede referirse al <q>dispositivo móvil que está diseñado sólo para visualizar libros digitales</q>

</article>

<footer>Autor: <address>Crea Tu Web</address></footer>

</body>

</html>

Redfiniendo etiquetas con CSS

Aunque no hayas visto aún el tutor CSS, no te será difícil seguir el código fuente de la página modificada: hemos puesto un subrayado doble a la etiqueta de abreviatura, el blockquote está ahora en cursiva y además le definimos una anchura para que no ocupe todo el ancho de la página, el elemento cite ahora es azul y el entrecomillado está en itálica y eliminamos el salto de linea de address.

Los elementos definidos con esta etiqueta mantienen su significado semántico, pero el aspecto que muestran lo hemos personalizado con los estilos CSS.

Las etiquetas de texto tienen más importancia por el significado que aportan que por el estilo que definen.