Best semantic markup for a Blockquote

Been obsessing over the proper way to do it for a bit now. Followed some online advice, did some digging, had some conversations, and finally found the relavant W3 spec, which matched what I wanted to do. So here it is:

Full <blockquote> with attribution link (recommended)

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

For more about the why and the how this all makes sense, read our blog post here.

As a bonus, here is the SCSS that we currently use on the Project Evolution site. These styles add an opening curly quote to the top left, and close the last paragraph with an inline curly quote as well.

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

Hope this helps someone with similar obsessions.