HtmlHow-ToBeginner · 3 min read

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

To add a degree symbol in HTML, use the character entity ° or the Unicode numeric code °. Both will display the degree symbol (°) correctly in the browser.

📐

Syntax

There are two common ways to add the degree symbol in HTML:

Named character entity: ° represents the degree symbol.
Numeric character reference: ° also shows the degree symbol using its Unicode number.

Both are placed inside your HTML where you want the symbol to appear.

html

&lt;p&gt;Temperature is 25&amp;deg;C&lt;/p&gt;
&lt;p&gt;Angle is 90&amp;#176;&lt;/p&gt;

Output

Temperature is 25°C Angle is 90°

💻

Example

This example shows how to use both the named entity and numeric code to display the degree symbol in a simple HTML page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Degree Symbol Example</title>
</head>
<body>
  <h1>Weather Report</h1>
  <p>Today’s temperature is 30&deg;C.</p>
  <p>The angle of the triangle is 60&#176;.</p>
</body>
</html>

Output

Weather Report Today’s temperature is 30°C. The angle of the triangle is 60°.

⚠️

Common Pitfalls

Some common mistakes when adding the degree symbol in HTML include:

Typing the degree symbol directly without using an entity or Unicode, which may cause encoding issues in some editors or browsers.
Using incorrect or incomplete entities like &deg (missing semicolon) which will not render properly.
Confusing the degree symbol with similar characters like the masculine ordinal indicator (º), which looks similar but is different.

html

&lt;p&gt;Wrong: 25&amp;deg&lt;/p&gt;
&lt;p&gt;Right: 25&amp;deg;&lt;/p&gt;

Output

Wrong: 25&deg Right: 25°

📊

Quick Reference

Method	Code	Output
Named character entity	°	°
Numeric character reference	°	°
Direct symbol (not recommended)	°	°

✅

Key Takeaways

Use ° or ° to add the degree symbol in HTML safely.

Always include the semicolon at the end of character entities for correct rendering.

Avoid typing the degree symbol directly to prevent encoding problems.

The degree symbol is different from similar-looking characters like the masculine ordinal indicator.

Test your HTML in a browser to ensure the symbol displays correctly.