HTML code to display arrow

Current Location：Home > Learning > WEB FRONT-END > HTML >

Vue React JavaScript Angular CSS HTML

HTML code to display arrow

Author：JIYIK Last Updated：2025/04/19 Views：

This article discusses the use of Unicode character entities to display different characters on our HTML pages. There are many entities used in HTML, but we will focus on the triangle arrows that represent up, down, left, and right.

HTML entities with examples

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

Character entities are as follows:

&name_of_entity

&#number_of_entity

This means that HTML character entities always begin with an ampersand &symbol or an ampersand-hash symbol &#. So, for example, an often used HTML entity is , which is a non-breaking space between any two words.

Entities also have names and numbers. For example, the entity name for a nonbreaking space is and the entity number is &#160. Both have the same meaning and purpose.

There are many entities used in HTML, but we will discuss the up, down, left, and right triangle arrows. Let's look at the following example:

<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 a downward-pointing triangle arrow, the code would be:

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

To display a triangular arrow pointing to 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 display an arrow pointing to the right with the following entity numbers:

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

请注意,In all the above HTML code snippets, we have used decimal numbers to display HTML entities. However, these symbols can also be displayed using their corresponding hexadecimal codes.

The following table gives their corresponding hexadecimal equivalents:

name	Decimal Entity Code	Hexadecimal entity code
Upper Triangle	▲	▲
Lower Triangle	▼	▼
Right triangle	▶	▶
Left triangle	◀	◀

请记住, these are a variation of the triangle; there are many other colors and different sizes. Each has a different decimal and hexadecimal code.

Previous: None

Next：Creating a scrollable Div in HTML

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >