HtmlHow-ToBeginner · 3 min read

How to Add Rupee Symbol in HTML: Simple Syntax & Examples

To add the rupee symbol in HTML, use the Unicode character ₹ or the HTML entity ₹. You can also directly type the ₹ symbol if your file encoding supports UTF-8.

📐

Syntax

You can add the rupee symbol in HTML using these methods:

Unicode decimal code: ₹
Unicode hexadecimal code: ₹
Direct character: Use ₹ directly if your file is UTF-8 encoded

These codes tell the browser to display the rupee symbol.

html

<p>Using Unicode decimal code:<br>&#8377;</p>
<p>Using Unicode hexadecimal code:<br>&#x20B9;</p>
<p>Using direct character:<br>₹</p>

Output

₹ ₹ ₹

💻

Example

This example shows how to display the rupee symbol in a simple HTML page using all three methods.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rupee Symbol Example</title>
</head>
<body>
  <p>Price using Unicode decimal: &#8377; 1000</p>
  <p>Price using Unicode hex: &#x20B9; 2000</p>
  <p>Price using direct symbol: ₹ 3000</p>
</body>
</html>

Output

Price using Unicode decimal: ₹ 1000 Price using Unicode hex: ₹ 2000 Price using direct symbol: ₹ 3000

⚠️

Common Pitfalls

Common mistakes when adding the rupee symbol include:

Not setting the charset to UTF-8 in the HTML <head>, causing the symbol to show as a box or question mark.
Using incorrect or incomplete HTML entities like &rupee; which is not valid.
Copy-pasting the symbol from sources that use different encodings, leading to display errors.

Always ensure your HTML file uses UTF-8 encoding and use the correct Unicode codes.

html

<!-- Wrong: Missing charset -->
<p>Price: ₹ 1000</p>

<!-- Right: With UTF-8 charset -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Correct Rupee Symbol</title>
</head>
<body>
  <p>Price: ₹ 1000</p>
</body>
</html>

Output

Price: ₹ 1000

📊

Quick Reference

Here is a quick summary of how to add the rupee symbol in HTML:

Method	Code	Description
Unicode decimal	₹	Standard decimal Unicode code for ₹
Unicode hexadecimal	₹	Hexadecimal Unicode code for ₹
Direct character	₹	Use directly if UTF-8 encoding is set

✅

Key Takeaways

Use ₹ or ₹ to add the rupee symbol in HTML safely.

Always set in your HTML head for correct symbol display.

Avoid invalid entities like &rupee; which do not work in HTML.

You can type ₹ directly if your file encoding supports UTF-8.

Test your page in a browser to confirm the symbol shows correctly.