This is the fourth episode in our ongoing series about the different components that make up a website, and today we’re diving deep into the world of testimonials, block quotes, pull quotes, and the cite element, and why so many of us are probably coding them all wrong.

Nathan and David take a look at how these quote elements are handled from technical, design, accessibility, and SEO perspectives. Inspired by resources like Kevin Powell’s “Is HTML the Hardest Language?” and the work of Hayden Pickering, they set out to demystify the (often confusing) specifics of semantic HTML, particularly around quotes and citations.

We start with the basics: where quotes show up, be it testimonials for credibility, comments for engagement, or pull quotes for stylistic flair, and debate what pull quotes really are. Then, they walk through the evolution of HTML specifications, the ongoing confusion around the best markup for quotations, and how expert voices like Hayden Pickering and Adrian Roselli suggest different, sometimes contradictory approaches to structuring quotes, citations, and testimonials.

You’ll learn why using blockquote for pull quotes isn’t recommended, and why the cite element doesn’t always do what you think, or anything useful at all. David and Nathan talk through common patterns for testimonials (with author images, company names, and more), how to structure them for maximum meaning and accessibility, and why major platforms like WordPress often stray from the specification.

The episode also covers the practicalities: how to rationalise your code, how to use article and aside elements when appropriate, and even touches on the perennial pull quote debate, are they worth the trouble (especially for screen readers and responsive layouts)?

If you’ve ever wondered how to properly mark up quotes and testimonials in your HTML, and how to future-proof your work for accessibility and SEO, this episode is for you.