Languages
[Edit]
EN

HTML - characters that should be escaped

10 points
Created by:
Kevin
797

In this short article, we would like to count what characters should be escaped in HTML.

Quick solution:

REPLACED ALWAYS:

&    should be replaced with    &
<    should be replaced with    &lt;
>    should be replaced with    &gt;


REPLACED CONDITIONALLY in element attribute (depending on the case):

"    should be replaced with    &quot;    e.g.   <div attribute="abc &quot; abc"></div>
'    should be replaced with    &#39;     e.g.   <div attribute='abc  &#39; abc'></div>

 

Detailed description

CharacterHTML escape codeDescription
&&amp;It is required to escape this character because it is used as an escape character, e.g. &lt;&gt;&quot;&#39;, etc.
<&lt;Opens HTML elements.
>&gt;Closes HTML elements.

Additionally, inside of attribute values, it is necessary to escape the quote character:

CharacterHTML escape codeDescription
"&quot;

Needed only when " opens and closes the valve.
e.g.

<p title="&quot;John&quot; life story ...">
    Few words about John life story...
</p>
'&#39;

Needed only when ' opens and closes the valve.
e.g.

<a href='https://john.com' title='John&#39;s site'>
    Home
</a>

Hint: It is recommended to use " with attribute values.

Warning: use &#39; or &#039; or &#0039; because of:

  • &apos; is not supported by IE8,
  • &apos;  is not defined in HTML 4 (defined since HTML 5).

 

Practical example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <p title="&quot;John&quot; life story ...">Few words about John life story...</p>
  <a href='https://john.com' title='John&#39;s site'>Home</a>
  <p>Source code should be placed between &lt;code&gt; and &lt;/code&gt;.</p>
</body>
</html>

References

  1. 13.5 Named character references - HTML Living Standard
  2. Common HTML entities used for typography - W3C Wiki
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join