Honey Bee Hive logo

Honey Bee Hive

A web design & development blog

Quotes made easy with blockquote and cite tags

  • April 18, 2015
  • By Melissa Pilkey
  • Code

Quote about blockquote

While creating a Testimonials page for another website, I was beginning to get frustrated with styling the quotes and citations (which was the author’s name of the quote), as well as the large quotation mark that I wanted before the quote itself. I originally had each element placed in a paragraph tag and gave them each a class for what they were: Quote, Citation, or Quotation (for the quotation mark). But trying to style each of these elements appropriately with the paragraph tag and the classes was becoming rather aggravating, and it didn’t really add any semantic value to the page. That’s when I discovered the blockquote and cite tags.

The blockquote “represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element” (html5doctor.com). This is great for testimonials as the quoted content is from another source (typically a customer) and the citation can be the person’s name that said the quote. By using the blockquote tag, I was also able to use blockquote:before, which allowed me to place the oversized quotation mark before the quote itself. Overall this was just a much easier way to deal with my Testimonials page, and also gave the quotes semantic meaning as well.

Share on FacebookGoogle+Tweet about this on Twitter