how to write single quote in html

HTML Tutorial

Html graphics, html examples, html references, html quotation and citation elements.

In this chapter we will go through the <blockquote> , <q> , <abbr> , <address> , <cite> , and <bdo> HTML elements.

Here is a quote from WWF's website:

For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Advertisement

HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element. 

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic .

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

HTML Exercises

Test yourself with exercises.

Use an HTML element to add quotation marks around the letters "cool".

Start the Exercise

Test Yourself with Exercises!

For a complete list of all available HTML tags, visit our HTML Tag Reference .

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Single Quote in HTML

• By Steve Founder of PageDart

What happens when you try and put a single quote in HTML?

Does it break your HTML?

The answer is, it depends.

Single quotes in HTML can break your site.

If single quotes are breaking your HTML then I am here to help!

Let's look at why it happens and two ways you can fix it.

Why do Single Quotes Break Your HTML?

When writing HTML you use quotation marks to wrap the value for an attribute.

Taking a simple example of an image:

Here the attribute is src and the value ( cat.png ) is in single quotes.

There are two ways you can wrap your values, either single quotes or double quotes.

If you use single quotes then your HTML will look like this:

You could also do the same using double quotes, in which case your HTML will look like this:

Both single and double quotes are valid in HTML and all browsers support them.

The problem comes when you need to use a single or double quote inside the value.

For example, adding the word “it's” would break the single quote HTML. Like this:

Because there is a single quote inside the value it ends the wrapping of the value. This HTML would then display as it and not it's .

The same is true if you use double quotes to wrap the value and then use a double quote inside the value, like this:

The HTML displayed would be This will and not This will "break" the HTML .

There are two ways we can solve this problem.

• We can use double quotes for the wrapping and then we are free to use single quotes inside the value
• We can use special escape characters

Let's take a look at option 1 next.

How to use Single Quote in HTML

The simplest solution to display a single quote within a value is to use double quotes in your HTML.

This would look like this:

In the example above the single quote is in double quotes and is valid HTML. The result would be a value of it's .

If we wanted to display a double quote within the value we could swap things round. This time we will use single quotes to wrap the value of the attribute and then we are free to use double quotes inside.

Here is what that would look like in HTML:

The result would be a value of This will not "break" the HTML displayed on the page.

There are two things that we need to be aware of when we are using this fix:

• What happens if we need to use both a single and double quote in the value
• What if we have no control over character used to wrap the value.

In this case, we need to look at the second fix that uses an escape string.

Using HTML Escape Strings

There are times when you do not have control over the character used to wrap the HTML values.

It is common in CMSs that single or double quotes are set by default and you are unable to change them.

Another situation is where you need to show both single and double quotes in the value like this:

Would display as You not You're going to "break" the HTML .

The same is true if we use double quotes:

Would display as You're going to not You're going to "break" the HTML .

So how do we fix this?

We need to use a special set of characters called an “escape” string.

Instead of using a single quote you replace this with a special set of characters. The browser will display the special set of characters as a single quote.

For example, this strange set of characters &#39; is the same as using a single quote.

It is strange when you first set it but the browser will read this string &#39; and turn it into a single quote.

There are many of these strange character escape strings.

There are ten different ones to represent a single quote. Ten!

Here they all are:

• &lsquo;
• &rsquo;
• &#8216;
• &#8217;

So which one should you use when you need to escape.

The short answer is you should use &#39; . This is the official escape string to use for HTML 5. So using our example from earlier we could write:

Although this looks strange in the HTML. When the browser displays the value it will show as “it's” to the user.

So how do we do the same for a double quote?

There are many ways you can write a double quote:

• &ldquo;
• &rdquo;
• &#8220;
• &#8221;

The only one you should use is &#34; . So taking our example where you have both single and double quotes your HTML would look like this:

This will then display the value of “You're going to "break" the HTML”

So we now have a solution to this problem, Yay!

Quotes are not the only characters that you can escape.

Let's look at these next.

Escape Special Characters

There is a huge list of special characters that you can escape in the same way. Covering everything from colons to ampersands.

Yet, I have only ever had to escape 5.

If you are curious about the full list then w3 created a list of all the HTML special characters .

Here is my list of the only 5 you need to think about escaping:

• & becomes &amp;
• < becomes &lt;

becomes &gt;

• " becomes &#34;
• ' becomes &#39;

With these escaped you should never have broken HTML again.

Frequently Asked Questions

Can i use single quotes in html.

Yes, you can! make sure to use either double quotes to wrap your values or escape the single quotes using &#39; .

