How to Write Degree Celsius Symbol in HTML

1. Use the &#8451 Decimal Reference to Write Degree Celsius Symbol in HTML
2. Use the &#x2103 Hexadecimal Reference to Write Degree Celsius Symbol in HTML
3. Use the ° Entity to Write Degree Celsius Symbol in HTML
4. Use the <sup> Tag Hack to Write Degree Celsius Symbol in HTML

This article will introduce many ways to write the degree Celsius symbol in HTML.

Use the &#8451 Decimal Reference to Write Degree Celsius Symbol in HTML

The symbols like degree Celsius ℃ cannot be directly typed from the keyboard. The symbol is the unit for measuring temperature.

It might initially seem tedious if we have to write the symbol in HTML. But in reality, it isn’t.

Various symbols like ℃ have encodings that represent the symbol. The UTF-8 encoding of the degree Celsius symbol in decimal references is &#8451.

We can write the &#8451 reference in HTML to represent the degree Celsius symbol, as shown in the example below.

<p>
  Writing degree celsius using the decimal reference: &#8451;
</p>

Use the &#x2103 Hexadecimal Reference to Write Degree Celsius Symbol in HTML

We can also represent the degree Celsius symbol using the hexadecimal reference. The equivalent hexadecimal reference is &#x2103.

We can use the encoding in a similar way as in the first method. The example is shown below.

<p>
  Writing degree celsius using the hexadecimal reference: &#x2103;
</p>

Use the ° Entity to Write Degree Celsius Symbol in HTML

To write the degree Celsius symbol in HTML, we can also use the encodings for the degree symbol, °, and concatenate the symbol with the letter C. We can represent the symbol in different formats.

The HTML entity for the degree symbol is °. The decimal and hexadecimal references are ° and °.

We can use any of them to represent the degree symbol. The code example below shows how to use these encodings with the letter C to represent the degree Celsius symbol in HTML.

<p>
  Writing degree symbol using the HTML entity: &deg;C
</p>
<p>
  Writing degree symbol using the HTML code: &#176;C
</p>
<p>
  Writing degree symbol using the hexcode : &#xb0;C
</p>

Use the <sup> Tag Hack to Write Degree Celsius Symbol in HTML

The final method describes a simple hack to write the degree Celsius symbol in HTML. This method will use the <sup> tag to create the superscript of the letter o.

It makes the letter appear like a degree symbol. Then, we can concatenate the letter with the C character.

The output will appear like a degree Celsius symbol. However, this method is not considered a good option as the screen readers won’t exactly read as it is.

This will be a problem for visually impaired users.

For example, enclose the o character with the <sup> tag and write the C character after it, as shown in the example below.

<p>
  Writing degree celsius symbol using the &lt;sup&gt; hack: <sup>o</sup>C
</p>