HTML for the Euro (€) – Best Practices

What is the HTML for the Euro? What’s the best way to write the Euro in HTML? Here’s the best HTML for the Euro symbol, tested with all major web browsers.

This HTML code works in both HTML and XHTML. Note that the Euro symbol is also sometimes referred to it’s ISO currency abbreviation “EUR”.

Euro in HTML – Common Searches

There’s a lot of ways people look for the HTML for the Euro symbol or Euro sign. Here are the common ways people search. This list is to help people find this webpage. You can skip over the list and go straight to the HTML for the Euro sign.

euro html escape
euro html special character
euro html tag
euro in html code
euro in html encoding
euro in html entities
euro sign html code
euro sign html entity
euro sign html unicode
euro symbol html entity
euro symbol html format
euro symbol html page
html code for euro
html euro code
html euro currency symbol
html euro symbol
html for €
html for euro sign
html for euro character
€ html
€ in html

HTML for the Euro Sign

The best practice for putting the Euro sign in HTML to use the HTML character entity:

&euro;

The Euro HTML entity above gives this output in a webpage:

€

This HTML code will give you a European currency symbol in a webpage whether your web browser or webserver is on Linux, Mac or Windows.

In the compatibility table later in this article, you can see all major browsers and operating systems are supported (Chrome, Firefox, Safari, IE, iPhone, iPad).

Note the semicolon at the end of the HTML entity. It won’t work without it.

If this article has answered your question, please consider clicking the +1, Like or Tweet buttons at the top and bottom of this article.

Just to check: Did you know the Euro symbol sometimes goes before the price, sometimes after? If you didn’t know, read on.

Euro Symbol HTML Best Practice

Why is using the named HTML character entity “€” the best practice for putting a Euro sign in HTML? To see why, consider the failings of the alternate ways:

Inserting the Unicode character for the Euro directly: Works great, as long as: (1) all editing software used on the web page understands it is in Unicode, and preserves its Unicode encoding, and (2) the character set for your webpages is reliably and consistently set in the HTTP headers and/or HTML head. If condition 1 or 2 fail, you’re likely to lose your Euro symbols from your webpage.
Use the Euro Unicode character via a numeric HTML character entity (#8364): This works quite well. It is broadly compatible. It will survive you’re HTML editor treating your HTML file as ASCII. It will probably survive your page being served in different character sets, e.g. ISO 8859-1. This only reason it’s not the best practice is that using it will make your HTML code harder to read, understand and maintain.
Use an image of the Euro sign: This is a very old school method, used before the Euro character became widely supported. It uses more bandwidth. It causes accessibility issues. For example, screen readers for the blind can’t read it. It slows down your page load time. Avoid.

Euro HTML Tag

Some people are searching for a Euro HTML tag. There’s no HTML tag for the Euro symbol, e.g. <euro>. It does not exist. Just use the HTML entity above.

Euro Symbol HTML Entity Browser Compatibility

The table below shows the compatibility of using the Euro HTML character entity “&euro” on different web browsers. I’ve personally tested the Euro sign shows from this HTML code on these browsers.

Web Browser	Host	&Euro HTML
Chrome 14	Mac, Ubuntu, Windows 7	✔
Firefox 7	Mac, Ubuntu, Windows 7	✔
Internet Explorer 6	Windows XP	✔
Internet Explorer 7	Windows XP	✔
Internet Explorer 8	Windows 7	✔
Internet Explorer 9	Windows 7	✔
Safari	iPhone iOS 5.0 iPad iOS 4.3 iPod Touch iOS 5.0	✔
Safari 5.1	Mac	✔
Opera 11	Mac	✔

Type the Euro Key on Windows and Mac

In case you do want enter the Euro symbol directly on a Mac or PC, here’s how.

To type the Euro key on a Mac, press Option-Shift-2. I’ve tested this on Mac OS X Snow Leopard and Lion on U.S. keyboard layouts.

To type the Euro key on Windows, press Ctrl-Alt-E. I’ve tested this on Windows XP and Windows 7.

Does the Euro Symbol Go Before or After the Amount?

If you are a native English speaker, you’re most probably used to money symbols going before the amount, with a dot for the decimal place, like this:

€169.50

In some countries in the European Union, the Euro symbol is written after the amount. Sometimes the decimal separator is a comma.

If you’re building a web page mainly for people from a specific country, you’d best use that country’s convention for writing prices in Euro.

Here’s how prices in Euro are written in some countries. If you’d like to add a country, let me know in a comment below.

Country	Euro Price Format
France	169,50 €
Germany	169,50 €
Holland	€ 169,50
Italy	€ 169,50
Spain	169,50 €
Portugal	169,50 €

If you’d like to see how I worked this out, look at the video at the bottom of the iPhone 4S Prices article at Mac Crazy.

Enter the Euro Symbol in WordPress

Since WordPress is extremely popular CMS for publishing websites, here are several ways to input the Euro sign into a WordPress page or blog post:

If your keyboard has a Euro key, you can just type it in the blog post editor.
You can copy the Euro character from right here: €. Then just paste it into WordPress.
In the WordPress editor’s HTML tab, you can enter the HTML entity directly: €.

The first two methods work because WordPress uses Unicode for all web pages. You can check by for your website by loading a blog page in a web browser, and choosing View Source. Check that the character set is set to UTF-8 in the head of the webpage’s HTML, like this:

<meta http-equiv="Content-Type" content="text/html;
      charset=UTF-8" />

Note that WordPress automatically replaces Euro HTML entities with the actual Unicode character. That’s why, if you view this webpage’s HTML, which is generated by WordPress, you’ll see Euro signs directly in the HTML code (i.e. Unicode characters), rather than the Euro HTML character entity.

Conclusion

Thanks for visiting Smart Web Developer! I hope this article answered your question. If it didn’t, let me know.

Comments or questions? Use the comment box below.

If this article helped you, please click +1, Like or Tweet buttons below to share it – it’s quick to do, and helps this page bubble up ahead of older, outdated articles in search results.