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. An excellent list of all numeric and named codes can be found here.
Common escape codes for HTML:
- ➢ " replaces "
- ➢ & replaces &
- ➢ < replaces <
- ➢ > 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:
- Copy a block of code
- Paste it into the text box below
- Click the Escape button
- Select and copy the escaped code from text box
- 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.