HTML HTML Character References in Text and Attributes

Characters such as < and & have special meaning in HTML source. Character references let you show them as normal text instead of having them mistaken for markup.

What You Need to Know

For example, &lt; displays a less-than sign and &amp; displays an ampersand. Use &quot; when a quotation mark needs escaping in an attribute value.

The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.

Example: See It in Action

Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.

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

<p>Use &lt;strong&gt; for importance.</p>
<p>Tea &amp; cookies cost &euro;5.</p>
<p title="A &quot;special&quot; message">Hover me.</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 “Use <strong> for importance.” 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 “Use <strong> for importance.”. 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

1. Write a paragraph showing the text <h1> without creating a real h1 element.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Typing a raw < character where the browser may interpret it as the start of a tag.
• Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

• Characters such as < and & have special meaning in HTML source.
• A p groups a paragraph of related text. Start another paragraph for a new thought.
• For example, &lt; displays a less-than sign and &amp; displays an ampersand. Use &quot; when a quotation mark needs escaping in an attribute value.