HTML Codes for Spanish Language Characters

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 site is written in only one language and does not include multi-lingual translations, you may need to add Spanish language characters to that site.

The list below includes the HTML codes necessary to use Spanish characters that are not in the standard character set. Not all browsers support all these codes (mainly, older browsers may cause problems, but newer browsers should be fine), so be sure to test your HTML codes before you use them.

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

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

HTML Codes for Spanish Language Characters

Here are the different characters you may need 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
&euro;&#128;&#x80;Euro
 &#8359;&#x20A7;Peseta

Using these characters is simple. In the HTML markup, you would 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 simply typed into the HTML in order to display on a web page.

Remember, these characters code may be used on an English language website if you need to display a word like piñata. These characters would also be used in HTML that was actually displaying full Spanish translations, whether you actually coded those web pages by hand and had a full Spanish version of the site, or if you used a more automated approach to multi-lingual webpages and went with a solution like Google Translate.