Comments, Whitespace & Special Characters

Comments, Whitespace & Special Characters

HTML provides several features that help developers write readable, maintainable and correctly displayed web pages. Three important concepts are Comments, Whitespace and Special Characters.

1. HTML Comments

An HTML comment is a section of code written for developers or programmers that is ignored by the browser when rendering the webpage.

Comments are useful for explaining code, documenting sections, temporarily disabling code and helping developers understand the structure of a webpage.

Syntax of an HTML Comment

<!-- This is an HTML comment -->

Everything between <!-- and --> is treated as a comment.

Example

<h1>Welcome to HTML</h1>

<!-- This paragraph introduces the website -->

<p>HTML is used to create webpages.</p>

The browser displays the heading and paragraph, but the comment itself is not displayed on the webpage.

Comments Can Span Multiple Lines

An HTML comment can contain more than one line.

<!--
    This section contains
    information about HTML
    elements and attributes.
-->

Using Comments to Temporarily Disable Code

Developers can temporarily hide an HTML element by placing it inside a comment.

<h1>Main Heading</h1>

<!--
<p>This paragraph is temporarily disabled.</p>
-->

<p>This paragraph is visible.</p>

The commented paragraph will not appear on the webpage.

2. Uses of HTML Comments

Comments are mainly used to make HTML code easier to understand and maintain.

3. Whitespace in HTML

Whitespace refers to spaces, tabs and line breaks present in HTML source code.

Developers use whitespace mainly to improve the readability and organisation of HTML code.

Example

Consider the following HTML:

<p>HTML is easy to learn.</p>

It can also be written with extra spaces and line breaks:

<p>

    HTML

    is

    easy

    to

    learn.

</p>

In normal HTML rendering, browsers generally collapse consecutive whitespace characters into a single visible space.

Example of Collapsed Whitespace

<p>
    HTML       is
    easy       to
    learn.
</p>

The browser normally renders this approximately as:

Therefore, adding multiple spaces in ordinary HTML does not normally create multiple visible spaces on the webpage.

4. Why Whitespace Matters

Although browsers usually ignore extra whitespace during normal HTML rendering, developers should use whitespace carefully because it makes source code easier to read.

Poorly Formatted Code

<div><h1>HTML Course</h1><p>Learn HTML from beginner to advanced.</p></div>

Well-Formatted Code

<div>

    <h1>HTML Course</h1>

    <p>
        Learn HTML from beginner to advanced.
    </p>

</div>

Both versions can produce the same visible content, but the second version is much easier for a developer to read and maintain.

5. How to Preserve Whitespace

Sometimes the exact spaces and line breaks are important. HTML provides ways to preserve or represent whitespace explicitly.

The <pre> Element

The <pre> element displays preformatted text. Spaces and line breaks inside it are generally preserved.

<pre>
HTML
    CSS
        JavaScript
</pre>

The browser preserves the formatting inside the <pre> element.

Example: Displaying Code

<pre>
<h1>Hello World</h1>
<p>Welcome to HTML.</p>
</pre>

The <pre> element is commonly useful for displaying code, poems, ASCII diagrams and other preformatted text.

6. Special Characters in HTML

Some characters have a special meaning in HTML syntax. For example, the less-than symbol < is used to begin an HTML tag.

If we want to display such characters as ordinary text, we can use HTML character entities.

What is an HTML Entity?

An HTML entity is a special notation used to represent a character that may have a special meaning in HTML or may not be conveniently entered directly.

Entities generally begin with & and end with ;.

&entity-name;

Numeric character references can also be used.

&#number;

7. Common HTML Special Characters and Entities

8. Displaying < and >

The symbols < and > have special meaning in HTML because they are used to define tags.

To display them as ordinary text, use:

<
>

Example

<p>
    Use &lt;h1&gt; to create a level-one heading.
</p>

The browser displays:

Comparison Example

<p>5 &lt; 10</p>
<p>20 &gt; 15</p>

Output:

9. Displaying the Ampersand (&)

The ampersand symbol & is used to begin an HTML character entity.

To safely represent the ampersand character in HTML, use:

&

Example

<p>Research &amp; Development</p>

Output:

10. Non-Breaking Space

The entity &nbsp; represents a non-breaking space.

Unlike an ordinary space, a non-breaking space prevents the browser from breaking the line at that position.

<p>New&nbsp;York</p>

The browser displays:

The two words are treated as a single unit for line wrapping.

11. Quotation Marks and Entities

HTML provides entities for quotation marks.

"  →  "
'  →  '

Example

<p>
    She said, &quot;HTML is easy to learn.&quot;
</p>

Output:

12. Copyright, Registered and Trademark Symbols

HTML entities can also be used to display commonly used typographical and legal symbols.

©   → ©
®    → ®
™  → ™

Example

<p>CodeStep Academy&copy;</p>
<p>Example Brand&trade;</p>
<p>Example Product&reg;</p>

13. Unicode Characters

