Single Quote in HTML
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:
<img src='cat.png'/>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:
<input value='hello'/>You could also do the same using double quotes, in which case your HTML will look like this:
<input value="hello"/>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:
<input value='it's'/>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:
<input value="This will "break" the HTML"/>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:
<input value="it's"/>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:
<input value='This will not "break" the 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:
<input value='You're going to "break" the HTML'/>Would display as You not You're going to "break" the HTML.
The same is true if we use double quotes:
<input value="You're going to "break" the HTML"/>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 ' is the same as using a single quote.
It is strange when you first set it but the browser will read this string ' 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:
‘’‘’‘’''‘'
So which one should you use when you need to escape.
The short answer is you should use '. This is the official escape string to use for HTML 5. So using our example from earlier we could write:
<input value='it's'/>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:
“”“”“”"""
The only one you should use is ". So taking our example where you have both single and double quotes your HTML would look like this:
<input value="You're going to "break" the HTML"/>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
& - < becomes
< -
becomes
> - " becomes
" - ' becomes
'
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 '.
How do you escape a single quote in HTML?
Our recommendation is to use the HTML 5 standard '.
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:
- " becomes
" - ' becomes
'
Remember that you will only ever need to escape 5 special characters:
- & becomes
& - < becomes
< -
becomes
> - " becomes
" - ' becomes
'
Once you have these escaped you should never have an issue with broken values in HTML again.