Using HTML Escape Codes

3/15/2017


Often times when writing a technical article for the web that deals with HTML, it becomes necessary to show the actual markup elements that you are writing about. To do that, the HTML elements need to be escaped or replaced by a reference that renders them as they are. The most common method is by using named character references. This will enable you to display HTML elements such as this button Submit while also showing the code that creates it.
Example: <a href="#" class="btn btn-primary btn-xs">Submit</a>

The method for doing this involves replacing the characters used in HTML with either their named or numeric reference. A excellent list of all numeric and named codes can be found here.

The common escape codes for HTML:

  • ➢  &quot;  replaces "
  • ➢  &amp;  replaces &
  • ➢  &lt;  replaces <
  • ➢  &gt;  replaces >

Obviously, with a large block of code, this can become time consuming. Below is a widget to escape, copy, and paste your HTML into your web page. The preview panel at the bottom will show the escaped HTML as it will render in a browser.

Escape your HTML:

  1. Copy a block of code
  2. Paste it into the text box below
  3. Click the Escape button
  4. Select and copy the escaped code from text box
  5. Paste your code within the <pre></pre> elements in your HTML.

Here is a preview of how your escaped HTML will look in a browser.


                

Categories

Technology  

The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.
~Isaac Asimov

Learn more »


Education  

Education must not simply teach work; it must teach Life.
~W. E. B. Du Bois

Learn more »


On the Web  

The Internet is the trailer park for the soul.
~Marilyn Manson

Learn more »


Christianity  

I gave in, and admitted that God was God.
~C. S. Lewis

Learn more »


Books  

So many books, so little time.
~Frank Zappa

Learn more »


Music  

Ah, Bach! I'm partial to the fugue.
~Walter Radar O'Reilly

Learn more »


Sports  

You can observe a lot by watching.
~Yogi Berra

Learn more »


Projects  

The best-laid schemes o' mice an' men Gang aft agley, An' lea'e us nought but grief an' pain, For promis'd joy!
~Robert Burns

Learn more »