HTML pages can display a very large range of characters through Unicode, including characters from different writing systems, mathematical symbols and emoji.

A numeric character reference can be used when required.

😀

This represents the Unicode character associated with the decimal code point.

Hexadecimal Character Reference

Unicode characters can also be represented using hexadecimal notation.

😀

Both decimal and hexadecimal numeric character references can be useful when a character is difficult to type directly.

14. Displaying HTML Code on a Webpage

When teaching or documenting HTML, you often need to display HTML code as text instead of allowing the browser to interpret it as actual markup.

For example, suppose you want the browser to display:

The angle brackets must be represented using entities.

<p>
    &lt;h1&gt;Hello World&lt;/h1&gt;
</p>

This technique is especially important when creating programming tutorials, documentation and educational websites.

15. Comments vs Visible Text

16. Complete Example

<!-- Main heading -->

<h1>HTML &amp; Web Development</h1>

<p>
    Learn HTML from &lt;beginner&gt; to &lt;advanced&gt; level.
</p>

<!--
    The following paragraph contains
    additional information.
-->

<p>
    Copyright &copy; 2026 Example Academy.
</p>

What Happens?

• The first comment is ignored by the browser.
• &amp; displays the ampersand character.
• &lt; displays the less-than symbol.
• &gt; displays the greater-than symbol.
• The second comment is also ignored during rendering.
• &copy; displays the copyright symbol.

Common Beginner Mistakes

• Forgetting to close an HTML comment with -->.
• Using comments to store passwords, API keys or confidential information.
• Assuming that pressing multiple spaces in HTML creates multiple visible spaces.
• Using repeated &nbsp; entities for page layout instead of using CSS.
• Writing < directly when the intention is to display it as ordinary text.
• Forgetting that & begins an entity reference.
• Confusing HTML comments with CSS comments.
• Using comments excessively and making the source code unnecessarily difficult to read.

HTML Comments vs CSS Comments

Different technologies use different comment syntax.

Best Practices

• Write comments that explain why something is being done when the purpose is not obvious.
• Keep comments concise and relevant.
• Use comments to divide large HTML documents into logical sections.
• Never store sensitive information in comments.
• Use indentation and whitespace consistently.
• Use HTML entities when a character has special meaning in HTML syntax.
• Use CSS rather than repeated whitespace or &nbsp; entities for page layout.
• Use <pre> when exact whitespace and line breaks need to be preserved.

Practical Activity

Create an HTML page that demonstrates comments, whitespace and special characters.

Requirements

1. Add a comment before the main heading.
2. Create a paragraph containing an ampersand.
3. Display the symbols < and > as text.
4. Display the copyright symbol.
5. Use a non-breaking space between two words.
6. Use a <pre> element to display formatted text.

Challenge

Display the following HTML code as visible text on the webpage:

Exam Questions

<!-- Comment text -->

Interview Questions

1. Are HTML comments displayed on a webpage?

No. The browser does not render HTML comments as visible webpage content.

2. Can a user see HTML comments?

Yes. Although comments are not displayed on the page, they can generally be viewed through the page source or browser developer tools.

3. Why should sensitive information not be placed in comments?

Because comments are included in the HTML source sent to the browser and can therefore be accessed by users.

4. Does HTML preserve multiple spaces?

In normal HTML text, consecutive whitespace is generally collapsed into a single visible space. Special techniques such as <pre> can be used when exact whitespace must be preserved.

5. Why is &lt; used instead of < when displaying code?

Because < has special meaning in HTML. Using &lt; tells the browser to display the less-than character as text rather than interpreting it as the beginning of a tag.

6. What is the difference between &nbsp; and a normal space?

A normal space can be collapsed and can act as a line-breaking point. A non-breaking space keeps the connected words together when the browser wraps text.

7. Should &nbsp; be used for page layout?

Generally, no. CSS should be used for layout, alignment, margins and spacing. &nbsp; should be used when a non-breaking space is actually required.

Think Like a Web Developer

Quick Reference

Memory Trick

Exam Tips

• Remember the exact syntax: <!-- ... -->.
• Do not confuse HTML comments with CSS or JavaScript comments.
• Remember that normal HTML whitespace is generally collapsed.
• Remember &nbsp; as the non-breaking space entity.
• Learn the four most important entities: &lt;, &gt;, &amp; and &quot;.
• For code-display questions, remember that HTML entities prevent the browser from interpreting markup as actual tags.
• For layout questions, mention CSS rather than using repeated spaces or &nbsp;.

Final Checkpoint

Before moving to the next topic, make sure you can:

• Write an HTML comment correctly.
• Explain why comments are useful.
• Explain how browsers handle normal whitespace.
• Use <pre> to preserve formatting.
• Explain what an HTML entity is.
• Write the entities for <, >, & and a quotation mark.
• Explain the purpose of &nbsp;.
• Display HTML code as visible text on a webpage.
• Distinguish between HTML, CSS and JavaScript comments.
• Explain why sensitive information should never be stored in HTML comments.