En la clase anterior estuvimos citando títulos en HTML5 con la etiqueta <cite>. Pues en esta ocasión vamos a aprender a citar contenido con las etiquetas <q> y <blockquote>. Dos elementos que representan más o menos lo mismo, fragmentos de texto que proceden de una fuente externa a nuestro sitio web. Se diferencian en el contexto en el que se encuentra escrito nuestro documento.
La etiqueta <q>
Ejemplo de una cita de un fragmento en línea:
<p> Y luego ella dijo: <q>Mañana vamos de viaje</q> </p>Al "encerrar" un texto tanto en la etiqueta <q> el navegador genera automáticamente las comillas, así que no debemos escribirlas en el texto.
Ejemplo de una cita con contenido en otro idioma:
<p> Luego intentó llamar nuevamente, esta vez en francés: <q lang="fr">Avez-vous lu le livrer</q>, pero nadie abrió la puerta. </p>Como la cita está en otro idioma le añadimos el atributo lang="" para decirle a los rastreadores que esa cita está en francés.
Ejemplo de una cita que contenga una url:
<p> Segun wikipedia la revolución industrial es: <q cite="https://es.wikipedia.org/wiki/Revoluci%C3%B3n_Industrial">El proceso de transformación económico, social y tecnológico que se inició en la segunda mitad del siglo XVIII en Gran Bretaña </p>En este caso el contenido de la cita tiene una fuente de internet, le asignamos el atributo cite="". Esta información es solo para los bots. ¡OJO! no confundir con la etiqueta <cite>, que estudiamos hace poco en Citando títulos en HTML5 con la etiqueta <cite>.
La etiqueta <blockquote>
Ejemplo de una cita en una sección <blockquote> (bloque):
<p>Cita de fulanito:</p> <blockquote> … por primera vez en la historia, el nivel de vida de las masas y la gente común experimentó un crecimiento sostenido (…) Nada remotamente parecido a este comportamiento económico es señalado por los economistas clásicos, ni siquiera como una posibilidad teórica … </blockquote>Si es un simple texto como la cita de arriba no sería necesario colocar una etiqueta de parrafo dentro de la etiqueta <blockquote>. Si son varios bloques de texto, si que sería necesario colocar la etiqueta <p> en cada uno de los bloques. La etiqueta <p> si puede ser definida dentro de la etiqueta <blockquote>, pero no al contrario como he dicho más arriba.
<p>Cita de fulanito:</p> <blockquote> <p> … por primera vez en la historia, el nivel de vida de las masas y la gente común experimentó un crecimiento sostenido (…) Nada remotamente parecido a este comportamiento económico es señalado por los economistas clásicos, ni siquiera como una posibilidad teórica … </p> <p> … por primera vez en la historia, el nivel de vida de las masas y la gente común experimentó un crecimiento sostenido (…) Nada remotamente parecido a este comportamiento económico es señalado por los economistas clásicos, ni siquiera como una posibilidad teórica … </p> <p> … por primera vez en la historia, el nivel de vida de las masas y la gente común experimentó un crecimiento sostenido (…) Nada remotamente parecido a este comportamiento económico es señalado por los economistas clásicos, ni siquiera como una posibilidad teórica … </p> <p> … por primera vez en la historia, el nivel de vida de las masas y la gente común experimentó un crecimiento sostenido (…) Nada remotamente parecido a este comportamiento económico es señalado por los economistas clásicos, ni siquiera como una posibilidad teórica … </p> </blockquote>Todos estos ejemplos que acabamos de ver, no tienen ningún significado semántico, aunque si visual. Tenemos solo un titulo y una cita. Para que tenga un significado semántico a la hora de que los bots lean nuestro sitio, la W3C da unas recomendaciones.
Aportando significado semántico
<figure> <blockquote> -El aspecto más triste de la vida en este momento es que la ciencia reúne el conocimiento más rápidamente que la sociedad reúne la sabiduría.- </blockquote> <figcaption> Isaac Asimov </figcaption> </figure>Veamos un ultimo ejemplo en el que nos vamos a complicar la vida un poco más. Con la etiqueta <footer> hemos creado una especie de pie de página para <blockquote>, y también es una forma totalmente valida para aportar aun más significado semántico al sitio.
<blockquote> -El aspecto más triste de la vida en este momento es que la ciencia reúne el conocimiento más rápidamente que la sociedad reúne la sabiduría.- <footer> <cite><acite="https://es.wikipedia.org/wiki/Revoluci%C3%B3n_Industrial">Isaac Asimov</a></cite> </footer> </blockquote>El resultado visual en el navegador no es para nada bonito, pero eso lo podemos solucionar mas adelante, aplicándole estilos con CSS3.
Conclusiones
Nada más por ahora y os recuerdo que justo debajo, teneis el listado de las clases que llevamos hasta la fecha. Me gustaría que compartieses esta publicación con tus amigos, nos regales un me gusta en la página de Facebook y si te apetece unete a la comunidad de Facebook.
0 Comentarios