How do you escape a single quote in HTML?

Our recommendation is to use the HTML 5 standard &#39; .

Wrapping Up, Single Quote in HTML

Who thought that there were so many ways to write a single quote in HTML!

We have looked at two fixes to the issue where a single quote breaks HTML.

• We use double quotes to wrap the value of the attribute
• We represent the character using an escape string

When you need to use both single and double quotes you can use the following:

Remember that you will only ever need to escape 5 special characters:

Once you have these escaped you should never have an issue with broken values in HTML again.

Recent Posts

In this tutorial we will add Google search to a website using the custom site search tool

In this tutorial we are going to look at how to create a WordPress plugin.

We look at how to add a search bar in HTML to your website and search connect it to Google search

Quoting in HTML: Quotations, Citations, and Blockquotes

It’s all too common to see the incorrect HTML used for quotes in markup. In this article, let’s dig into all this, looking at different situations and different HTML tags to handle those situations.

There are three major HTML elements involved in quotations:

• <blockquote>
• <cite>

Let’s take a look.

Blockquotes

Blockquote tags are used for distinguishing quoted text from the rest of the content. My tenth grade English teacher drilled it into my head that any quote of four lines or longer should be set apart this way. The HTML spec has no such requirement , but as long as the text is a quote and you want it to be set apart from the surrounding text and tags, a blockquote is the semantic choice.

By default, browsers indent blockquotes by adding margin on each side.

See the Pen The Blockquote Tag by Undead Institute ( @undeadinstitute ) on CodePen .

As a flow element (i.e. “block level” element), blockquote can contain other elements inside it. For example, we can drop paragraphs in there with no problem:

But it could be other elements, too, like a heading or an unordered list:

It’s important to note that blockquotes should only be used for quotations rather than as a decorative element in a design. This also aids accessibility as screen reader users can jump between blockquotes. Thus a blockquote element used solely for aesthetics could really confuse those users. If you need something more decorative that falls outside the bounds of extended quotations, then perhaps a div with a class is the way to go.

Quoting with Q

Q tags ( <q> ) are for inline quotes, or what my tenth grade teacher would say are those under four lines. Many modern browsers will automatically add quotation marks to the quote as pseudo elements but you may need a backup solution for older browsers.

See the Pen The Q Tag by CSS-Tricks ( @css-tricks ) on CodePen .

Typical quotation marks are just as valid for inline quotes as the <q> element. The benefits of using <q> , however, are that it includes a cite attribute, automatic handling of quotation marks, and automatic handling of quote levels. <q> elements should not used for sarcasm (e.g. “you would use a <q> tag for sarcasm, wouldn’t you?”), or signifying a word with air quotes (e.g. “awesome” is an “accurate” description of the author). But if you can figure out how to mark up air quotes, please let me know. Because that would be “awesome.”

The citation attribute

Both <q> and blockquotes can use a citation ( cite ) attribute. This attribute holds a URL that provides context and/or a reference for the quoted material. The spec makes a point of saying that the URL can be surrounded by spaces. (I’m not sure why that’s pointed out, but if you want to anger the semantic code deities, you’ll have to do more than throw spaces around.)

That cite attribute isn’t visible to the user by default. You could add it in with a sprinkle of CSS magic like the following demo. You could even fiddle with it further to make the citation appear on hover.

See the Pen Attributable citations by CSS-Tricks ( @css-tricks ) on CodePen .

Neither of those options are particularly great. If you need to cite a source such that users can see it and go to it, you should do it in HTML and probably with the <cite> element, which we’ll cover next.

The citation element

The <cite> tag should be used for referencing creative work rather than the person who said or wrote the quote. In other words, it’s not for quotes. Here are the examples from the spec :

Here’s another example:

See the Pen Cite This! by CSS-Tricks ( @css-tricks ) on CodePen .

If the author of this article told you he’d give you a cupcake, and you <cite> him by name , that would be semantically incorrect. Thus no cupcakes would change hands. If you cited the article in which he offered you a cupcake, that would be semantically correct, but since the author wouldn’t do that, you still wouldn’t get a cupcake. Sorry.

By default, browsers italicize cite tags and there’s no requirement that a <q> or <blockquote> be present to use the cite element. If you want to cite a book or other creative work, then slap it in the cite element. The semantic deities will smile on you for not using either <i> or <em> elements.

But where to put the cite element? Inside? Outside? The upside down? If we put it inside the <blockquote> or the <q> , we’re making it part of the quote. That’s forbidden by the spec for just that reason.

