HtmlHow-ToBeginner · 3 min read

How to Add Arrow in HTML: Simple Methods and Examples

You can add arrows in HTML by using Unicode arrow characters or HTML entities like → for →. Another way is to use CSS with border styles to create arrow shapes.

📐

Syntax

There are three common ways to add arrows in HTML:

Unicode characters: Directly use arrow symbols like →, ←, ↑, ↓.
HTML entities: Use named or numeric codes like → for → or →.
CSS arrows: Create arrows using CSS borders on elements like <div> or <span>.

html

<!-- Unicode arrow -->
<p>Arrow: →</p>

<!-- HTML entity arrow -->
<p>Arrow: &rarr;</p>

<!-- CSS arrow example -->
<style>
  .arrow-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid black;
  }
</style>
<span class="arrow-right"></span>

Output

Arrow: → Arrow: → ▶ (a black right-pointing triangle shape)

💻

Example

This example shows how to add right and left arrows using Unicode, HTML entities, and CSS shapes.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrow Examples</title>
<style>
  .arrow-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid black;
    margin-left: 10px;
  }
  .arrow-left {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 15px solid black;
    margin-right: 10px;
  }
</style>
</head>
<body>
  <p>Unicode right arrow: →</p>
  <p>HTML entity left arrow: &larr;</p>
  <p>CSS right arrow: <span class="arrow-right"></span></p>
  <p>CSS left arrow: <span class="arrow-left"></span></p>
</body>
</html>

Output

Unicode right arrow: → HTML entity left arrow: ← CSS right arrow: ▶ (black right-pointing triangle) CSS left arrow: ◀ (black left-pointing triangle)

⚠️

Common Pitfalls

Common mistakes when adding arrows in HTML include:

Using incorrect HTML entities that don't render arrows.
Forgetting to set charset="UTF-8" in the <meta> tag, causing Unicode arrows not to display.
Using CSS borders incorrectly, which can create shapes that don't look like arrows.

html

<!-- Wrong: Missing UTF-8 charset, arrow may not show -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Right: Include UTF-8 charset -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Wrong CSS arrow: missing transparent borders -->
<style>
  .bad-arrow {
    width: 0;
    height: 0;
    border-left: 15px solid black;
  }
</style>

<!-- Right CSS arrow: transparent borders create arrow shape -->
<style>
  .good-arrow {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid black;
  }
</style>

📊

Quick Reference

Here is a quick list of common arrow HTML entities and their symbols:

Arrow	HTML Entity	Unicode Code
→	→	→
←	←	←
↑	↑	↑
↓	↓	↓
↔	↔	↔
↕	&varr;	↕

✅

Key Takeaways

Use Unicode characters or HTML entities like → to add arrows easily in HTML.

Include to ensure arrow symbols display correctly.

CSS borders can create custom arrow shapes but require transparent borders for correct shape.

Test arrows in your browser to confirm they render as expected.

Avoid incorrect or missing charset and incomplete CSS border styles to prevent display issues.