HTML Codes for Spanish Language Characters

Olé! Feel free to use the occasional Spanish character in your HTML

A journalist watches Mariano Rajoy's conference on a tv screen as she has the 'El Pais' website open inside the Press Room during the PP national executive comitee in the PP Headquarters on February 2, 2013 in Madrid, Spain. Spanish reports alleged Rajoy and other conservative politicians received regular payments from a previously undisclosed account run by the treasurers of his Popular Party from 1990 to 2008.
Pablo Blazquez Dominguez/Getty Images 

Even if your website is written in only one language and does not include multilingual translations, you may need to add Spanish language characters to the site occasionally. You do this by using the numerical code or hex code for the specific character in your HTML. 

The chart below includes the HTML codes necessary to use Spanish characters that are not in the standard character set. Older browsers may not support all these codes, but newer browsers should be fine with them, so be sure to test your HTML codes before you use them.

Some Spanish characters are part of the Unicode character set, so you need to declare that in the head of your documents, as follows:

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

HTML Codes for Spanish Language Characters

Here are the different Spanish characters you may want to use.

DisplayFriendly CodeNumerical CodeHex CodesDescription
Á&Aacute;&#193;&#xC1;Capital A-acute
á&aacute;&#225;&#xE1;Lowercase a-acute
É&Eacute;&#201;&#xC9;Capital E-acute
é&eacute;&#233;&#xE9;Lowercase e-acute
Í&Iacute;&#205;&#xCD;Capital I-acute
í&iacute;&#237;&#xED;Lowercase i-acute
Ñ&Ntilde;&#209;&#xD1;Capital N-tilde
ñ&ntilde;&#241;&#xF1;Lowercase n-tilde
Ó&Oacute;&#211;&#xD3;Capital O-acute
ó&oacute;&#243;&#xF3;Lowercase o-acute
Ú&Uacute;&#218;&#xDA;Capital U-acute
ú&uacute;&#250;&#xFA;Lowercase u-acute
Ü&Uuml;&#220;&#xDC;Capital U-umlaut
ü&uuml;&#252;&#xFC;Lowercase u-umlaut
«&laquo;&#171;&#xAB;Left angle quotes
»&raquo;&#187;&#xBB;Right angle quotes
¿&iquest;&#191;&#xBF;Inverted question mark
¡&iexcl;&#161;&#xA1Inverted exclamation point

How to Use the Spanish HTML Codes

Using these characters is simple. In the HTML markup, you place these special character codes where you want the Spanish character to appear. These are used similarly to other HTML special character codes that allow you to add characters that are not found on the traditional keyboard and therefore cannot be typed into the HTML to display on a web page.

Remember, these characters codes may be used on an English language website if you need to display words such as piñata and piña colada. They can also be used in HTML that displays full Spanish translations, whether you code those web pages by hand and have a full Spanish version of the site or you use an automated approach to multilingual web pages and go with a solution such as Google Translate.