Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I created this testimonial on CodePen

current quote

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;
}
share|improve this question
add comment

3 Answers 3

up vote 11 down vote accepted
  • 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.

share|improve this answer
3  
Such CSS. Much helpful. Wow –  JGallardo Feb 6 at 8:03
    
It was pointed out by Unor that citation should be placed outside the <blockquote>. the blockquote element –  JGallardo Feb 6 at 17:30
    
@JGallardo That's not what it says... The cite attribute is on the <blockquote> element. –  Jivings Feb 6 at 18:49
    
@JGallardo Sorry, you meant the author. I didn't read the other answer. –  Jivings Feb 6 at 18:50
add comment
  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.

share|improve this answer
add comment

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

share|improve this answer
    
Nice! I hadn't read that section. Thanks! –  Jivings Feb 6 at 18:59
    
@Jivings, does that change your answer? –  JGallardo Feb 6 at 19:22
    
@JGallardo Yes, you should abide by the HTML5 spec. –  Jivings Feb 6 at 19:41
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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