HTML5 block-quote with author

html quote

40,042

Solution 1

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

For example, use

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

HTML 5 documentation says, "Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements."

Solution 2

I googled about this and it looks like <figure> and <figcaption> should do the job:

<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

Solution 3

UPDATE 2020

WHATWG says about the blockquote element

Attribution for the quotation, if any, must be placed outside the blockquote element.

WHATWG says about the cite element

The cite element represents the title of a work (e.g. a book, a paper, [...])

A person's name is not the title of a work [...] and the element must therefore not be used to mark up people's names.

So the following HTML it's fine:

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

OLD POST 2018

HTML 5.3 Editor’s Draft, 9 March 2018

W3C says about the cite element:

The cite element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference, or a reference in abbreviated form as per the conventions used for the addition of citation metadata.

So the following HTML it's fine:

<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>

Solution 4

This is how Bootstrap does quotes in 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>

More on the footer element from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

The HTML <footer> Element represents a footer for its nearest sectioning content or sectioning root element (i.e, its nearest parent <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). A footer typically contains information about the author of the section, copyright data or links to related documents.

You may also consider using Structured Data, such as microdata, RDFa, and microformats.

View more solutions

40,042

Author by

zanona

My primary focus over the past 15 years has been full-stack web development and implementation, experimenting with technologies while thinking openly about how tech and users can interact. Currently, acting as a web consultant for goal-oriented businesses and concentrating on designing interactive systems, UX research/ implementation and engineering/development of elaborate online platforms.

Updated on September 10, 2021

Comments

zanona almost 2 years

Hi I'm seeing a great number of different ways to implementat blockquote in html but it doesn't seem clear in its documentation how should I properly format a blockquote let's say of a famous quote and metion its author like:

In victory, you deserve Champagne, in defeat, you need it.

Napoleon Bonaparte

What would the correct format of that be in HTML5?

Should the author be inside or outside the blockquote tag? Should it be inside the cite attribute? (even knowing the documentation specifies an URI , not author)
Joseph Mansfield over 12 years

As the specification says, a cite element must not contain a person's name.
Nathan J.B. almost 11 years

<cite> is for "citing" the title, not the author :)
CanadianGirl827x about 10 years

So then how do you cite the author?
nickpish almost 10 years

Thanks very much- this is extremely helpful. Seems to be a lot of confusion out there surrounding a seemingly simple question.
h2ooooooo over 9 years

@JosephMansfield 3 years later it looks like the specification has changed: "The cite element represents a reference to a creative work. It must include the title of the work or the name of the author(person, people or organization) or an URL reference, which may be in an abbreviated form as per the conventions used for the addition of citation metadata."
meduz' about 8 years

@h2ooooooo Following the current status of the W3 page, it has still changed and can't be used anymore to refer to a person. But following the this other W3 page, it can still be used.
mikemaccana about 8 years

Could you add a link to the HTML 5 documentation for the quote?
Yann Chabot over 7 years

It doesn't seems to say that anymore as you can see, here is what the W3C is saying about it: The small element represents so-called “fine print” or “small print”, such as legal disclaimers and caveats. w3.org/TR/html-markup/small.html
Yann Chabot over 7 years

It is invalid, documentation says that cite shoudnt be a person's name
skibulk over 7 years

@YannChabot like this: <footer>Author Name, <cite title="Book Name">Book Name</cite></footer>
Yann Chabot over 7 years

You are right, they changed the documentation, back then they said that cite couldn't be used to cite a person, now you can
Andre Figueiredo over 7 years

@meduz' Look at the root urls: the latter is from 2014 while the former is from 2013. Also the former says: "This document has been discontinued and is only made available for historical purposes. For an up to date reference on HTML elements (and more) please consult Web Platform Docs."
meduz' over 7 years

Thanks you, Andre, I wasn't aware of the existence of the Web Platform Docs. By the way, the page about blockquote refers to the official W3 documentation page which was last updated exactly the same day (2014-10-28) of the first link of my previous message. Am I missing something?
Admin over 3 years

Just want to note that <cite> should not be used here. A citation is not a quote (for which the q element is appropriate).
SandroMarques almost 3 years

Thank you @jsun, you're right. The specification has changed and I have already updated the post.