HTML Comments and Entity Characters
Comments and entity characters are essential tools in HTML that help you document your code and display special characters correctly.
HTML Comments
Comments allow you to add notes in your HTML that won’t be displayed in the browser. They’re useful for documentation, debugging, and temporarily disabling code.
Basic Comment Syntax
<!-- This is a comment -->
<h1>Welcome</h1><!-- This heading introduces the page -->Multi-line Comments
<!-- This is a multi-line comment You can write as many lines as you need Great for longer explanations-->
<section> <!-- TODO: Add more content here - Feature list - Testimonials - Call to action --></section>Inline Comments
<p>This is visible</p> <!-- This comment is on the same line -->
<div class="container"> <!-- Main wrapper --> <h1>Title</h1> <!-- Page heading --></div>Common Uses of Comments
Documentation
<!-- Header Section Contains logo, navigation, and search bar Created: 2024-01-15 Author: Dev Team--><header> <nav><!-- Navigation menu --></nav></header>Section Markers
<!-- ========== Header ========== --><header> <!-- Header content --></header>
<!-- ========== Main Content ========== --><main> <!-- Main content --></main>
<!-- ========== Footer ========== --><footer> <!-- Footer content --></footer>Temporarily Disabling Code
<!--<div class="old-banner"> This content is temporarily disabled</div>-->
<div class="new-banner"> This is the active content</div>Development Notes
<!-- FIXME: This form needs validation --><form> <input type="text" name="email"></form>
<!-- TODO: Add image gallery here --><div class="gallery-placeholder"></div>
<!-- NOTE: This section requires authentication --><section class="members-only"> <!-- Protected content --></section>Version Control
<!-- Version: 2.0 Last Updated: 2024-01-15 Changes: - Updated navigation structure - Added mobile menu - Improved accessibility-->Conditional Comments (Legacy IE)
Conditional comments were used for older Internet Explorer browsers (now deprecated):
<!-- For modern browsers, this is just a regular comment -->
<!--[if IE]> <p>This only shows in Internet Explorer</p><![endif]-->
<!--[if lt IE 9]> <script src="html5shiv.js"></script><![endif]-->Note: Conditional comments are obsolete and not supported in modern browsers.
HTML Entity Characters
Entity characters allow you to display reserved HTML characters and special symbols that would otherwise be interpreted as code.
Why Use Entities?
<!-- ❌ This won't display correctly --><p>Use <div> tags for containers</p>
<!-- ✅ Use entities instead --><p>Use <div> tags for containers</p>Reserved Character Entities
These characters have special meaning in HTML:
<!-- Less than -->< <!-- < -->
<!-- Greater than -->> <!-- > -->
<!-- Ampersand -->& <!-- & -->
<!-- Quotation mark -->" <!-- " -->
<!-- Apostrophe -->' <!-- ' -->Practical Example
<p>To create a paragraph, use <p> and </p> tags.</p>
<p>The formula is: 5 < 10 & 10 > 5</p>
<p>She said "Hello, World!"</p>
<code>const name = 'John';</code>Space Entities
<!-- Non-breaking space (won't collapse or break line) -->
<!-- En space (width of 'n' character) --> 
<!-- Em space (width of 'm' character) --> 
<!-- Thin space --> Example usage:
<!-- Regular spaces collapse to one --><p>Hello World</p><!-- Displays: Hello World -->
<!-- Non-breaking spaces preserve spacing --><p>Hello World</p><!-- Displays: Hello World -->
<!-- Keep words together --><p>Phone: 555-1234</p><!-- "555-1234" won't wrap to next line -->Common Symbol Entities
Currency Symbols
¢ <!-- ¢ cent -->£ <!-- £ pound -->¥ <!-- ¥ yen -->€ <!-- € euro -->$ <!-- $ dollar -->Mathematical Symbols
+ <!-- + plus -->− <!-- − minus -->× <!-- × multiplication -->÷ <!-- ÷ division -->= <!-- = equals -->≠ <!-- ≠ not equal -->< <!-- < less than -->> <!-- > greater than -->≤ <!-- ≤ less than or equal -->≥ <!-- ≥ greater than or equal -->± <!-- ± plus-minus -->½ <!-- ½ one half -->¼ <!-- ¼ one quarter -->¾ <!-- ¾ three quarters -->Punctuation and Symbols
© <!-- © copyright -->® <!-- ® registered trademark -->™ <!-- ™ trademark -->° <!-- ° degree -->¶ <!-- ¶ paragraph -->§ <!-- § section -->• <!-- • bullet -->… <!-- … ellipsis -->— <!-- — em dash -->– <!-- – en dash -->« <!-- « left angle quote -->» <!-- » right angle quote -->← <!-- ← left arrow -->→ <!-- → right arrow -->↑ <!-- ↑ up arrow -->↓ <!-- ↓ down arrow -->Accented Characters
<!-- Lowercase -->à <!-- à -->á <!-- á -->â <!-- â -->ã <!-- ã -->ä <!-- ä -->å <!-- å -->æ <!-- æ -->ç <!-- ç -->è <!-- è -->é <!-- é -->ñ <!-- ñ -->ö <!-- ö -->ü <!-- ü -->
<!-- Uppercase -->À <!-- À -->Á <!-- Á -->Ñ <!-- Ñ -->Numeric Character References
You can also use numeric codes (decimal or hexadecimal):
<!-- Decimal format -->© <!-- © copyright -->€ <!-- € euro -->™ <!-- ™ trademark -->
<!-- Hexadecimal format -->© <!-- © copyright -->€ <!-- € euro -->™ <!-- ™ trademark -->
<!-- Common emojis -->😀 <!-- 😀 grinning face -->👍 <!-- 👍 thumbs up -->❤ <!-- ❤ heart -->Practical Examples
Copyright Footer
<footer> <p>© 2024 Company Name. All rights reserved.</p> <p>Designed with ♥ in San Francisco</p></footer>Product Pricing
<div class="product"> <h3>Premium Plan</h3> <p class="price">€29.99/month</p> <p>Save 25% with annual billing</p></div>Mathematical Expressions
<p>Temperature: 72°F ± 2°</p><p>Formula: a² + b² = c²</p><p>Result: 5 × 4 ÷ 2 = 10</p>Code Examples
<article> <h2>Using the <img> Tag</h2> <p>The <img> tag requires a "src" attribute:</p> <code> <img src="photo.jpg" alt="Description"> </code></article>International Content
<p>Café • Résumé • Naïve</p><p>Señor • München • Ægir</p><blockquote> «C'est la vie» — French saying</blockquote>Navigation with Arrows
<nav> <a href="/prev">← Previous</a> <a href="/next">Next →</a></nav>
<p>Scroll to top ↑</p><p>Download ↓</p>Special Characters Table
<table> <tr> <th>Symbol</th> <th>Entity</th> <th>Description</th> </tr> <tr> <td>©</td> <td>&copy;</td> <td>Copyright</td> </tr> <tr> <td>®</td> <td>&reg;</td> <td>Registered</td> </tr> <tr> <td>™</td> <td>&trade;</td> <td>Trademark</td> </tr></table>Best Practices
Comments
- Keep comments relevant: Update or remove outdated comments
- Don’t over-comment: Only comment what needs explanation
- Use comments for structure: Mark major sections
- Avoid sensitive information: Comments are visible in source code
- Be professional: Comments may be seen by others
- Use consistent format: Maintain a commenting style
<!-- ✅ Good: Helpful and clear --><!-- Navigation: Desktop version (hidden on mobile) --><nav class="desktop-nav"> <!-- Menu items --></nav>
<!-- ❌ Bad: Obvious and redundant --><!-- This is a div --><div> <!-- This is a paragraph --> <p>Text here</p> <!-- End paragraph --></div> <!-- End div -->Entity Characters
- Always escape reserved characters: When showing HTML in content
- Use entities for symbols: Instead of copying special characters
- Consider UTF-8: Modern sites can use actual characters
- Be consistent: Use entities or UTF-8, not both randomly
- Test rendering: Ensure entities display correctly
<!-- ✅ Good: Clear and safe --><p>Use the <strong> tag for emphasis.</p><p>Price: €99 • Rating: 4½ stars</p>
<!-- ⚠️ Acceptable with UTF-8: --><meta charset="UTF-8"><p>Price: €99 • Rating: 4½ stars</p>
<!-- ❌ Bad: May not display correctly --><p>Use the <strong> tag for emphasis.</p><!-- This shows actual bold, not the code -->Common Mistakes
Comments
<!-- ❌ Nested comments (not supported) --><!-- This is <!-- a nested --> comment -->
<!-- ❌ Breaking HTML structure --><!-- <div> --> <p>Content</p><!-- </div> -->
<!-- ❌ Exposing sensitive data --><!-- Admin password: secret123 --><!-- API key: abc123xyz -->
<!-- ✅ Correct approach --><!-- Main container for hero section --><div class="hero"> <p>Content</p></div>Entity Characters
<!-- ❌ Forgetting to escape in code examples --><p>Use <div> tags</p><!-- Shows bold "div", not the text "<div>" -->
<!-- ❌ Double escaping --><p>&lt;div&gt;</p><!-- Shows: <div> instead of <div> -->
<!-- ❌ Incomplete entities --><p>© without semicolon</p>
<!-- ✅ Correct usage --><p>Use <div> tags</p><p>© 2024</p>Quick Reference Table
| Character | Entity Name | Entity Number | Description |
|---|---|---|---|
| < | < | < | Less than |
| > | > | > | Greater than |
| & | & | & | Ampersand |
| ” | " | " | Quotation mark |
| ’ | ' | ' | Apostrophe |
| © | © | © | Copyright |
| ® | ® | ® | Registered |
| ™ | ™ | ™ | Trademark |
| € | € | € | Euro |
| £ | £ | £ | Pound |
| ° | ° | ° | Degree |
| • | • | • | Bullet |
| … | … | … | Ellipsis |
| — | — | — | Em dash |
| – | – | – | En dash |
|   | Non-breaking space |
Summary
- Comments help document code and are invisible to users
- Use
<!-- comment -->syntax for single or multi-line comments - Comments cannot be nested
- Entity characters display special symbols and reserved characters
- Always escape
<,>,&,", and'when showing HTML code - Use
for non-breaking spaces - Common entities:
©,®,™,€,° - Can use named entities (
©) or numeric codes (©) - UTF-8 encoding allows using actual characters instead of entities
- Keep comments professional and up-to-date
- Test entity rendering across browsers
Comments and entities are fundamental HTML features that improve code quality and ensure proper character display!