Comments & Character References

After this lesson, you can write comments and display special characters without having them interpreted as HTML tags.

BEGIN WITH A QUESTION

Understanding begins with a question.

How can a page show ‘Use <p> for a paragraph’ without the browser interpreting <p> as a new tag?

Write comments and display special characters without having them interpreted as HTML tags.

UNDERSTAND THE CONCEPT

Characters with special roles

The < character opens a tag. To display it as text, write <. Use > for > and & for &. These are character references. After the browser reads them, readers see ordinary characters rather than the reference sequences.

Notes for people editing the code

Write a comment as . Comments do not appear as page content, but remain visible in source code. Never put passwords, personal data, or secrets in comments.

Use references when needed

With UTF-8, letters such as é and symbols such as © can be written directly. Character references are useful when characters conflict with HTML syntax. Do not nest comments, and always close them with -->.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<!-- A syntax example for readers -->
<p>Write &lt;p&gt; to create a paragraph.</p>
<p>Books &amp; notes complement each other.</p>

BROWSER RESULT

The comment does not appear. Readers see <p> as text and one & character in the second sentence.

COMMON MISTAKES

<p>Write <p> for a paragraph.</p>

The browser interprets the second <p> as markup. Replace its angle brackets with < and > when displaying code as text.

TRY TOGETHER

Practice clarifies understanding.

Complete the character reference for <.

<p>h1&gt;</p>

Show a hint

The common reference name is lt, between & and ;.

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Write a note about HTML

Create a paragraph displaying exactly ‘Use <h1> for a heading.’, followed by a paragraph reading ‘Books & Garden’. Add one comment explaining the example's purpose. The sample tag must be visible as text.

<p>Use <h1> for a heading.</p>
<p>Books and Garden</p>

index.htmlHTMLLn 1, Col 12 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

<, >, and & display special characters.
HTML comments remain visible in source code.
Distinguish code meant to run from code meant to be displayed as text.

HTML syntaxDebugging

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Character reference °HTML tag °Character encoding °

Library: Three languages behind one page ↗

Take the Chapter Trial →