đïž The Secret Notes of HTML: Comments & Characters
Imagine youâre writing a letter to a friend, but you also want to leave yourself little sticky notes that only YOU can see. Thatâs exactly what HTML comments are!
đ The Universal Analogy: The Directorâs Script
Think of HTML like a play script. The audience sees the actors perform, but they never see the directorâs notes written in the margins. Those notes say things like âpause here for dramatic effectâ or âremember: sad face!â
In HTML:
- What the audience sees = What appears in the browser
- Directorâs notes = HTML comments (hidden from viewers!)
- Stage props & special effects = Character entities (special symbols)
đ HTML Comments: Your Secret Notes
What Are They?
Comments are messages you write in your code that browsers completely ignore. Theyâre invisible to anyone visiting your webpage!
The Magic Formula
<!-- This is a comment! -->
<!-- Browsers pretend this doesn't exist -->
Start with <!-- and end with -->
Why Use Comments?
- Leave notes for yourself (like âfix this later!â)
- Explain tricky code to others
- Temporarily hide code without deleting it
<!-- TODO: Add a cool image here -->
<h1>Welcome!</h1>
<!-- This button is broken, hiding it for now
<button>Don't click me!</button>
-->
â ïž Warning!
Comments are hidden from the browser display, but anyone can see them by viewing your page source (right-click â View Source). Donât put secrets in comments!
đ Comments for Documentation
What Does âDocumentationâ Mean?
Itâs like writing a recipe with helpful tips!
<!--
NAVIGATION SECTION
This menu appears on every page.
Last updated: December 2024
-->
<nav>
<a href="home.html">Home</a>
<a href="about.html">About</a>
</nav>
<!-- MAIN CONTENT STARTS HERE -->
<main>
<!-- Article written by Alex -->
<article>
<h2>My Story</h2>
</article>
</main>
<!-- MAIN CONTENT ENDS HERE -->
Good Documentation Habits
| â Do This | â Donât Do This |
|---|---|
| Explain WHY code exists | State the obvious |
| Mark sections clearly | Write novels |
| Note important dates | Put passwords here |
đŹïž Whitespace Handling: The Invisible Squisher
The Big Surprise
In HTML, extra spaces get squished into one!
<p>Hello World</p>
What you wrote: 5 spaces between words
What browser shows: Hello World (just 1 space!)
The Squishing Rules
graph TD A[Multiple Spaces] --> B[Become 1 Space] C[Multiple Line Breaks] --> D[Become 1 Space] E[Tabs] --> F[Become 1 Space]
Real Example
<p>
This has lots
of spaces and
line breaks!
</p>
Browser shows: This has lots of spaces and line breaks!
All those extra spaces and line breaks? Squished! đ«
đ€ Character Encoding: Speaking the Same Language
The Problem
Computers think in numbers. How do they know that 65 means the letter A?
The Solution: UTF-8
UTF-8 is like a giant dictionary that tells computers:
65= A66= B128512= đ
<meta charset="UTF-8">
Put this in your <head> section. Always. Every time.
Why It Matters
Without proper encoding:
cafĂ©might becomecafĂ©æ„æŹmight becomeʄʏ- Emojis might become
???
graph TD A["Your Text: Hello! đ"] --> B{Has UTF-8?} B -->|Yes| C["Shows: Hello! đ"] B -->|No| D["Shows: Hello! ???"]
âš Character Entities: The Special Symbol Codes
The Problem
What if you want to show < in your webpage? The browser thinks itâs HTML!
<!-- BROKEN: Browser gets confused -->
<p>5 < 10 is true</p>
<!-- FIXED: Use the special code! -->
<p>5 < 10 is true</p>
How They Work
Every entity has two formats:
| Symbol | Named Code | Number Code |
|---|---|---|
| < | < |
< |
| > | > |
> |
| & | & |
& |
| " | " |
" |
| © | © |
© |
| ⏠| € |
€ |
The Essential Four
These symbols have special meaning in HTML, so you MUST use entities:
<!-- The Big Four -->
< <!-- Less than: < -->
> <!-- Greater than: > -->
& <!-- Ampersand: & -->
" <!-- Quote: " -->
Real Example
<p>
In math, we write <html> as code.
Tom & Jerry are friends.
She said "Hello!"
</p>
Shows: In math, we write as code. Tom & Jerry are friends. She said âHello!â
đ§ Non-Breaking Space: The Glue Space
The Problem
Sometimes you DONâT want words to split across lines.
<p>Mr. Smith went to 10 Downing Street.</p>
On a narrow screen, this might break like:
Mr.
Smith went to 10 Downing
Street.
Ugly! âMr.â and âSmithâ got separated! đ±
The Solution:
The non-breaking space glues words together!
<p>Mr. Smith went to 10 Downing Street.</p>
Now âMr. Smithâ and â10 Downing Streetâ stay together!
When to Use
| Use Case | Example |
|---|---|
| Titles with names | Dr. Jones |
| Numbers with units | 100 km |
| Dates | 25 December |
| Addresses | 10 Main St |
â ïž Donât Overuse!
<!-- â WRONG: Using for spacing -->
<p>Hello World</p>
<!-- â
RIGHT: Use CSS for spacing -->
<p style="margin-left: 20px;">World</p>
đŻ Quick Reference Card
graph TD A[HTML Comments & Characters] --> B[Comments] A --> C[Whitespace] A --> D[Character Encoding] A --> E[Character Entities] A --> F[Non-Breaking Space] B --> B1["<!-- hidden -->"] C --> C1["Spaces squish to 1"] D --> D1["<meta charset=UTF-8>"] E --> E1["&lt; &gt; &amp;"] F --> F1["&nbsp;"]
đ Remember This!
- Comments = Secret notes browsers ignore
- Whitespace = Extra spaces get squished
- UTF-8 = Always set your character encoding
- Entities = Special codes for special symbols
= Glue that keeps words together
đź You Got This!
HTML comments and special characters might seem like small details, but theyâre the foundation of writing clean, professional code. Now you know:
- How to leave helpful notes in your code
- Why your extra spaces disappear
- How to show any symbol on your webpage
- When to use that magical non-breaking space
Youâre not just codingâyouâre communicating! đ
Next time you see weird symbols or comments in code, youâll know exactly whatâs happening. Thatâs the power of understanding the basics!