Putting it outside just feels wrong and also requires you to have an enclosing element like a <div> if you wanted to style them together.

N.B. If you google this issue you may come across an HTML5 Doctor article from 2013 that contradicts much of what’s laid out here. That said, every time it links to the docs for support, the docs agree with the article you’re currently reading rather than the HTML5 Doctor article. Most likely the docs have changed since that article was written.

Hey, what about the figure element?

One way to mark up a quotation — and in a way that pleases the semantic code deities — is to put the blockquote within a figure element. Then, put the cite element and any other author or citation information in a figcaption.

While this doubles the number of elements needed, there are several benefits:

• It’s semantically correct for all four elements.
• It allows you to both include and encapsulate author information beyond citing the name of the work.
• It gives you an easy way to style the quote without resorting to divs, spans or wretchedness.

See the Pen It Figures You’d Say That by CSS-Tricks ( @css-tricks ) on CodePen .

None of this is for dialogue

Not <dialog> ! Those are for attention-grabbing modals. Dialogue, as in, conversational exchanges between people speaking or typing to each other.

Neither <blockquote> nor <q> nor <cite> are to be used for dialogue and similar exchanges between speakers. If you’re marking up dialogue, you can use whatever makes the most sense to you. There’s no semantic way to do it. That said, the spec suggests <p> tags and punctuation with <span> or <b> tags to designate the speaker and <i> tags to mark stage directions.

Accessibility of quotes

From the research I’ve done, screen readers should not have any issue with understanding semantic-deity-approved <q> , <blockquote> , or <cite> tags.

More “ways” to “quote”

You can add quotation marks to a <blockquote> using CSS pseudo elements. The <q> element comes with quotation marks baked in so they need not be added, however adding them as pseudo-elements can be a workaround for older browsers that don’t automatically add them. Since this is how modern browsers add the quotation marks there’s no danger of adding duplicate quotes. New browsers will overwrite the default pseudo elements, and older browsers that support pseudo elements will add the quotes.

But you can’t, like I did, assume that the above will always give you smart opening and closing quotes. Even if the font supports smart quotes, sometimes straight quotes will be displayed. To be safe, it’s better to use the quotes CSS property to up the intelligence on those quotation marks.

See the Pen "Quot-a-tizing" the blockquote by CSS-Tricks ( @css-tricks ) on CodePen .

Multi-level quoting

Now let’s look at quote levels . The <q> tag will automatically adjust quote levels.

Let’s say you’re in an area that uses the British convention of using single quotes. You could use the CSS quotes rule to put the opening and closing single quotes first in the list. Here’s an example of both ways:

See the Pen Quote Within a Quote by CSS-Tricks ( @css-tricks ) on CodePen .

There is no limit to nesting. Those nested <q> elements could even be within a blockquote that’s within a blockquote.

If you add quotation marks to a blockquote, know that the blockquote does not change the quote level the way a <q> tag does. If you expect to have quotes within a blockquote, you may want to add a descendant selector rule to start <q> elements within a blockquote at the single quote level (or double quotes if you follow British conventions).

The last quote level you put in will continue through subsequent levels of quotation. To use the double, single, double, single… convention, add more levels to the CSS quotes property.

Hanging punctuation

Many typography experts will tell you that hanging the quotation marks on blockquotes looks better (and they’re right). Hanging punctuation is, in this case, quotation marks that are pushed out from the text so that the characters of the text line up vertically.

One possibility in CSS is using a slightly negative value on the text-indent property. The exact negative indentation will vary by font, so be sure to double check the spacing with the font you end up using.

There is a nicer way to handle this by using the hanging-punctuation CSS property. It’s only supported in Safari at the time of this writing, so we’ll have to progressively enhance:

Using hanging-punctuation is better because it’s less fiddly. It’ll just work when it can.

See the Pen Hanging Your Punctuation by CSS-Tricks ( @css-tricks ) on CodePen .

Can we animate quotation marks?

Of course we can.

See the Pen Dancing Quotes by CSS-Tricks ( @css-tricks ) on CodePen .

Why you’d need to do this, I’m not totally sure, but the quotation marks in a <q> tag are added are pseudo elements in the UA stylesheet, so we’re able to select and style them — including animation — if we need to.

Wait, maybe we just solved the air quotes thing after all.

Just a note on the q element: We’ve had many a thread on this on the W3C end and some of them, notably because of Ian (Hickson), are quite instructive. See for example one 2004 thread on correct use of q , or Ian’s 2008 “omnibus” .

