Caracteres especiales en HTML

Los caracteres entre dos elementos en los documentos HTML representan texto. Los documentos HTML son codificados usando caracteres especiales. El texto por su parte esta restringido al US ASCII (ISO 8859-1) que consta de 25 caracteres de control 93 caracteres gráficos y 8 caracteres no asignados.

1. Caracteres de control

Son caracteres no imprimibles que son usados tipicamente para comunicaciones, formateo de efectos, controlar dispositivos y como separadores de información.

En aplicaciones SGML el uso de caracteres de control esta limitado para minimizar los cambios necesarios para intercambios entre redes de diversas plataformas y sistemas operativos.

En HTML solo se usan 3 caracteres de control:

El HT es interpretado como espacio entre palabras, con la sola excepción del texto preformateado en el que el HT representa un salto de 8 columnas.

2. Caracteres especiales

Hay ciertos caracteres que tienen un significado especial en HTML, ellos son:

El espacio, que representa la separación de dos palabras, el sitio donde se puede cortar una linea y los símbolos <, >, & y ".

Es evidente que estos símbolos no los podremos usar directamente en un texto HTML, ya que dichos símbolos tienen un significado en HTML y es necesario diferenciar claramente cuándo poseen ese significado y cuándo queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva y por ello, si queremos que aparezca en el texto como tal, tendremos que dar un rodeo escribiendo algo que no de lugar a confusión.

Para mostrar estos caracteres como texto sera necesario usar un formateo especial que deberá siempre empezar con & y terminado con ;

Hay dos maneras de representar un carácter según la tabla ISO 8859-1:

tabla1
ClyphNameSyntaxDescripción
<lt&lt;Símbolo menor que
>gt&gt;Símbolo mayor que
&amp&amp;Ampersand
"quot&quot;Doble comilla

Los etiquetas en general no son sensibles a mayúsculas/minúsculas pero si lo son los etiquetas tras & es decir &LT; no es lo mismo que &lt;

