Ever run into a webpage that looks fine, but a file will not open or a browser behaves strangely? This guide explains HTML Escape Table for Common Special Characters through one small example you can test.
Here is the main idea: The five especially useful characters are ampersand, less-than, greater-than, double quote, and apostrophe, depending on text or attribute context. Escape untrusted text based on its insertion context.
The important rule
The five especially useful characters are ampersand, less-than, greater-than, double quote, and apostrophe, depending on text or attribute context. Escape untrusted text based on its insertion context.
Example to study
<p>To show a tag, type <strong>Hello</strong>.</p>
<p>Tom & Maya</p>How to read the example
Look for the part of the example that implements this rule. Unlike ordinary paragraphs and headings, resource formats and browser processing rules may not be visible until you inspect the request, edit the file, or reload the page. Keep the example beside the explanation and check them together.
A file named in src or href must exist in the project. A line starting with Content-Type or HTTP/ belongs to the server response, not the body of an HTML page. These are different parts of how the web works, and mixing them up is a common source of errors.
When this matters in a real site
Keep this rule handy when you run into a broken asset, unexpected parsing result, incorrect value, or compatibility problem. Use the Elements and Network panels, source view, and an HTML validator as appropriate. Fix only one variable at a time: that makes the reason for the change much easier to understand.
Try it yourself
Copy the example into a small test page or a local server setup. Change one detail at a time and reload. Write down what changed in the rendered page, the DOM inspector, and the network panel (where relevant). Keep the original working version so you can compare the two.
Common Beginner Mistakes
- The five especially useful characters are ampersand, less-than, greater-than, double quote, and apostrophe, depending on text or attribute context. Escape untrusted text based on its insertion context.
- Trying to fix a server response header only by editing visible HTML text.
- Assuming a feature is supported everywhere because one browser accepted the example.
Key Takeaways
- The five especially useful characters are ampersand, less-than, greater-than, double quote, and apostrophe, depending on text or attribute context. Escape untrusted text based on its insertion context.
- Test the specific browser or server behavior instead of trusting appearance alone.
- Use a small reproducible example when documenting or debugging a problem.