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:
<inputvalue="This will "break"theHTML"/>
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:
<inputvalue='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:
Would display as You not You're going to "break" the HTML.
The same is true if we use double quotes:
<inputvalue="You're going to "break"theHTML"/>
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:
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:
<inputvalue="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.