El otro caso especial se da cuando en un texto HTML se quiere escribir ciertas letras en nuestro idioma:

  1. Para acentuar las vocales, usamos el acento agudo el que se obtiene añadiendo el sufijo acute a la vocal sin acentuar.
  2. Para el diéresis se usa uml tras una o o u.
  3. Para ponerle el sombrerito (virgula) a la ñ se usan tilde.
  4. A falta de algo mas evidente, tenemos que usar el valor numérico para representar cualquier otro carácter según la tabla ISO 8859-1.
  5. Para separar dos palabra pero prohibir que se separen se usa nbsp, es decir las palabras siempre quedaran en la misma linea. (&#137)

La manera mas practica de solucionar este problema es no preocuparse por esta limitación y escribir literalmente los caracteres afectados y posteriormente usar un software de conversión a código HTML que haga el trabajo por nosotros o en todo caso usaremos la etiqueta buscar y reemplazar todo de nuestro editor de textos.

3. Tabla de caracteres especiales

Según la tabla ISO 8859-1 se puede representar los todos los caracteres validos en HTML con el formato &#n; donde n es un numero que según la tabla representa un carácter.

Solo es posible usar los códigos 9, 10 y de 32-126 y 161-255 ojo no están permitidos del 0-8, 11-31 ni 127-160.

Ojo que no es el ASCII extendido usado comúnmente en nuestros teclado o impresoras compatibles con Epson. Son diferentes los códigos entre el 161-255.

tabla2
SyntaxSyntaxDescripciónMuestra
#09
Horizontal tab
#10
Line feed
#32
Space
#33
Exclamation mark!
#34quotQuotation mark"
#35
Number sign#
#36
Dollar sign$
#37
Percent sign%
#38ampAmpersand&
#39
Apostrophe'
#40
Left parenTDesis(
#41
Right parenTDesis)
#42
Asterisk*
#43
Plus sign+
#44
Comma,
#45
Hyphen-
#46
Period (fullstop).
#47
Solidus (slash)/
#48-57
Digitos 0-9
#58
Colon:
#59
Semi-colon;
#60ltLess TDan<
#61
Equals sign=
#62gtGreater TDan>
#63
Question mark]
#64
Commercial at@
#65-90
Letras A-Z
#91
Left square bracket[
#92
Reverse solidus (backslash)\
#93
Right square bracket]
#94
Caret^
#95
Horizontal bar_
#96
Acute accent`
#97-122
Letas a-z
#123
Left curly brace{
#124
Vertical bar|
#125
Right curly brace}
#126
Tilde~
#161
Inverted exclamation¡
#162
Cent sign¢
#163
Pound sterling£
#164
General currency sign¤
#165
Yen sign¥
#166
Broken vertical bar¦
#167
Section sign§
#168
Umlaut (dieresis)¨
#169copyCopyright©
#170
Feminine ordinalª
#171
Left angle quote, guillemot left«
#172
Not sign¬
#173nbspSoft hyphen (nonbreaking)
#174regRegistered trademark®
#175
Macron accent¯
#176
Degree sign°
#177
Plus or minus±
#178
Superscript two²
#179
Superscript TDree³
#180
Acute accent´
#181
Micro signµ
#182
Paragraph sign
#183
Middle dot·
#184
Cedilla¸
#185
Superscript one¹
#186
Masculine ordinalº
#187
Right angle quote, guillemot right»
#188
Fraction one-fourTD¼
#189
Fraction one-half½
#190
Fraction TDree-fourTDs¾
#191
Inverted question mark¿
#192AacuteCapital A, acute accentÁ
#193AgraveCapital A, grave accentÀ
#194AcircCapital A, circumflex accentÂ
#195AtildeCapital A, tildeÃ
#196AumlCapital A, dieresis or umlaut markÄ
#197AringCapital A, ringÅ
#198AEligCapital AE dipTDong (ligature)Æ
#199CcedilCapital C, cedillaÇ
#200EacuteCapital E, acute accenté
#201EgraveCapital E, grave accentÈ
#202EcircCapital E, circumflex accentÊ
#203EumlCapital E, dieresis or umlaut markË
#204IacuteCapital I, acute accentí
#205IgraveCapital I, grave accentÌ
#206IcircCapital I, circumflex accentÎ
#207IumlCapital I, dieresis or umlaut markÏ
#208ETDCapital ETD, IcelandicÐ
#209NtildeCapital N, tildeñ
#210OacuteCapital O, acute accentÓ
#211OgraveCapital O, grave accentÒ
#212OcircCapital O, circumflex accentÔ
#213OtildeCapital O, tildeÕ
#214OumlCapital O, dieresis or umlaut markÖ
#215
Multiply sign×
#216OslashCapital O, slashØ
#217UacuteCapital U, acute accentÚ
#218UgraveCapital U, grave accentÙ
#219UcircCapital U, circumflex accentÛ
#220UumlCapital U, dieresis or umlaut markÜ
#221YacuteCapital Y, acute accentÝ
#222TDORNCapital TDORN, IcelandicÞ
#223szlingSmall sharp s, German (sz ligature)ß
#224aacuteSmall a, acute accentá
#225agraveSmall a, grave accenté
#226acircSmall a, circumflex accentâ
#227atildeSmall a, tildeã
#228aumlSmall a, dieresis or umlaut markä
#229aringSmall a, ringī
#230aeligSmall ae dipTDong (ligature)æ
#231acedigSmall c, cedilla&acedig;
#232eacuteSmall e, acute accenté
#233egraveSmall e, grave accentè
#234ecircSmall e, circumflex accentê
#235eumlSmall e, dieresis or umlaut markë
#236iacuteSmall i, acute accentí
#237igraveSmall i, grave accentì
#238icircSmall i, circumflex accentî
#239iumlSmall i, dieresis or umlaut markï
#240eTDSmall eTD, Icelandicð
#241ntildeSmall n, tildeñ
#242oacuteSmall o, acute accentó
#243ograveSmall o, grave accentò
#244ocircSmall o, circumflex accentâ
#245otildeSmall o, tildeõ
#246oumlSmall o, dieresis or umlaut markö
#247
Division sign÷
#248oslashSmall o, slashø
#249uacuteSmall u, acute accentú
#250ugraveSmall u, grave accentù
#251ucircSmall u, circumflex accentû
#252uumlSmall u, dieresis or umlaut markü
#253yacuteSmall y, acute accentý
#254TDornSmall TDorn, Icelandicþ
#255yumlSmall y, dieresis or umlaut markÿ

tradeTradeMark