HTML Special Features

HTML Entities

HTML entities are special codes used to display reserved characters and symbols that have special meaning in HTML or cannot be typed directly on a keyboard.

Why Use Entities?

• Reserved characters: < > & have special meaning in HTML
• Special symbols: Display symbols not on keyboard (©, ™, €, etc.)
• Non-breaking spaces: Prevent line breaks between words
• Accented characters: International text support

Entity Syntax:

Entities start with & and end with ;

&entity_name;   or   &#entity_number;

Reserved Characters:

Example:

<!-- Displaying HTML code -->
<p>To create a paragraph, use &lt;p&gt; tag</p>

<!-- Output: To create a paragraph, use <p> tag -->

<p>5 &lt; 10 &amp;&amp; 10 &gt; 5</p>
<!-- Output: 5 < 10 && 10 > 5 -->

Non-Breaking Space:

<!-- Regular space allows line break -->
<p>Mr. Smith</p>

<!-- Non-breaking space prevents break between Mr. and Smith -->
<p>Mr.&nbsp;Smith</p>

Back to top

Special Symbols and Characters

HTML entities allow you to display a wide range of special characters and symbols.

Common Symbols:

Arrows and Math:

←  ←   Left arrow
→  →   Right arrow
↑  ↑   Up arrow
↓  ↓   Down arrow
≠    ≠   Not equal
≤    ≤   Less than or equal
≥    ≥   Greater than or equal
∞ ∞   Infinity

Accented Characters:

á á   é é   í í
ó ó   ú ú   ñ ñ
Á Á   É É   ç ç

Example Usage:

<p>&copy; 2025 My Company. All rights reserved.</p>
<p>Price: &euro;99.99</p>
<p>Temperature: 25&deg;C</p>
<p>Caf&eacute; Espa&ntilde;ol</p>

Back to top

URL Encoding

URL encoding (percent encoding) converts characters into a format that can be transmitted over the internet. Special characters are replaced with % followed by hexadecimal values.

Why URL Encode?

• URLs can only contain ASCII characters
• Certain characters have special meaning in URLs
• Spaces and special characters must be encoded
• Ensures data integrity during transmission

Common URL Encodings:

Examples:

<!-- Original URL -->
https://example.com/search?q=html tutorial

<!-- URL Encoded -->
https://example.com/search?q=html%20tutorial

<!-- Email link with subject -->
<a href="mailto:hello@example.com?subject=Contact%20Form">Email Us</a>

<!-- Search with special characters -->
https://google.com/search?q=HTML%20%26%20CSS%20tutorial

When to URL Encode:

• Query parameters in GET requests
• Email links with subjects or body text
• File names with spaces or special characters
• Any URL containing non-ASCII characters

Back to top

Iframes (Inline Frames)

An iframe embeds another HTML document within the current page. It's like a window into another webpage.

Basic Syntax:

<iframe src="URL" width="600" height="400"></iframe>

Iframe Attributes:

Common Use Cases:

1. Embed YouTube Video:

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0" 
  allowfullscreen>
</iframe>

2. Embed Google Map:

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen
  loading="lazy">
</iframe>

3. Embed Another Page:

<iframe src="contact.html" width="100%" height="500">
  Your browser does not support iframes.
</iframe>

Security Considerations:

<!-- Use sandbox for untrusted content -->
<iframe 
  src="untrusted.html" 
  sandbox="allow-scripts allow-same-origin">
</iframe>

Sandbox Values:

• allow-forms - Allow form submission
• allow-scripts - Allow JavaScript
• allow-same-origin - Treat as same origin
• allow-popups - Allow popups

Best Practices:

• Always provide fallback content between iframe tags
• Use loading="lazy" for performance
• Set appropriate width and height
• Use sandbox for untrusted content
• Consider responsive design (use % width)
• Avoid iframes for main content (SEO issues)

Back to top

Additional Semantic Elements

<details> and <summary>

Create collapsible content (accordion):

<details>
  <summary>Click to expand</summary>
  <p>This content is hidden until you click the summary.</p>
</details>

<progress>

Display progress bar:

