CODEWITHSUNDEEP
csshtmlquoteblockquote
Edson
Edson

Reputation: 275

Semantically Correct Blockquote

I have 3 testimonials that I'm going to use in a website I'm working on. I've read up on block-quotes and I believe that this is the tag best suited for them.

Here is a basic blockquote I found on a forum:

<blockquote>
      <p>Pellensque.</p>
      <p>Pellentesque.</p>
      <p class="credit"><cite>Name</cite>, Title</p>  
</blockquote>

Is it semantically correct to use the cite tag to state a person's name and title?

I read that its intended use is to point to the original URL source of the quote.

Also, when inspecting some site's html, I found one that used an h3 for the quotation and h6 for the name and title. Is this in line with best practice?

Or is it better to adjust the text purely in CSS with line-weight and other properties?

Upvotes: 3

Views: 1883

Answers (2)

Edson
Edson

Reputation: 275

In the end I used this HTML markup.

        <figure class="rocking-quote">
            <blockquote>
                <p></p>
            </blockquote>
            <figcaption>Name, Position</figcaption>
        </figure>

Here is the link to a AListApart article I found that really helped:

http://alistapart.com/blog/post/more-thoughts-about-blockquotes-than-are-strictly-required

And here is what the WHATWG "cite" element Living Standard has to say about the "cite" element.

https://html.spec.whatwg.org/multipage/semantics.html#the-cite-element

What I got from these sources is basically that the cite element must represent the title of a work and an author's name does not qualify as one.

Also, I can't just use a "p" tag to cite the author after the blockquote, because what's contained in the "p" tag has nothing semantically that lets a machine know that they are related.

So, the result is a wrapping figure tag with a "quote" class that denotes the type of figure it is, and a corresponding "figcaption" tag that allows for captioning the figure with the author's name and position (job).

If anyone has any suggestions or thoughts please share.

Upvotes: 2

BoltClock
BoltClock

Reputation: 723448

I read that its intended use is to point to the original URL source of the quote.

That would be the cite attribute of the <blockquote> element. See here in the HTML5 spec. What you're looking at is the <cite> element, for which marking up the title or author (as demonstrated) of a quotation is appropriate.

Also, when inspecting some site's html, I found one that used an h3 for the quotation and h6 for the name and title. Is this in line with best practice?

If the headings are part of the quotation, then marking up those headings with the respective h elements is fine, as you're reproducing the headings as-is. However, a citation is not a heading, so using a heading to mark up a citation is inappropriate.

Other than that, the <blockquote> element is ideal for marking up testimonials.

Upvotes: 3

Related Questions