I’ve during that time learned not to use q (and neither the quotes property), and to recommend the same.

Thanks for adding to the conversation. Could you expand on your problems with q and quotes?

It’s probably that I’m dense, but after reading your links I don’t see cut and dry reasons to avoid them, particularly since all modern browsers are now consistent in their handling of the q element. I see mention of internationalization issues (difficulty in supporting all languages), wishes for a different implementation, and discussion of how q’s been misused, but no discussion of why q should be avoided altogether. Your 2004 link says that q has caused harm, but I don’t see what that harm is or why it’s caused.

Assuming internationalization isn’t a concern for a particular website (arguable whether that shouldn’t be a concern for all websites), are there other issues that q creates? And what issues have you found with the quotes property?

The threads were examples, they’re probably hard to parse and there are probably more interesting ones. It may be worth a post on its own but in essence, for inline quotations it’s really not necessary to use extra markup (nor styling for that markup, as with quotes —use actual quotation marks ). You can do it, yes, but it’s not worth the effort.

(Just the summary for how I’d lay down the case with q and quotes , a case which makes me curious to collect your points and reopen and reevaluate it.)

The q tag can certainly be extra markup and it certainly isn’t required. As the spec says, quotation marks are just as valid. But like all HTML tags I view it more as a tool to be used when the job is right for it. If you want to style quotations a little differently or pull them out programmatically or use the cite attribute to reference the source or have automatic quote levels etc. then it’s the right time to use a q tag. If you prefer to type less (I usually do) or, as Knud points out in their comment, the quote’s going to be copied often, then a q tag’s probably not the right choice.

umm, I don’t like “Many modern browsers will automatically add quotation marks” this means if I select and copy some text to “quote” somewhere that isn’t html, I will have to manually insert all the quotation marks into the text again.

regarding <q> tag, the broswer will also adjut the quotation character depending of the language. For exameple here in French we use « guillemets » for quotations (and nested quotations), and it render very well.

I noticed that, if the lang element is missing, Firefox will use the system language, Chrome will stick to english of some kind.

The figure method looks dev-friendly and flexible in terms of content and layout, is it accessible?

I’m far from an accessibility expert, but since all tags are used semantically and there’s nothing funky or obfuscating beyond an additional tag or two, I’d venture to say that screen readers and other assistive technologies should be able to handle it. I would be more than happy to cede that opinion to an expert, though, if someone disagrees.

N.B. If you google this issue you may come across an HTML5 Doctor article from 2013 that contradicts much of what’s laid out here. That said, every time it links to the docs for support, the docs agree with the article you’re currently reading rather than the HTML5 Doctor article. Most likely the docs have changed since that article was written. John Rhea

Thanks for pointing out the broken links in the article: cite and blockquote – reloaded they are now fixed. The W3C HTML Recommendation has not changed, just that some links to W3C HTML now redirect.

I believe the <blockquote> element lets you put its source material (such as its <cite> ) in a <footer> inside it, but that’s just an alternative to your <figure> pattern, which I quite also like.

“The spec makes a point of saying that the URL can be surrounded by spaces.” The spec is very unhelpful in this respect. If the page is being converted from LTR to RTL, or vice-versa, then spaces within an attribute value will often mess things up entirely. Outer spaces between a quote (single or double) and the content should be avoided. If spaces are of any use in an attribute, the chances are that coding is involved, in which case the space can be added, or some special character can be converted.

Unless one gains some specific semantic advantage by use of the q element, I propose using the hard-coded punctuation marks freely available on the keyboard. Curly quotes are easy enough to use (even nesting rules are purdy simple). And the one mark saves a lot of bandwidth over the brackets and slashes. (P.s., as a general rule, Don’t quote: be quotable.)

Popular Tutorials

Learn python interactively, popular examples.

• Introduction
• What is HTML?

HTML Basics

• HTML Web Design Basics
• HTML Paragraphs
• HTML Headings
• HTML Comments
• HTML Unordered List
• HTML Ordered List
• HTML Description List
• HTML Line Break
• HTML Pre Tag
• HTML Horizontal Line

HTML Inline

• HTML Block and Inline
• HTML Images
• HTML Italic
• HTML Superscript and Subscript
• HTML Formatting
• HTML Meta Elements
• HTML Favicon
• HTML Form Elements
• HTML Form Action

Semantic HTML

• HTML Semantic HTML
• HTML div Tag
• HTML aside Tag
• HTML section Tag
• HTML footer Tag
• HTML main Tag
• HTML figure and figcaption
• HTML Accessibility

