HTML Testimonial Markup: Quotes and Attribution

A testimonial is a quoted opinion attributed to a real speaker. Figure, blockquote, and figcaption can keep the words and attribution together.

What You Need to Know

Do not invent endorsements or quote people without permission. Keep the quotation accurate and make the speaker's role clear when it helps.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<figure>
    <blockquote>
        <p>The coding club helped me build my first website.</p>
    </blockquote>
    <figcaption>— Jamie, club member</figcaption>
</figure>

Let’s Understand the Example

• Figure groups self-contained content, such as a photo or code illustration, with an optional caption.
• Blockquote marks a longer quotation separated from surrounding text.
• A p groups a paragraph of related text. Start another paragraph for a new thought.

Look for the text “The coding club helped me build my first website.” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.

What Should You See?

The page should include “The coding club helped me build my first website.”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.

Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.

Try It Yourself

1. Add an attribution that explains who the student is without sharing private details.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Using cite for the person's name when cite is meant for titles of works.
• Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

• A testimonial is a quoted opinion attributed to a real speaker.
• Figure groups self-contained content, such as a photo or code illustration, with an optional caption.
• Do not invent endorsements or quote people without permission. Keep the quotation accurate and make the speaker's role clear when it helps.