Melhor marcação semântica para um Blockquote

Já faz algum tempo que estou obcecado com a maneira correta de fazer isso. Segui alguns conselhos online, fiz algumas pesquisas, tive algumas conversas e finalmente encontrei a especificação W3 relevante, que combinava com o que eu queria fazer. Então aqui está:

Completo <blockquote>com link de atribuição (recomendado)

<figure>
<blockquote cite="//dev.w3.org/html5/spec/grouping-content.html#the-blockquote-element">
<p>The blockquote element represents a section that is quoted from another source.</p>
</blockquote>
<figcaption><cite><a href="http://dev.w3.org/html5/spec/grouping-content.html#the-blockquote-element" title="4.5 Grouping content — HTML5">W3C HTML5 specification</a></cite></figcaption>
</figure>

Para mais informações sobre o porquê e como tudo isso faz sentido, leia nossa postagem do blog aqui .

Como um bônus, aqui está o SCSS que usamos atualmente no site do Project Evolution. Esses estilos adicionam uma aspas curvas de abertura no canto superior esquerdo e fecham o último parágrafo com uma aspas curvas embutidas.

blockquote {
font
: italic 1.125em Georgia, serif;
line
-height: 1.75;
padding
: .5em 1.5em 0;
position
: relative;

&:before, p:last-child:after {
color
: #ccc;
font
-style: normal;
font
-weight: 700;
font
-size: 2.25em;
}
&:before {
content
: "“";
position
: absolute;
top
: -0.0625em; left: 0;
}
p
:last-child:after {
display
: inline;
content
: "”";
line
-height: 0;
vertical
-align: text-bottom;
margin
-left: .125em;
}
& + figcaption {
margin
-left: 2em;
}
}

Espero que isso ajude alguém com obsessões semelhantes.