# Testimonial section with HTML tags

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);
font-family: Georgia, serif;
font-size: 22px;
line-height: 1.4;
margin: 0;
}
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;
}

-

• 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);
font-family: Georgia, serif;
line-height: 1.4;
}

footer.author {
background-color: transparent;
font-weight: 500;
font-size: 22px;
line-height:22px;
margin: 24px 0 0 18px;
}

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

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.

-

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

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