How do You Insert an Arrow in HTML

While developing web pages, we often need to include different shapes and components in our projects. Most of the time, it is required to add arrows for several purposes, such as to show navigation to the next page, to point to a particular object, and more. However, arrows cannot be drawn with the keyboard.

The outcome of this blog is:

What are Character Entities in HTML?
Method 1: How to Insert an Arrow Using HTML entity name?
Method 2: How to Insert an Arrow Using HTML entity number?
Method 3: How to Insert an Arrow Using HTML entity hexadecimal reference?
List of arrows

What are Character Entities in HTML?

Character entities are utilized to display the reserved characters in HTML. It begins with the ampersand (&) and ends with a semicolon (;). The reserved characters are either interpreted as HTML code, such as (<), (>), arrows, or more that are not present on the keyboard.

Method 1: How to Insert an Arrow Using HTML entity name?

The format of using the HTML entity name is:

&entity_name;

The HTML entity_name starts with the “&” sign and ends with “;”.

Example: Inserting Arrows Using HTML entity name
In HTML, inside the body element, add three <h2> tags. Add

tag below each of the <h2> tags. The <h2> tags are utilized to add headings, and <p> tags will display a line along with the entity name of the arrows.

Here is the HTML code:

<h2>Up arrow</h2>
<p>HTML entity name: ↑</p>
<h2>Downwards down arrow</h2>
<p>HTML entity name: &ddarr;</p>
<h2>Right squiggle arrow</h2>
<p>HTML entity name: &zigrarr;</p>

It can be seen from the below image that the arrows are displayed successfully using their HTML entity names:

Method 2: How to Insert an Arrow Using HTML entity number?

The format for using the HTML entity number is given below:

&#entity_number;

The HTML entity number starts with “&#” and ends with the semicolon ”;”.

Example: Inserting Arrows Using HTML entity number
Continuing the above example, we will use an HTML entity number and see the result.

HTML

<h2>Up arrow</h2>
<p>HTML entity number: ↑
<h2>Downwards down arrow</h2>
<p>HTML entity number: ⇊</p>
<h2>Right squiggle arrow</h2>
<p>HTML entity number: ⇝</p>

Output

Method 3: How to Insert an Arrow Using HTML entity hexadecimal reference?

The format of HTML hexadecimal code is given below:

&#xhexadecimal_code;

Example: Inserting Arrows Using the Hexadecimal Reference
Now, the below example utilized the hexadecimal code to insert arrows in the HTML file.

HTML

<h2>Up arrow</h2>
<p>Hexadecimal reference: &#x2191</p>
<h2>Downwards down arrow</h2>
<p>Hexadecimal reference:⇊ </p>
<h2>Right squiggle arrow</h2>
<p>Hexadecimal reference:⇝ </p>

The corresponding result of the above-mentioned hexadecimal references can be seen here:

So far, we have learned the methods to insert arrows on our web page. In the next section, we will see some arrows with their name, HTML entity name, HTML entity number, and hexadecimal reference in tabular form.

List of Arrows

Some most commonly used arrows with their entity names, numbers, and hexadecimal reference are shown below:

Arrow	Arrow Name	HTML entity name	HTML entity number	Hexadecimal reference
↑	Up arrow	↑	↑	↑
→	Right arrow	→	→	→
←	Left arrow	←	←	←
↓	Down arrow	↓	↓	↓
↕	Up down arrow	&varr;	↕	↕
⇥	Right arrow to bar	&rarrb;	⇥	⇥
⇊	Downwards paired arrows	&ddarr;	⇊	⇊
⇄	Right arrow over left arrow	&rlarr;	⇄	⇄
⇝	Right squiggle arrow	&zigrarr;	⇝	⇝
⇜	Left squiggle arrow	&ziglarr;	⇜	⇜
⇈	Up paired arrows	&uuarr;	⇈	⇈

That was all about inserting arrows in HTML.

Conclusion

To insert the arrow in your web page, we need to use the methods of HTML to add the reserve characters. These methods are HTML entity name, HTML entity number, and hexadecimal reference. This article demonstrated the three methods to insert arrows in HTML and provided a list of arrows for your convenience.