3

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?

2 Answers 2

3

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.

4
  • Ohhhh, that makes sense, thank you! Would you happen to know if using heading tags for the quoted text and name + title would be semantically beneficial (more than just styling them in CSS)?
    – Edson
    Commented Nov 23, 2015 at 17:18
  • 1
    @Edson: No, because a citation isn't a heading.
    – BoltClock
    Commented Nov 23, 2015 at 17:18
  • AHA! That didn't even cross my mind. Sometimes, just have to remember the basics. Thank you!
    – Edson
    Commented Nov 23, 2015 at 17:22
  • I will write up my blockquote and post it on here for potential feedback.
    – Edson
    Commented Nov 23, 2015 at 17:24
1

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.

1
  • From MDN: "It's worth noting that the W3C specification says that a reference to a creative work, as included within a <cite> element, may include the name of the work’s author. However, the WHATWG specification for <cite> says the opposite: that a person’s name must never be included, under any circumstances." So conflicting recommendations, as usual.
    – pbarney
    Commented Nov 5, 2020 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.