How to Display Arrows in HTML

Naila Saad Siddiqui Feb 02, 2024

HTML HTML Unicode HTML Symbol

This article discusses using Unicode character entities to display different characters on our HTML page. Numerous entities are used in HTML, but we will focus on learning the triangular arrows for up, down, left, and right.

HTML Entities With Examples

In HTML, a few characters are reserved. It is because the browser may confuse tags with less than (<) or greater than (>) signs if you use them in your text. In HTML, reserved characters are displayed using character entities.

A character entity appears as follows:

&name_of_entity

&#number_of_entity

It means that HTML character entities always start with an ampersand (&) sign or an ampersand hash (&#) sign. So, for example, one frequently used HTML entity is &nbsp, a non-breaking space between any two words.

Entities have a name and a number as well. For example, non-breaking space has an entity name of &nbsp and an entity number of &#160. Both have the same meaning and purpose.

Numerous entities are used in HTML, but we will discuss the triangular arrows for up, down, left, and right. Let us look at the example below:

<html>
    <body>
        <h1>HTML Triangular Arrow Entities</h1>
        <h2>The upper arrow is displayed as: &#9650;</h2>
    </body>
</html>

Similarly, if we need to display down a triangular arrow, then the code will be:

<html>
    <body>
        <h1>HTML Triangular Arrow Entities</h1>
        <h2>The down arrow is displayed as: &#9660;</h2>
    </body>
</html>

For displaying a triangular arrow pointing towards the right, we can use the following code:

<html>
    <body>
        <h1>HTML Triangular Arrow Entities</h1>
        <h2>The right arrow is displayed as: &#9654;</h2>
    </body>
</html>

And the arrow pointing towards the right is displayed using the following entity number:

<html>
    <body>
        <h1>HTML Triangular Arrow Entities</h1>
        <h2>The left arrow is displayed as: &#9664;</h2>
    </body>
</html>

Note that in all the above HTML code snippets, we used decimal numbers to show HTML entities. These symbols, however, can also be displayed using their corresponding hexadecimal codes.

The table below gives their corresponding hexadecimal equivalent:

Name	Decimal Entity Code	Hexadecimal Entity Code
Upper Triangular	`▲`	`▲`
Lower Triangular	`▼`	`▼`
Right Triangular	`&#9654`	`▶`
Left Triangular	`◀`	`◀`

It is to remember that these are one such variant of triangles; there are numerous others as well with different colours and different sizes. Each has different decimal and hexadecimal codes, respectively.

HTML Entities With Examples

Related Article - HTML Symbol