html5doctor has a tendency for a free flow articles that are really not that informative after some time. When I don’t know how to represent something in the form of HTML in a semantic way I usually check the w3c specification.
Quote from w3c:
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.
In the specification you can find some examples, take a look at example
12, which is similar to what you need.
In my own projects, if given quotation is an important and distinct part of the content I usually prefer to represent it in this way:
<p>A ship in port is safe; but that is not what ships are built for.</p>
<a href="https://en.wikipedia.org/wiki/Grace_Hopper">Grace Hopper</a>
This is consistent with the w3c specification for the
figcaption element represents a caption or legend for the rest of the contents of the
figcaption element’s parent
figure element, if any.
And I do not have to deal with the author name in the
cite element drama
Just to clarify my point of view towards html5doctor as a viable educational resource… That is a quote from the middle of the article you have mentioned:
2012-02-14 Hixie has given his feedback on my email, and it seems like our
<footer> citations are still invalid. The official recommendation is to put the blockquote in a figure and add attribution in
<figcaption> . Read the whole thread as there are some interesting comments. I’ll wait for the dust to settle a little yet…
… so the whole article talks about use of
footer to add information about the quote and they know that it is not a valid method. Such important information should be more emphasized, right?