HTML HTML Reserved Characters and Safe Escaping

Less-than signs, ampersands, and quotation marks can have special meaning in markup. Escaping characters protects the boundary between text and HTML syntax.

What You Need to Know

Escape only where needed: < in visible text, & for a literal ampersand, and " inside certain quoted attribute values. This is separate from safe handling of untrusted input.

Example: See It in Action

Add this example to the appropriate part of a practice HTML page. Read each line before you open the page in your browser.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<p>The price is 5 &lt; 10, but 10 &gt; 5.</p>
<p>R&amp;D stands for research and development.</p>
<p title="He said &quot;hello&quot;">Read the tooltip.</p>

Let’s Understand the Example

A p groups a paragraph of related text. Start another paragraph for a new thought.
Title adds advisory information, but it is not a substitute for readable visible labels.

Look for the text “The price is 5 < 10, but 10 > 5.” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.

What Should You See?

The page should include “The price is 5 < 10, but 10 > 5.”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.

Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.

Try It Yourself

Display the text Cats & Dogs < 10 as text, not as markup.
Save your changes, open or refresh the page, and compare the result with the original example.
Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

Confusing HTML escaping with URL encoding or assuming it fully prevents unsafe content injection.
Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

Less-than signs, ampersands, and quotation marks can have special meaning in markup.
A p groups a paragraph of related text. Start another paragraph for a new thought.
Escape only where needed: < in visible text, & for a literal ampersand, and " inside certain quoted attribute values. This is separate from safe handling of untrusted input.