HTML, CSS & JavaScript

• HTML Layout
• HTML Responsive Web Design
• HTML and JavaScript

Graphics & Media

• HTML Canvas

HTML Miscellaneous

• HTML Iframes
• HTML Entities
• HTML Quotations
• HTML File Paths
• HTML Emojis
• HTML Symbols

HTML Quotation

The HTML quotation elements are used to insert the quoted text in the web page that is different from the standard text on the website. In this tutorial, we will learn about the following HTML Quotation elements.

• <blockquote>
• <q> tag

The <q> tag is used for short quotations that do not require paragraph breaks. For example,

Here, the quotation marks are coming from the <q> tag.

• <blockquote> tag

The <blockquote> tag defines the section of text that is quoted from another source. Another source is any place other than the current website. It is used to represent block of quoted text. For example,

In the above example, the <blockquote> tag displays the quoted text as a block with an indentation at the beginning that indicates that it is a quotation.

The cite attribute is an optional attribute used to add a URL that designates a source document for the information quoted. In this example, we can see that the above quote is quoted from the Programiz site.

Table of Contents

Explore your training options in 10 minutes Get Started

• Graduate Stories
• Partner Spotlights
• Bootcamp Prep
• Bootcamp Admissions
• University Bootcamps
• Coding Tools
• Software Engineering
• Web Development
• Data Science
• Tech Guides
• Tech Resources
• Career Advice
• Online Learning
• Internships
• Apprenticeships
• Tech Salaries
• Associate Degree
• Bachelor's Degree
• Master's Degree
• University Admissions
• Best Schools
• Certifications
• Bootcamp Financing
• Higher Ed Financing
• Scholarships
• Financial Aid
• Best Coding Bootcamps
• Best Online Bootcamps
• Best Web Design Bootcamps
• Best Data Science Bootcamps
• Best Technology Sales Bootcamps
• Best Data Analytics Bootcamps
• Best Cybersecurity Bootcamps
• Best Digital Marketing Bootcamps
• Los Angeles
• San Francisco
• Browse All Locations
• Digital Marketing
• Machine Learning
• See All Subjects
• Bootcamps 101
• Full-Stack Development
• Career Changes
• View all Career Discussions
• Mobile App Development
• Cybersecurity
• Product Management
• UX/UI Design
• What is a Coding Bootcamp?
• Are Coding Bootcamps Worth It?
• How to Choose a Coding Bootcamp
• Best Online Coding Bootcamps and Courses
• Best Free Bootcamps and Coding Training
• Coding Bootcamp vs. Community College
• Coding Bootcamp vs. Self-Learning
• Bootcamps vs. Certifications: Compared
• What Is a Coding Bootcamp Job Guarantee?
• How to Pay for Coding Bootcamp
• Ultimate Guide to Coding Bootcamp Loans
• Best Coding Bootcamp Scholarships and Grants
• Education Stipends for Coding Bootcamps
• Get Your Coding Bootcamp Sponsored by Your Employer
• GI Bill and Coding Bootcamps
• Tech Intevriews
• Our Enterprise Solution
• Connect With Us
• Publication
• Reskill America
• Partner With Us

• Resource Center
• Bachelor’s Degree
• Master’s Degree

A Guide to Using Quotes in HTML

There are several ways to cite sources or discern quotes from its surrounding text in HTML. Today, we go over the HTML Quotation Elements:  <blockquote> , <q> , <abbr> , <address> , <bdo> and <cite> . Each has their own unique use cases – we discern between each and show you how to use them in your markup.

The <blockquote> element is used for multi-line, lengthy quoted text. The element is used to differentiate the quote itself from the surrounding paragraphs or other HTML elements. Look at this example that uses a certain famous playwright’s soliloquy:

Find your bootcamp match

The <q> element puts quotation marks around a short quote. This is an inline element, much like <span> or <strong>, but for quotes. If your quote spans multiple lines, you should use <blockquote> instead. 

There are times you want to define an acronym without having to include it in the flow of your writing. You do that with the <abbr> tag. It is also an inline element, similar to <span>, <em>, or <q>. Define your acronym inside the title attribute in your <abbr> tag. 

The address element defines the contact information for the creator, either a person or business, and any of the following: physical address, email address, social media links, phone number, personal website, and other contact-like items. 

The text renders in italic and has a line break before and after the address block.

