Cita en bloque HTML5 con autor

7 minutos de lectura

avatar de usuario
zanona

Hola, estoy viendo una gran cantidad de formas diferentes de implementar blockquote en html pero no parece claro en su documentación cómo debo formatear correctamente un blockquote digamos de una cita célebre y mencionar a su autor como:

En la victoria te mereces champán, en la derrota lo necesitas.

Napoleón Bonaparte

¿Cuál sería el formato correcto de eso en HTML5?

Si el autor está dentro o fuera del blockquote ¿etiqueta? ¿Debería estar dentro de la cite ¿atributo? (incluso sabiendo que la documentación especifica un URI, no autor)

avatar de usuario
iGEL

Busqué en Google sobre esto y parece <figure> y <figcaption> debe hacer el trabajo:

<figure>
  <blockquote cite="https://developer.mozilla.org/samples/html/figure.html">
    Quotes, parts of poems can also be a part of figure.
  </blockquote>
  <figcaption>MDN editors</figcaption>
</figure>

https://developer.mozilla.org/samples/html/figure.html

<figure>
  <blockquote cite="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element">
    The figure element represents some flow content, optionally with a caption,
    that is self-contained and is typically referenced as a single unit from the
    main flow of the document.
  </blockquote>
  <figcaption>asdf</figcaption>
</figure>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element

  • Muchas gracias, esto es extremadamente útil. Parece haber mucha confusión alrededor de una pregunta aparentemente simple.

    – melindroso

    25 de julio de 2013 a las 2:35

avatar de usuario
SandroMarques

ACTUALIZACIÓN 2020

QUÉ dice el GT sobre el elemento de cita en bloque

La atribución de la cita, si la hay, debe colocarse fuera del elemento de cita en bloque.

QUÉ dice el GT sobre el citar elemento

El elemento cite representa el título de una obra (p. ej., un libro, un artículo,
[…])

El nombre de una persona no es el título de una obra. […] y, por lo tanto, el elemento no debe utilizarse para marcar nombres de personas.

Así que el siguiente HTML está bien:

<blockquote>
 <p>In victory, you deserve Champagne, in defeat, you need it.</p>
</blockquote>
<p>— Napoleon Bonaparte</p>

POSTE ANTIGUO 2018

Borrador del editor de HTML 5.3, 9 de marzo de 2018

W3C dice sobre el citar elemento:

El elemento cite representa una referencia a un trabajo creativo. Debe incluir la título de la obra o de la nombre del autor (persona, pueblo u organización) o una URL de referencia, o una referencia en forma abreviada según las convenciones utilizadas para la adición de metadatos de citas.

Así que el siguiente HTML está bien:

<blockquote>
    Those who pass by us, do not go alone, and do not leave us alone; 
    they leave a bit of themselves, and take a little of us.
    <cite>Antoine de Saint-Exupéry</cite>
</blockquote>

  • Solo quiero notar que <cite> no debe usarse aquí. A citation is not a quote (for which the q element is appropriate).

    – jsun

    15 oct 2019 a las 17:06


  • Gracias @jsun, tienes razón. La especificación ha cambiado y ya he actualizado la publicación.

    – Sandro Marques

    28 de agosto de 2020 a las 23:34

avatar de usuario
a granel

Así es como lo hace Bootstrap citas en v3.3.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Más sobre el elemento de pie de página de MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

el html <footer> El elemento representa un pie de página para su contenido de sección más cercano o elemento raíz de sección (es decir, su padre más cercano
<article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>,
<fieldset>, <figure>, <td>
). Un pie de página normalmente contiene información sobre el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.

