Which Characters Should Be Escaped Inside A “pre” tag?

The <pre> tag defines pre-formatted text. Everything (generally, text and code snippets) in a <pre> tag element is displayed in a fixed-width font, and preserves both spaces and line breaks in them. In other words, if anyone wants to show their code snippets on a web page, they can simply enclose their code in the tag.

But there are certain things which most of people completely miss. There are some reserved characters in the <pre> tag. Reserved characters are those characters that are meant to serve a specific or reserved purpose. So here is the list of all the reserved character that should also be escaped while writing the code inside it:

  • Less Than (<)
  • Greater Than (>)
  • Ampersand (&)
  • Single Quote or Apostrophe (‘)
  • Double Quotes (“)

As already mentioned there are some reserved characters in <pre> tag. These characters have a specific meaning and if we put these characters inside our <pre> tag, it will treat them as a reserved character, and hence, we need to escape them.

  • Less Than (<): It is reserved for use in tags (as in <div></div>). Thus, this character will have this specific meaning only. To escape them in <pre> tag tag, we need to use &lt; for HTML entity name or &#60; for HTML entity number as a replacement.
  • Greater Than(>): It is reserved for use in tags (as in <body></body>). Thus, this character will have this specific meaning only. To escape them in pre tag, we need to use &gt; for HTML entity name or &#62; for HTML entity number as a replacement.
  • Ampersand(&): It is reserved for entities such as &nbsp; which is the HTML entity name for non-breaking space. Thus, it will have that reserved meaning for the whole text inside pre tag. To escape them in pre tag, we need to use &amp; for HTML entity name or &#38; for HTML entity number as a replacement.
  • Single Quote or Apostrophe (‘): It is reserved for defining values to the attributes such as <div float:’left’> </div> and thus, will correspond to that meaning only in the whole code between pre tag. To escape them in pre tag, we need to use &#39; for HTML entity number as a replacement as this does not have any HTML entity name.
  • Double Quotes (“): It is again reserved for defining values to the attributes such as <div class:”title”> </div> and thus, will correspond to that meaning only in the whole code between pre tag. To escape them in pre tag, we need to use &quot; for HTML entity name or &#34; for HTML entity number as a replacement.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <center>
        <h2 style="color: green;">GeeksforGeeks</h2>
        <p>A Computer Science Portal for Geeks</p>
        <pre>
    <h2>GeeksforGeeks</h2>
    <p>A Computer Science Portal for Geeks</p>
</pre>
    </center>
</body>
  
</html>

chevron_right


Output:

Some other special symbols which needed to be escaped along with their entity name and entity number are :

Symbols Entity name Entity Number
Non-Breaking Space ( ) &nbsp; &#160;
Registered Trademark (®) &reg; &#174;
Copyright (©) &copy; &#169;
Euro (€) &euro; &#8364;
Pound (£) &pound; &#163;
Cent (¢) &cent; &#162;

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.