When working with languages that read from right to left, it’s easier to use a tag that renders text right-to-left for you as opposed to trying to do it on your own. Use the <bdo> element to render text with a bi-directional override. It takes a dir attribute that will indicate the direction. The default is “ltr”. “rtl” will render text right-to-left. 

The cite element is the final quotation element we talk about today. The cite tag defines the  title of a creative work. It is an inline element and renders in italic. 

Let’s review. Today we have looked at:

• <blockquote> – used for longer quotes
• <q> – used for shorter quotes no longer than one line
• <abbr> – used to define abbreviations in our text
• <address> – used to define contact information for the creator or author
• <bdo> – used to control whether text is rendered left-to-right or right-to-left
• <cite> – used to define the title of something

There are many quotation elements and each one has their use case. Be sure to correct the right one(s) for your project!

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication .

What's Next?

Get matched with top bootcamps

Ask a question to our community, take our careers quiz.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

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.

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:

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:

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:

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

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:

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.

Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

• Sign up Free

Code has been added to clipboard!

Quoting and Citing in HTML: Blockquote and Quote Elements

TL;DR – HTML blockquote and regular quote tags surround quotation text, preventing plagiarism. Citation tags refer to the title of the cited work.

• 1. Quoting and Citing in HTML
• 2. HTML Quote Code: Elements to Use
• 3. HTML Blockquote: Summary

Quoting and Citing in HTML

Quotation and citation are an important part of content writing on your website. To mark text passages that are cited or quoted, we use a few specific HTML elements:

When learning to write HTML quotation code, beginners often get confused about the difference between quotation and citation . It is actually very simple: quotation uses exact words from the author, and citation expresses their ideas using different words.

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced
• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features
• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

• Easy to navigate
• No technical issues
• Seems to care about its users
• Huge variety of courses
• 30-day refund policy

HTML Quote Code: Elements to Use

The quotation you want to include in your text should be inserted inside <q> tags. They surround an inline quote in HTML quotation marks automatically:

The HTML <blockquote> element separates the quote in a different manner: it is displayed as a block element with indentations:

Note: HTML blockquotes are usually used for longer quotes.

The HTML <cite> element defines the title of the work you're citing or quoting. The content of these tags has no HTML quotation marks and is usually displayed in italics:

HTML Blockquote: Summary

• HTML blockquotes can also be useful in styling , as they help to break the flow of your web page and divide it into sections.

HTML for Text Formatting

Html visuals and media, best-rated moocs to learn programming:.

Related Posts

Html5 tags list: get to know the most useful elements.

Find HTML5 tags explained and illustrated with beginner-friendly HTML5 examples. Grasp the difference between HTML5 tags & elements and learn to use both!

CSS Table Styling Properties and Techniques Explained

CSS table: how to use CSS table border property for your HTML table? Best way to design your HTML table. Learn CSS table design with examples.

HTML Text Formatting: Explanation, Tags and Examples

Master HTML text formatting quickly! How to bold text, italicize HTML? Find out everything there is about HTML text formatting usage form our examples.

Related Code Examples

EXCLUSIVE OFFER: GET 25% OFF

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

<blockquote>: The Block Quotation element

The <blockquote> HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

This element's attributes include the global attributes .

A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.

Usage notes

To change the indentation applied to the quoted text, use the CSS margin-left and/or margin-right properties, or the margin shorthand property.

To include shorter quotes inline rather than in a separate block, use the <q> (Quotation) element.

This example demonstrates the use of the <blockquote> element to quote a passage from RFC 1149 , A Standard for the Transmission of IP Datagrams on Avian Carriers .

Technical summary

Specifications, browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• The <q> element for inline quotations.
• The <cite> element for source citations.

• Web Development Updates

Web Typography - Creating Curly Quotes in HTML

Use-Cases of this Tutorial

• Know how create curly quotes in a HTML page.

It is generally recommended in web typography to use curly quotes instead of the normal "straight quotes", as the former looks better. Straight quotes are generated by typewriters, but a webpage should obviously look better.

In HTML we can create curly quotes around a given text using the Inline Quotation element, represented by the <q> tag.

Left & right, single & double curly quotes can also be created using HTML entity symbols.

Creating Opening Single Curly Quote

A single opening curly quote ‘ can be created with the HTML entity &#8216;

Creating Closing Single Curly Quote

A single closing curly quote ’ can be created with the entity &#8217;

Creating Opening Double Curly Quotes

Double closing curly quotes “ can be created with the entity &#8220;

Creating Closing Double Curly Quotes

Double closing curly quotes ” can be created with the entity &#8221;

In this Tutorial