También puede considerar usar Datos estructuradoscomo microdatos, RDFa y microformatos.

  • No es válido, la documentación dice que la cita no debe ser el nombre de una persona

    – Yann Chabot

    07/01/2016 a las 19:42

  • @YannChabot así: <footer>Author Name, <cite title="Book Name">Book Name</cite></footer>

    – esquí a granel

    8 de enero de 2016 a las 11:33

  • Tienes razón, cambiaron la documentación, en ese entonces decían que no se podía usar cite para citar a una persona, ahora se puede

    – Yann Chabot

    08/01/2016 a las 14:50

avatar de usuario
Alfombrilla D

http://neilpie.co.uk/2011/12/13/html5-quote-attribution/

Por ejemplo, use

<small class="author">Napoleon Bonaparte<small>

La documentación de HTML 5 dice: “La letra pequeña generalmente presenta descargos de responsabilidad, advertencias, restricciones legales o derechos de autor. La letra pequeña también se usa a veces para la atribución o para cumplir con los requisitos de licencia”.

Mi preferencia y valida…

<!doctype html>
<html lang="en">
<head><title>Blockquote Test</title></head>
<body>

<div style="width:300px;border:1px solid #cecece; padding:10px;">

<blockquote cite="https://stackoverflow.com/questions/5460356/URL">
In victory, you deserve Champagne, in defeat, you need it.
</blockquote>
<div class="credit" style="text-align:right;">
<cite><a href="https://stackoverflow.com/questions/5460356/URL">Napoleon Bonaparte</a></cite>
</div>

</div>

</body>
</html>

  • como el especificación dice que un elemento de cita no debe contener el nombre de una persona.

    –Joseph Mansfield

    29 de marzo de 2011 a las 15:29

  • es para “citar” el título, no el autor 🙂

    – Nathan JB

    19 de julio de 2012 a las 5:27

  • Entonces, ¿cómo se cita al autor?

    – Josué Mejilla

    4 de junio de 2013 a las 16:38

  • @JosephMansfield 3 años después, parece que la especificación ha cambiado: “El elemento cite representa una referencia a un trabajo creativo. Debe incluir el título de la obra. o el nombre del autor (persona, pueblo u organización) o una referencia de URL, que puede estar en forma abreviada según las convenciones utilizadas para agregar metadatos de citas.

    – h2ooooooo

    19 de marzo de 2014 a las 13:18


  • @h2ooooooo Siguiendo el estado actual de la página W3, todavía ha cambiado y ya no se puede usar para referirse a una persona. Pero siguiendo el esta otra página de W3todavía se puede utilizar.

    – meduz’

    16 de junio de 2015 a las 11:18


Esto puede ser cubierto por Bootstrap 4 <footer class="blockquote-footer"> elemento:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<blockquote class="blockquote">
  <p>In the digital age, knowledge is our lifeblood. And documents are the DNA of knowledge.</p>
  <footer class="blockquote-footer">Rick Thoman, CEO, <cite title="Xerox Corporation">Xerox</cite></footer>
</blockquote>

  • como el especificación dice que un elemento de cita no debe contener el nombre de una persona.

    –Joseph Mansfield

    29 de marzo de 2011 a las 15:29

  • es para “citar” el título, no el autor 🙂

    – Nathan JB

    19 de julio de 2012 a las 5:27

  • Entonces, ¿cómo se cita al autor?

    – Josué Mejilla

    4 de junio de 2013 a las 16:38

  • @JosephMansfield 3 años después, parece que la especificación ha cambiado: “El elemento cite representa una referencia a un trabajo creativo. Debe incluir el título de la obra. o el nombre del autor (persona, pueblo u organización) o una referencia de URL, que puede estar en forma abreviada según las convenciones utilizadas para agregar metadatos de citas.

    – h2ooooooo

    19 de marzo de 2014 a las 13:18


  • @h2ooooooo Siguiendo el estado actual de la página W3, todavía ha cambiado y ya no se puede usar para referirse a una persona. Pero siguiendo el esta otra página de W3todavía se puede utilizar.

    – meduz’

    16 de junio de 2015 a las 11:18


¿Ha sido útil esta solución?