Smart Quotes – Single Quote and Double Quotation Mark for Copy + Paste

Smart quotes are commonly used punctuation marks in HTML and in writing. Knowing how to use them correctly can make a significant difference in the clarity and professionalism of your writing.

So in this article, you will get access to the commonly used quotation marks out there that you can copy and paste them into your articles, papers, and HTML.

It doesn’t end there. You will get access to the Unicode characters, HTML entities, and CSS entities of all the smart quotes. Make sure you check the end of this article so you can learn how to use the HTML and CSS entities and Unicode characters of the smart quotes.

Before showing you a table containing all the smart quotes, let's see how to use them in HTML and CSS first.

What We'll Cover

How to Use Smart Quotes (Quotation Marks) in HTML and CSS
Table of Smart Quotes, their Unicode Characters, HTML, and CSS Codes
Conclusion

How to Use Smart Quotes (Quotation Marks) in HTML and CSS

To use smart quotes in HTML and CSS, you need their Unicode characters. For instance, the Unicode for quotation marks is U+0022. So, to use it in HTML, strip out the U+ part, prepend the other letters or numbers with &#x, and end them with semicolon (;) like this:

&#x0022;

That translates to this: "

In CSS, you need to strip out the U+ part again and replace them with a backslash (\). So this is how you'd use a quotation mark in CSS:

\0022

But there's a caveat to using Unicode characters in CSS. To make them visible on a web page, you need to create a pseudo-element and make the Unicode character the content:

element::after {
  content: '\0022';
}

Table of Smart Quotes, their Unicode Characters, HTML, and CSS Codes

The table below contains the quotation marks available for use in HTML and other writings:

Quotation Mark Name	Symbol	Unicode	HTML Code	CSS Code
Quotation Mark	`"`	`U+0022`	`&#x0022`	`\0022`
Single High Reversed Quotation Mark	`‛`	`U+201B`	`&#x201B`	`\201B`
Double High Reversed Quotation Mark	`‟`	`U+201F`	`&#x201F`	`\201F`
Full Width Quotation Mark	`＂`	`U+FF02`	`&#xFF02`	`\FF02`
Right Single Quotation Mark	`’`	`U+2019`	`&#x2019`	`\2019`
Left Single Quotation Mark	`‘`	`U+2018`	`&#x2018`	`\2018`
Single Low Quotation Mark	`‚`	`U+201A`	`&#x201A`	`\201A`
Double Prime Quotation Mark	`〞`	`U+301E`	`&#x301E`	`\301E`
Reversed Double Prime Quotation Mark	`〝`	`U+301D`	`&#x301D`	\301D
Low Double Prime Quotation Mark	`〟`	`U+301F`	`&#x301F`	`\301F`
Right Double Quotation Mark	`”`	`U+201D`	`&#x201D`	`\201D`
Left Double Quotation Mark	`“`	`U+201C`	`&#x201C`	`\201C`
Double Low Quotation Mark	`„`	`U+201E`	`&#x201E`	`\201E`
Double Low Reversed Quotation Mark	`⹂`	`U+2E42`	`&#x2E42`	`\2E42`
Heavy Right Pointing Angle Quotation Mark Ornament	`❯`	`U+276F`	`&#x276F`	`\276F`
Heavy Left Pointing Angle Quotation Mark Ornament	`❮`	`U+276E`	`&#x27CE`	`\27CE`
Single Right Pointing Angle Quotation Mark	`›`	`U+203A`	`&#x203A`	`\203A`
Single Left Pointing Angle Quotation Mark	`‹`	`U+2039`	`&#x2039`	`\2039`
Heavy Low Single Comma Quotation Mark Ornament	`❟`	`U+275F`	`&#x275F`	`\275F`
Heavy Single Comma Quotation Mark Ornament	`❜`	`U+275C`	`&#x275C`	`\275C`
Heavy Single Turned Comma Quotation Mark Ornament	`❛`	`U+275B`	`&#x275B`	`\275B`
Heavy Double Turned Comma Quotation Mark Ornament	`❝`	`U+275D`	`&#x275D`	`\275D`
Heavy Double Comma Quotation Mark Ornament	`❞`	`U+275E`	`&#x275E`	`\275E`
Right Pointing Double Angle Quotation Mark	`»`	`U+00BB`	`&#x00BB`	`\00BB`
Left Pointing Double Angle Quotation Mark	`«`	`U+00AB`	`&#x00AB`	`\00AB`
Full Width Apostrophe	`＇`	`U+FF07`	`&#xFF07`	`\FF07`

Note: if you have a Mac, you may not be able to see the "Double low revesed quotation mark" and the "Heavy low single comma quotation mark". Here's what they're supposed to look like:

Conclusion

I hope this article helps you learn about the smart quotes out there, and how to use them in your HTML and CSS files, and other writings.

Try to share the article with your friends and family so they can have access to the smart quotes.

Thank you.