ASCII Table – Hex to ASCII Value Character Code Chart

As a developer, you'll eventually need to look up hex or ASCII values and see what they translate to. You might also need to know what the decimal, binary, or HTML values are, too.

If you search for these codes online, you'll often find tables that are really just images. These are inaccessible to people with disabilities, and inconvenient to use – you can't search for something and copy-paste code you want.

To make your life easier, I created a table from the best sources I could find. Just scroll or use Ctrl/Cmd + f to find the value you're looking for.

Here's the traditional ASCII table:

And here's the extended ASCII table for the web:

Sources for both tables: ASCII, Windows-1252, and ASCII Code - The extended ASCII table

Note that there are several other extended ASCII tables like ISO 8859, ISO 8859-1, ISO 8859-2, and so on. The extended table above is based on Windows-1252 ASCII table, and is what web browsers used before UTF-8 was created.

Even though we've largely moved past ASCII and its limitations to modern character encodings like UTF-8, all of the HTML values in the tables above will still work on current browsers.

If you'd like to learn more about character encoding, ASCII, and unicode characters, check out this article.

How to Use ASCII Characters in HTML

ASCII characters can be useful for web developers, like if you need to manually insert whitespace or a special character into your HTML.

If you look at the tables above, you'll see that every ASCII character has an HTML entity number, and some also have an HTML entity name.

Each HTML entity number and name starts with an ampersand (&) and ends with a semicolon (;).

You can use these anywhere in your HTML to reliably render that character, no matter what the a person's browser language is set to.

In general, it's recommended to use the HTML entity name whenever possible – they're easier to remember, and are self-descriptive for any other developers that read your code.

For example, if you need to render the Euro currency sign (€), the HTML entity name € is much easier to remember than €.

Here are some of the more common ASCII characters you'll use in HTML, along with some examples.

How to Use the   Non-Breaking Space Character Code

There are times when you'll want to add a space, but want to keep other words or characters together, even if there's a limited amount of horizontal space.

An easy way to do this would be to use a non-breaking space character, for example:

<span>Superpower:&nbsp;listening</span>

Which renders the following:

Sure, it looks like there's a normal space between the colon and the "l" in "listening", but the   character makes it so that the line will never break there.

For example, here's that code with an outline around the span element, and with a width of 150 pixels:

With a normal space character, the line would break like this:

You can even insert several non-breaking spaces in a row to create make-shift text padding:

<span>Superpower:&nbsp;&nbsp;&nbsp;listening</span>

How to Make a Newline in HMTL using the 
 Newline Character Code

While you can use JavaScript to render \n as a newline in HTML, that's not always an option. You might only have access to the HTML code, or just want to keep things simple.

In that case, you can use the newline / line feed character code to force a newline:

<div style="margin-bottom: 1.5em;">
  <label for="example-1">Example 1: </label>
  <textarea name="example-1" id="example-1">Hello&#10;freeCodeCamp</textarea>
</div>

Which renders the following:

And yes, you can use these back-to-back, too:

<div style="margin-bottom: 1.5em;">
  <label for="example-2">Example 2: </label>
  <textarea name="example-2" id="example-2" style="height: 150px;">Hello&#10;&#10;&#10;freeCodeCamp</textarea>
</div>

However, note that the 
 character doesn't override the default styling of the element it's used in. For example, the p element doesn't allow line breaks within the element – you'd have to create another paragraph element:

<p style="outline: red 1px solid;">This is paragraph text and &#010; whoops there is a new line.</p>

The code above renders everything to a single line:

This is paragraph text and whoops there is a new line.

To override this behavior, just set the white-space property to pre-wrap:

<p style="outline: red 1px solid; white-space: pre-wrap;">This is paragraph text and &#010; whoops there is a new line.</p>

This is paragraph text and whoops there is a new line.

Thanks for Reading

If you found this helpful, please share it with your friends so more people can get started using ASCII characters.

Also, if you liked this article, let me know over on Twitter.