<label for="file">Downloading:</label>
<progress id="file" value="70" max="100">70%</progress>

<meter>

Display measurement within range:

<label for="fuel">Fuel level:</label>
<meter id="fuel" min="0" max="100" low="25" high="75" value="50">
  50%
</meter>

<dialog>

Create modal dialogs:

<dialog id="myDialog">
  <h2>Dialog Title</h2>
  <p>Dialog content here...</p>
  <button onclick="document.getElementById('myDialog').close()">
    Close
  </button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">
  Open Dialog
</button>

<time>

Represent dates and times:

<p>Published: <time datetime="2025-01-15">January 15, 2025</time></p>
<p>Event: <time datetime="2025-03-20T19:00">March 20, 2025 at 7 PM</time></p>

Back to top

<noscript> Tag (JavaScript Disabled Content)

1. One-Line Explanation

<noscript> is used to show content when JavaScript is disabled or not supported in the browser.

It works only when JavaScript is OFF.

2. Real Example (Live Demo)

Write and save this file as noscript.html:

<!DOCTYPE html>
<html>
<head>
  <title>NoScript Demo</title>
</head>
<body>

<h2>Welcome to My Website</h2>

<script>
  document.write("JavaScript is Working!");
</script>

<noscript>
  <h3 style="color:red;">
    JavaScript is Disabled! Please Enable It.
  </h3>
</noscript>

</body>
</html>

3. Run Normally (JavaScript ON)

• Open the file in Chrome
• You will see: JavaScript is Working!
• <noscript> will NOT appear

Explanation: Because JavaScript is ON, <noscript> is ignored.

4. Turn OFF JavaScript

In Chrome:

• Open Chrome
• Go to: chrome://settings/content/javascript
• Turn OFF → Allowed (recommended)
• OR: Settings → Privacy & Security → Site Settings → JavaScript → Block

5. Refresh Page (Magic Moment ✨)

Now refresh noscript.html

• You will see: JavaScript is Disabled! Please Enable It.
• "JavaScript is Working!" will disappear

Explanation: Now JS is OFF, so browser shows <noscript> content.

6. How It Works Internally

Browser checks:
✔ If JS works → Ignore <noscript>
✔ If JS fails → Show <noscript>

7. Real-Life Use Example

<noscript>
  <p>Please enable JavaScript to use this website.</p>
  <a href="help.html">Click for Help</a>
</noscript>

Used in:

• Banking Websites
• Login Pages
• Dashboards
• React Websites
• Payment Pages

Because without JavaScript, many websites may not work properly.

8. One-Line Definition (For Exams)

<noscript> tag is used to display alternative content when JavaScript is disabled in the browser.

Back to top

Practice Tasks

1. HTML Entities Practice:
   • Create a paragraph showing: 5 < 10 && 10 > 5
   • Display: © 2025 Company™
   • Show code example: <div class="container"></div>
   • Add price with Euro symbol: €99.99
2. Special Symbols Page:
   • Create a footer with ©, ®, ™ symbols
   • Show temperature: 25°C
   • Display math: 5 × 3 ÷ 2 = 7.5
   • Add arrows: ← Previous | Next →
3. Iframe Integration:
   • Embed a YouTube video
   • Embed a Google Map of your location
   • Create an iframe showing another page
   • Add sandbox security to untrusted iframe
4. Advanced Elements:
   • Create FAQ section using <details> and <summary>
   • Add a download progress bar using <progress>
   • Show disk space with <meter>
   • Create a modal dialog using <dialog>
5. Complete Integration:
   • Build a contact page with embedded map (iframe)
   • Add copyright footer with symbols
   • Include FAQ section with collapsible content
   • Show business hours using <time> element

Back to top

🎉 Congratulations!

You've completed the HTML course! You've learned:

• HTML fundamentals and document structure
• Text formatting and semantic markup
• Links, images, and media
• Lists, tables, and forms
• Layout with semantic elements
• Colors, entities, and special features

Next Steps:

• Practice building complete websites
• Learn CSS for styling and layout
• Explore JavaScript for interactivity
• Build real projects to solidify your knowledge

← Back to Course Overview