Testimonial section with HTML tags

Question

I created this testimonial on CodePen

I am a bit skeptical about a few things in my HTML structure. For example, I typically see testimonials enclosed in <div>s with custom classes. In my case I used a <blockquote> but had to overwrite a lot of rules.

Also wondering if enclosing the author in <strong> tags was wise.

HTML

<div class="wrapper">
  <blockquote>
    &ldquo;Such cool. Much awesome. WOW&rdquo;
  </blockquote>
  <p class="author">
    &ndash; 
    <strong>Doge</strong>, 
    <a href="#">The Moon</a>
  </p>
</div>

CSS

/* == resets == */
body { margin: 0; padding: 0; }
/* == project == */
body { 
  background: none repeat scroll 0% 0% rgb(240, 240, 240);
  color: rgb(102, 102, 102);
  font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
  font-size: 22px;
}
.wrapper {
  width: 600px;
  margin: 24px auto;
}

blockquote {
  background-color: rgb(255, 255, 255);
  border-radius: 6px;
  font-family: Georgia, serif;
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
  padding: 17px;
}
p.author {
  background-color: transparent;
  font-weight: 500;
  font-size: 22px;
  line-height:22px;
  margin: 24px 0 0 18px;
}
strong {
  color: rgb(68, 68, 68);
}

a {
  color: rgb(64, 131, 169);
  text-decoration: none;
}

Answer 1

• I would say that for it to be semantically accurate, the author should be a part of the blockquote, perhaps using a footer.

• You should include a cite attribute if the quote has a source.

• The quote content should be inside a paragraph element.

• I guess now you don't need the wrapper any more.

    <blockquote cite="http://knowyourmeme.com/memes/doge">
      <p>&ldquo;Such cool. Much awesome. WOW&rdquo;</p>
  
       <footer class="author">
         &ndash; 
         <strong>Doge</strong>, 
         <a href="#">The Moon</a>
       </footer>
     </blockquote>
  

• To make it look the same I had to change these bits of CSS:

  blockquote {
    font-size: 22px;
    margin: 0;
  }
  
  blockquote p {
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    font-family: Georgia, serif;
    line-height: 1.4;
    padding: 17px;
  }
  
  footer.author {
    background-color: transparent;
    font-weight: 500;
    font-size: 22px;
    line-height:22px;
    margin: 24px 0 0 18px;
  }
  

• Here's the result.

Answer 2

1. Your use of blockquote is correct. You can pretty much use div's for anything you want, but blockquote is the preferred way for quoting other people or sources. http://www.w3schools.com/tags/tag_blockquote.asp

2. Your use of strong is incorrect in my opinion.

From http://www.w3schools.com/tags/tag_strong.asp

In HTML 4.01, the tag defines strong emphasized text, but in HTML5 it defines important text.

I don't think the person's name is important to your website.

Your other option of course would be to use something like

<span class="quotersname">Doge</span>

.quotersname { font-size: 18px; font-weight: 800; }

However, I don't think it's that big of a deal either way. But I would personally use something like the second way.

Answer 3

Using blockquote would be appropriate.

Jivings suggested to include the author in the blockquote, but please note that this is not allowed in HTML5 (CR):

Attribution for the quotation, if any, must be placed outside the blockquote element.

UPDATE: The new HTML5 CR changed this rule:

[…] optionally with a citation which must be within a footer or cite element […]

(cite was also changed, so that it can be used for person names now.)

So these are allowed now:

<blockquote>
  <p>Such cool. Much awesome. WOW.</p>
  <footer class="author">Doge</footer>
</blockquote>

<blockquote>
  <p>Such cool. Much awesome. WOW.</p>
  <cite class="author">Doge</cite>
</blockquote>

<blockquote>
  <p>Such cool. Much awesome. WOW.</p>
  <footer>
    <cite class="author">Doge</cite>
  </footer>
</blockquote>

---

Using strong is not appropriate in all cases, but there might be cases where it could be used. Remember that it represents "strong importance".

In some other cases, the b element could be used.

If you need an element for the person’s name suitable for all contexts/situations, you’d have to go with span.

---

Depending in which context the testimonial is published, you might consider to use the figure element.

If you use figure (or a sectioning element like article) for a testimonial, you should enclose the author in a footer element. (See the last example in my answer to a different question.)