¿Qué son los caracteres especiales HTML?

cabecera-caracteres-especiales-html

Los caracteres especiales HTML son una serie de códigos que sirven para traducir los diferentes caracteres que se utilizan en los alfabetos humanos para mostrarlos en los navegadores web. Esto es debido que los ordenadores solo utilizan números y no letras o símbolos.

La necesidad de traducir los caracteres humanos a lenguaje binario no apareció con la llegada de internet. De hecho, su origen se remonta a los propios inicios de la informática.

➡️¿Cómo se usan los caracteres especiales HTML?

Cuando escribimos un texto que va a ser visualizado en una página web, no escribimos solo el texto, sino que le añadimos una seri de fragmentos de código de manera que los navegadores puedan interpretar lo que queremos que se muestre. A continuación, vamos a ver un ejemplo:

Si escribimos el código HTML

<p>Quiero mostrar el s&iacute;mbolo del &#8364;<p>

En pantalla aparece

Quiero mostrar el símbolo del €

En este caso, estamos utilizando dos caracteres especiales, la í (i minúscula con acento agudo) que se representa con la cadena &iacute; y el símbolo del € que se representa con la cadena &#8364;

➡️¿Cuántos tipos de caracteres especiales existen?

Con la evolución de los ordenadores y, especialmente, con la aparición de internet, las tablas o códigos de caracteres especiales se han ido ampliando y adaptando. Vamos a ver las principales codificaciones que se han desarrollado hasta llegar a los caracteres especiales HTML.

ASCII

La información que se introduce en un ordenador, ya sean números, textos o imágenes, se almacena en lenguaje binario, es decir, como unos y ceros (01000101).

El código ASCII (American Standard Code for Information Interchange ) se desarrolló para poder establecer un formato estandarizado en el que se pudieran almacenar estos caracteres alfanuméricos. Se definió un número binario único de 7 bits para cada carácter almacenable para soportar los números del 0 al 9, el alfabeto inglés con mayúsculas y minúsculas (a-z, A-Z), y algunos caracteres especiales como ! $ + – ( ) @ < > .

Dado que ASCII usaba un byte (7 bits para el carácter, y uno de bits para el control de la paridad de transmisión), sólo podía representar 128 caracteres diferentes. Además, 32 de estos caracteres se reservaban para otros propósitos como el envío de comandos de control a los ordenadores.

Sin embargo, pronto se apreció que el sistema tenía una gran debilidad y era que excluía las letras no inglesas. Por ello se realizó una extensión posterior que incluía caracteres propios de otros alfabetos como la Ñ o las tildes del alfabeto español, así como pequeños gráficos en formas de caracteres con los que se podían dibujar tablas.

Hoy en día, el ASCII sigue siendo de uso generalizado en grandes sistemas de ordenadores centrales y todavía es comprensible para cualquier ordenador doméstico.

A continuación, te mostramos algunos caracteres pertenecientes a la tabla ASCII y su código HTML:

!
«
#
$
%
&

(
)
*
+
,

.
/
&#33;
&#34;
&#35;
&#36;
&#37;
&#38;
&#39;
&#40;
&#41;
&#42;
&#43;
&#44;
&#45;
&#46;
&#47;















signo de exclamación
comilla doble
almohadilla
signo de dólar
signo de porcentaje
et
comilla simple
paréntesis de apertura
paréntesis de cierre
asterisco
signo de suma
coma
signo de resta, guion
punto
barra inclinada
       

UTF-8

La codificación ASCII y las codificaciones posteriores seguían siendo limitadas. Debido a la cantidad de símbolos y caracteres necesarios en entorno globales y multilingües, con la llegada del lenguaje HTML5 se adoptó como estándar la codificación UTF-8. Esta codificación desarrollada por el Consorcio Unicode y cubre prácticamente todos los caracteres del mundo.

Además, funciona en casi todos los lenguajes de programación, sistemas operativos y navegadores existentes.

Dentro del extenso código UTF-8 podemos encontrar caracteres latinos, griegos, cirílicos, signos de puntuación, símbolos de monedas, flechas, operadores matemáticos, formas geométricas y emoticonos.

Veamos algunos ejemplos, así como su referencia de código HTML:






Φ
Ω







&empty;
&radic;
&int;
&larr;
&lArr;
&Phi;
&Omega;
&#9992;
&#10016;
&#10052;
&#10084;
&#9709;
&#9632;
&#9671;
&#9997;















Conjunto vacío
raíz cuadrada
integral
flecha hacia la izquierda
doble flecha hacia la izquierda
Letra griega Phi
Letra griega Omega
Avión
Cruz de Malta
copo de nieve
corazón
triángulo con mitad izquierda negra
cuadrado negro
rombo blanco
mano escribiendo
       

Es importante tener en cuenta que para que los símbolos y caracteres se impriman correctamente en la pantalla, debemos añadir un encabezado al principio del documento indicando la codificación correspondiente. Se trata de una simple línea como esta:

<meta charset=»UTF-8″>

De esta manera, el navegador sabrá que la codificación de toda la página es la correspondiente al estándar UTF-8, de lo contrario aparecerá directamente el código y no los caracteres especiales HTML.

➡️Otras codificaciones

Como comentábamos anteriormente, entre el ASCII y el UTF-8 se desarrollaron otros juegos de caracteres que han ido complementando y ampliando la codificación ASCII original.

Un ejemplo sería la codificación ANSI, que se creó para extender la limitación de 128 caracteres del ASCII a 256 caracteres. Otra codificación muy similar al ANSI es la ISO-8859-1, que fue la codificación por defecto en HTML4.

➡️Conclusión

Los caracteres especiales HTML son indispensables en la red actual. Sin ellos, sería imposible traducir millones de páginas web a idiomas diferentes al inglés.

Además de esto, los caracteres especiales HTML nos sirven para enriquecer el aspecto visual de nuestros documentos, permitiéndonos insertar símbolos y dibujos de carácter universal empleando tan solo unos pocos bytes de información.

Si quieres ampliar información sobre los caracteres especiales HTML te dejamos esta web.

¿Y tú? ¿Los has probado alguna vez? Como siempre, esperamos haberte aclarado este tema y te invitamos a que nos dejes un comentario si tienes cualquier duda.

Si te ha gustado este post te interesa:

Comentarios (2)

Hola , pimero es muy bueno el ametiral pero … esos son todos?? me gustaria si lo pueden extender un poco mas… muchas gracias

Hola Marco proximamente actualizaremos el post con mas caracteres especiales.
Un saludo .

Dejar un comentario

Acepto la política de privacidad

RESPONSABLE: DESAFIO INTERNET SL
FINALIDAD PRINCIPAL: Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN: Consentimiento del interesado.
DESTINATARIOS: No se cederán datos a terceros, salvo autorización expresa u obligación legal
DERECHOS: Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, transparencia y derecho a no ser objeto de decisiones automatizadas.
INFORMACIÓN ADICIONAL: Puede consultar la información adicional y detallada sobre nuestra Política de Privacidad y Aviso Legal ADICIONAL: Puede consultar la información adicional y detallada sobre nuestra Política de Privacidad y Aviso Legal

*

Share This