FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Basics

Intermediate

HTML Entities

Learn HTML Entities as a practical HTML text lesson with syntax, examples, common mistakes, accessibility notes and a live code lab.

HTML text basics

HTML entities let you write reserved or special characters safely.

Some characters have a special meaning in HTML. The less-than sign starts a tag. The ampersand starts an entity. If you want to show those characters as text, you must escape them.

Entities can be named, such as <, or numeric, such as <. In normal modern pages, UTF-8 lets you type many characters directly, but reserved characters still need care.

The most common entities are the ones that protect markup: &amp;lt; for <, &amp;gt; for > and &amp;amp; for &.

&amp;lt;

Displays the less-than character: <

&amp;gt;

Displays the greater-than character: >

&amp;amp;

Displays the ampersand character: &

&amp;quot;

Displays a double quote inside contexts where it must be escaped.

&amp;apos;

Displays an apostrophe. Support is fine in HTML5.

&amp;nbsp;

Creates a non-breaking space. Use sparingly.

Syntax and meaning

Escape characters when the browser would otherwise parse them as HTML.

Entities are especially important inside code examples, text that contains angle brackets and generated HTML output.

Good entity usage

<p>Write &lt;h1&gt; for the main heading element.</p>
<p>Tom &amp; Jerry uses an escaped ampersand.</p>
<p>The price is 10&nbsp;EUR so the number and unit stay together.</p>

Weak entity usage

<p>Write <h1> for the main heading element.</p>
<p>Tom & Jerry uses an unescaped ampersand.</p>
<p>Use&nbsp;non-breaking&nbsp;spaces&nbsp;for&nbsp;every&nbsp;space.</p>

Practical rules

Use the element for meaning first, then polish it with CSS.

These rules are the part that saves time in real projects. If the HTML meaning is clean, CSS, JavaScript, accessibility checks and search optimization become easier to reason about.

Escape angle brackets

Use &lt; and &gt; when showing HTML tags as text.

Escape ampersands

Use &amp; when the ampersand is literal text, especially in generated markup.

Prefer UTF-8 for normal text

Modern pages can usually store symbols, accents and international text directly when charset is UTF-8.

Use nbsp sparingly

Non-breaking spaces can hurt responsive layouts when overused.

Escape generated content

If content comes from users or databases, escape output to prevent broken markup and security issues.

Know the context

Escaping rules differ between HTML text, attributes, URLs, CSS and JavaScript.

Production thinking

Small text decisions affect accessibility, SEO and maintainability.

Why does this matter?

Text markup matters because browsers and assistive technology do not only see letters. They also read structure, emphasis, quotes, code and relationships between pieces of text.

Accessibility

Entities render as characters, so assistive technology reads the resulting character, not the entity name.

Production note

Output escaping is a security habit. In PHP, for example, htmlspecialchars protects HTML text and attributes when used correctly.

SEO note

Entities are normal characters after parsing. Use them for correctness, not as a ranking trick.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Change one tag, attribute or text value in the example.
  • Run the preview and describe exactly what changed.
  • Reset the lab and repeat the same change without looking at the original.

Practice assignment

Do this before moving to the next lesson.

  1. Change one meaningful part of the HTML, not only the visible text.
  2. Run the preview and check whether the result still makes semantic sense.
  3. Explain why the element or attribute you changed belongs in this exact place.

Try it yourself

Show HTML as text

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?