En este artículo aprenderás los elementos HTML que se utilizan para citar textos de otras personas distintas a las del autor del documento, abreviaturas o títulos de obras.
HTML para citas cortas <q>
El elemento HTML <q> se utiliza para citas cortas. Los navegadores muestran, generalmente, el contenido del texto entre las etiquetas <q> y </q> delimitado por los símbolos: « y »
Ejemplo:
<p>Albert Einstein dijo: <q>Si buscas resultados distintos, no hagas siempre lo mismo.</q></p>
Vista en el navegador:
Albert Einstein dijo: «Si buscas resultados distintos, no hagas siempre lo mismo.»
HTML para citas largas <blockquote>
El elemento HTML <blockquote> se utilizar para citar texto largos. Los navegadores, generalmente sangran o indentan el texto contenido entre las etiqetas <blockquote> y </blockquote>
Ejemplo:
<blockquote cite="http://es.wikipedia.org/wiki/Organizaci%c3%b3n_de_las_Naciones_Unidas"> La Organización de las Naciones Unidas (ONU) o simplemente Naciones Unidas (NN. UU.) es la mayor organización internacional existente. Se define como una asociación de gobierno global que facilita la cooperación en asuntos como el Derecho internacional, la paz y seguridad internacional, el desarrollo económico y social, los asuntos humanitarios y los derechos humanos. </blockquote>
Vista en el navegador:
La Organización de las Naciones Unidas (ONU) o simplemente Naciones Unidas (NN. UU.) es la mayor organización internacional existente. Se define como una asociación de gobierno global que facilita la cooperación en asuntos como el Derecho internacional, la paz y seguridad internacional, el desarrollo económico y social, los asuntos humanitarios y los derechos humanos.
HTML para abreviaturas <abbr>
El elemnto HTML <abbr> se utiliza para definir abreviaturas o acrónimos. Mediante este elemento se puede proporcionar, tanto a los usuarios de los sitios web como a los motores de búsqueda, información útil sobre el significado de una abreviatura o acrónimo.
Ejemplo:
<p>La <abbr title="Organicación de Naciones Unidas">ONU</abbr> fue fundada el 24 de octubre de 1945.</p>
Vista en el navegador:
La ONU fue fundada el 24 de octubre de 1945.
(coloca el ratón encima de la palabra ONU para visualizar su significado)
HTML para información de contacto <address>
El elemnto HTML <address> se utiliza para indicar el autor o propietario de un documento o artículo. El texto incluido entre las etiquetas <address> y </address> es mostrado, generalmente por lo navegadores, en cursiva.
Ejemplo:
<address> Escrito por Juan Nadie.<br> Visitanos en:<br> Ejemplo.es<br> Apartado de correos 564, Zaragoza<br> Spain </address>
Vista en el navegador:
Escrito por Juan Nadie.Visitanos en:
Ejemplo.es
Apartado de correos 564, Zaragoza
Spain
HTML para el título de un trabajo <cite>
El elemento HTML <cite> se utiliza para indicar el título de una obra o trabajo. Los navegadores, generalmente, muestran el texto contenido entre las etiquetas <cite> y </cite> en cursiva.
Ejemplo:
<p><cite>El Aquelarre</cite> pintado por Francisco de Goya en 1798.</p>
Vista en el navegador:
El Aquelarre pintado por Francisco de Goya en 1798.
HTML para anulación bidiereccional del texto
El elemento HTML <bdo> permite elegir la dirección del texto o desactivar el algoritmo bidireccional de ciertos fragmentos de texto. El atributo dir, permite seleccionar la dirección del texto, de izquierda a derecha (dir=”ltr”) o de derecha a izquierda (dir=”rtl”).
Ejemplo:
<bdo dir="ltr">Este texto está representado de izquierda a derecha.</bdo> <bdo dir="rtl">Este texto está representado de derecha a izquierda.</bdo>
Vista en el navegador:
Este texto está representado de izquierda a derecha.
Este texto está representado de derecha a izquierda.
Resumen
A continuación, se muestra el código completo de un documento HTML, en el que se utilizan los elementos HTML explicados en este artículo. Para ver el resultado del mismo: abre tu editor texto favorito: el Bloc de notas de Windows, TextEdit de Mac o gEdit de Linux, por citar algunos de los más usuales, y escribe o copia y pega lo siguiente:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webdisenia - Ejemplos HTML</title>
</head>
<body>
<h2>Citas cortas</h2>
<p>Albert Einstein dijo: <q>Si buscas resultados distintos, no hagas simpre lo mismo.</q></p>
<h2>Citas largas</h2>
<p>blockquote en general sangra el texto.</p>
<blockquote cite="http://es.wikipedia.org/wiki/Organizaci%c3%b3n_de_las_Naciones_Unidas">
La Organización de las Naciones Unidas o simplemente Naciones Unidas es la mayor organización internacional existente.
Se define como una asociación de gobierno global que facilita la cooperación en asuntos como el Derecho internacional,
la paz y seguridad internacional, el desarrollo económico y social, los asuntos humanitarios y los derechos humanos.
</blockquote>
<h2>Abreviaturas y acrónimos</h2>
<p>La <abbr title="Organicación de Naciones Unidas">ONU</abbr> fue fundada el 24 de octubre de 1945.</p>
<h2>Direcciones</h2>
<p>El elemento HTML address se utiliza para indicar el autor o propietario de un documento o artículo.</p>
<address>
Escrito por Juan Nadie.<br>
Visitanos en:<br>
Ejemplo.es<br>
Apartado de correos 564, Zaragoza<br>
Spain
</address>
<h2>Título de trabajos y obras</h2>
<p>El elemento HTML cite se utiliza para indicar el título de una obra o trabajo.</p>
<img src="El_aquelarre.jpg" width="220" height="310" alt="El Aquelarre">
<p><cite>El Aquelarre</cite> Pintado por francisco de Goya en 1798.</p>
<h2>Anulación bidireccional</h2>
<p>Si el nevagador soporta la anulación bidireccional, primero se mostrará una línea escrita de izquierda a derecha, y
a continuación otra línea escrita de derecha a izquierda.</p>
<bdo dir="ltr">Este texto está representado de izquierda a derecha.</bdo><br/>
<bdo dir="rtl">Este texto está representado de derecha a izquierda.</bdo>
</body>
</html>
Guarda el documento con el nombre: citas.html (los documentos HTML deben tener extensión .htm o .html)
Sal de editor de texto, busca el documento y haz doble clic en él. El resultado final, dependerá del navegador que utilices, pero sera muy similar al siguiente:
