HTML Tokenization: Tags, Comments, and Character References

A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore tokenization: tags, comments, and character references using a short example that you can inspect and change.

The Idea in Plain English

Character references let you write characters that otherwise have a special meaning in HTML source. For example < shows a less-than sign as text instead of starting a tag.

You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<p>Write &lt;strong&gt; to begin a strong element.</p>
<p>A &amp; B can be displayed safely.</p>
<p>A quotation mark can be written as &quot;.</p>

What Each Part Does

A paragraph keeps one idea together as readable text.
The browser reads these lines in order and uses them to build the page or request.
Changing the relevant value lets you test what this feature controls.

The browser displays the characters, not the entity spelling.

Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.

Try It Yourself

Try this next: compare authored source against the DOM tree in DevTools focused on HTML Tokenization: Tags, Comments, and Character References, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.

Common Beginner Mistakes

Forgetting to encode an ampersand in a URL query string placed inside an HTML attribute.
Changing several parts of the example at once, making it difficult to see which part caused a different result.
Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

Character references let you write characters that otherwise have a special meaning in HTML source. For example < shows a less-than sign as text instead of starting a tag.
The browser displays the characters, not the entity spelling.
Test the markup in a browser, and check accessibility and real-world behavior where relevant.