HTML / LESSON 13

Display special characters and HTML as text

Use character references when text would otherwise be interpreted as markup.

Content updated

By the end, you can…

  • Display reserved characters without creating unintended markup.
  • Distinguish a non-breaking space from ordinary spacing.
Before you begin

One idea at a time

The browser uses some characters to recognize HTML. A less-than sign can begin a tag, and an ampersand can begin a character reference. When you want to show markup as text, write references such as < and & so the browser knows what should be displayed rather than interpreted.

A named reference begins with an ampersand and ends with a semicolon. &lt; displays <, &gt; displays >, and &amp; displays &. The source contains several characters, but the result is one displayed character. This is why reading source code and reading the page can show different text.

You can type many symbols directly when your document uses UTF-8, including © and accented letters. You do not need to memorize a reference for every symbol. Use references when required by the markup context or when they make a character easier to enter and recognize in the source.

Distinguish an element from its written example

Remember first

code describes text as code. Character references make the angle brackets display as text instead of starting tags.

Compare these two roles

<strong>Important text
Usually displayed in bold. In <strong>Hello</strong>, the browser shows Hello without the tags.
<code>A piece of code in text
Usually displayed in a monospace font. It does not disable HTML parsing: still write &lt; and &gt; for visible angle brackets.

Keep the familiar container

<p>Paragraph around the example
p, strong, and code all have closing tags. &lt;strong&gt; spells a tag as text; <strong> starts an actual element.

Walk through an example

html
<p>Write &lt;h1&gt;Hello&lt;/h1&gt; to create a heading.</p>
<p>Seeds &amp; soil</p>
<p>&copy; 2026 My notebook</p>

The first paragraph displays the literal opening and closing h1 tags instead of creating a heading. The second displays an ampersand between Seeds and soil. The third displays the copyright symbol. The references are decoded as text; the resulting <h1> text is not parsed a second time as an element.

See it happen: try a small change

Markup and literal text look different

Switch between active markup and a written example of that markup. Notice whether the tags are visible.

Code to notice

<p>
<strong>Hello</strong>
</p>

Live result

Lesson example
index.htmlPreview

What changed: strong is an element here. The browser displays its content with default emphasis styling instead of showing the tags.

Quotes and spaces depend on context

In ordinary paragraph text, quotation marks can be typed directly. Inside an attribute surrounded by double quotes, a literal double quote would end the attribute value. Use &quot; for that character, or choose suitable surrounding quotes. The goal is to keep the boundary of the attribute clear.

&nbsp; is a non-breaking space. It can keep a short pair such as 10 kg together on one line. It is not a way to align columns or create large gaps. Repeating it for layout can cause overflow on small screens. Use normal spaces for ordinary prose and leave layout spacing to CSS.

A code element identifies a piece of code as text, but it does not automatically escape tags inside it. To show <p> inside code, still write &lt;p&gt;. The preview compares literal source with the rendered result so you can see this distinction directly.

Try it in your browser

Inside body, add the cheat-sheet paragraph and save. After refreshing, confirm that the angle brackets appear as text rather than creating a heading. Compare the same line in your editor: it should contain character references. Use ordinary spaces except where a pair of words must stay together.

A common wrong turn

Wrapping raw tags inside code does not prevent the browser from parsing those tags. Escape the reserved characters as well. Also do not replace every normal space with a non-breaking space; that prevents useful line wrapping.

Change one thing

Compare a real strong element with the literal text of its tags. Then change a copyright reference to the actual symbol and notice that the output can remain the same.

Your turn: write an HTML cheat sheet

Make a small HTML cheat sheet displaying the literal text <p>Hello</p>, the phrase Seeds & soil, and a copyright line. Include a sentence explaining that the displayed tags are examples, not active elements.

Try this in your own HTML file, then open the page in a browser. There is no separate checked practice for this task yet.

  1. Write the intended visible text before encoding it.
  2. Replace reserved characters where needed and keep the semicolons.
  3. Open the page and confirm the example tags are visible. Inspect the source to explain why they did not become elements.

Go to the source

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.