▷ Caracteres Especiales HTML ¡Ejemplos!

Como ya aprendiste, los archivos HTML son texto ASCII y no deben contener caracteres de formato o estilo/fantasía. De hecho, los únicos caracteres que debes colocar en tus archivos HTML son los que realmente están impresos en tu teclado.

Si tienes que mantener presionada cualquier tecla que no sea Shift o escribir una combinación arcana de teclas para producir un solo carácter, no puedes usar ese carácter en tu archivo HTML.

Para utilizar símbolos especiales como comillas, el signo mayor que (>), el signo menor que (<) y el símbolo de copyright (©) en el documento de tu página web, debes utilizar caracteres especiales, a veces llamados caracteres de entidad. Por ejemplo, si deseas incluir una línea de copyright en tu página de la siguiente manera:

Debes utilizar el código de caracteres especiales [html]©[/html] para mostrar el símbolo de copyright, como se muestra en el siguiente código:

&copy; Copyright 2024. Desde Cero. Todos los derechos reservados

Otro código de carácter especial útil es  , que significa espacio no descifrable. Puedes haber notado que los navegadores web tratan múltiples espacios como un solo espacio. Si necesitas un pequeño número de espacios en tu texto, puede usar   varias veces para indicar múltiples espacios en blanco.

La siguiente tabla proporciona descripciones de los caracteres especiales y su código correspondiente.

Carácter	Nombre de la Entidad	Código
“	Comillas	"
‘	Apóstrofo	'
©	Símbolo Copyright	©
&	Ampersand	&
Espacio vacío	Espacio ininterrumpido
—	Guión largo	—
\|	Barra Vertical	\|

Codificación de Caracteres y UTF-8

Antes de que puedas hablar sobre cómo agregar caracteres especiales a tu página web, primero tengo que hablar un poco sobre la codificación de caracteres. Cuando pensamos en texto, pensamos en caracteres como “a” o “6” o “&” o un espacio. Las computadoras, sin embargo, las consideran entradas numeradas en una lista. Cada una de estas listas de caracteres se conoce como un conjunto de caracteres.

Un conjunto de caracteres del que puedes haber oído hablar es ASCII, que contiene 128 caracteres, incluidas las letras mayúsculas y minúsculas, los números, la puntuación y otros caracteres especiales como el espacio, retroceso y tabulador. El carácter de espacio está en la posición 32 de la lista de caracteres ASCII. Cuando lo conviertes a notación hexadecimal (base 16), está en la posición 20.

Hay mucho más que se puede decir acerca de la codificación de caracteres; de hecho, se han escrito grandes libros sobre el tema. En este punto, solo voy a darte un atajo. Para asegurarte de que tus caracteres especiales siempre tengan el aspecto que deben, solo debes asegurarte de que tus páginas especifiquen que están codificadas en UTF-8 y que uses las entidades que describiré brevemente para cualquier carácter que no están en los 128 caracteres en el conjunto ASCII. Si hace ambas cosas, nunca tendrá problemas con los navegadores que no muestran los caracteres que desea.

La pregunta es, ¿cómo especifico que mis páginas web utilicen el conjunto de caracteres UTF-8? El conjunto de caracteres se puede configurar en el nivel del servidor web, y lo discutiré en la más adelante. Puedes especificar la codificación en el nivel de la página. Si estás utilizando HTML5, debería comenzar tu página de esta manera:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

El conjunto de caracteres se especifica utilizando la etiqueta <meta>. Para HTML5, el conjunto de caracteres se especifica mediante la siguiente etiqueta <meta>:

<meta charset="utf-8">

Nota

UTF-8 es un conjunto de caracteres que es compatible con ASCII y que soporta todos los caracteres del conjunto de caracteres Unicode. Esto es importante porque Unicode soporta un gran número de caracteres en un gran número de alfabetos. Es extremadamente improbable que quieras usar un carácter que no esté soportado por Unicode.

Entidades de Caracteres para Caracteres Especiales

Las entidades de caracteres toman una de dos formas: entidades nombradas y entidades numeradas. Las entidades nombradas comienzan con un signo (&) y terminan con un punto y coma (;). En medio se encuentra el nombre del carácter (o, más probablemente, una versión abreviada de ese nombre, como [code]agrave[/code] para una a con un acento grave, o [code]reg[/code] para un signo de marca registrada). A diferencia de otras etiquetas HTML, los nombres distinguen entre mayúsculas y minúsculas, por lo que debes asegurarte de escribirlas exactamente. Las entidades nombradas son similares a las siguientes:

Las entidades numeradas también comienzan con un signo y terminan con un punto y coma, pero en lugar de un nombre, tienen un signo de número (#) y un número. Los números corresponden a las posiciones de caracteres en el conjunto de caracteres de la página web. En esta lección, asumiré que estás usando UTF-8. Cada carácter que puedes escribir o para el que puedes usar una entidad nombrada también tiene una entidad numerada. Las entidades numeradas se parecen a las siguientes:

&#224;
&#34;
&#171;
&#169;

Puedes usar entidades con nombre o números en tu archivo HTML incluyéndolos en el mismo lugar que iría el carácter que representan. Por lo tanto, para colocar la palabra resumí en tu archivo HTML, debes usar:

resum&iacute;

resum&#237;

Si usas entidades nombradas, el conjunto de caracteres no es importante porque el navegador traducirá la entidad nombrada al carácter apropiado en el conjunto de caracteres especificado para la página. Puedes encontrar una lista completa de las entidades nombradas en http://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html

Dado que UTF-8 admite más de 100,000 caracteres, es difícil imprimir una tabla de todos ellos. Sin embargo, un recurso que puedes usar para buscar caracteres UTF-8 es el recurso en https://www.utf8-chartable.de/unicode-utf8-table.pl. Recuerda que necesitarás usar las representaciones decimales en tus entidades.

Entidades de Caracteres para Caracteres Reservados

En su mayor parte, las entidades de caracteres existen para que pueda incluir caracteres especiales que no forman parte del conjunto de caracteres ASCII estándar. Sin embargo, hay varias excepciones para los pocos caracteres que tienen un significado especial en el propio HTML. También debes usar entidades para estos personajes. Supongamos que desea incluir una línea de código similar a la siguiente en un archivo HTML:

No se ve inusual, ¿verdad? Desafortunadamente, este no es un HTML válido como está escrito. ¿Por qué? El problema es con el carácter < (menor que). Para un navegador HTML, el carácter menos que significa “este es el comienzo de una etiqueta”. Debido a que el carácter menos que en realidad no es el comienzo de una etiqueta en este contexto, tu navegador puede confundirse. Tendrá el mismo problema con el carácter mayor que (>) porque significa el final de una etiqueta en HTML, y con el símbolo (&) porque indica el comienzo de una entidad. Escrita correctamente para HTML, la línea de código anterior se vería como la siguiente:

<p><code>if x &lt; 0 do print i</code></p>

El uso de estas entidades también es importante si deseas imprimir etiquetas HTML en tus páginas web, como esto:

<p>El elemento <code>&lt;p&gt;</code> representa un párrafo.</p>

HTML proporciona entidades con nombre para cada uno de estos caracteres, y una también para la comilla doble, como se muestra en la Tabla:

Entidad	Resultado
<	<
>	>
&	&

Tabla Completa Caracteres HTML

Caracteres especiales	Entidades HTML	Carácter ASCII	Descripción del carácter
			Espacio irrompible
			Guión opcional
‎	&lrm;	‎	Marca de izquierda a derecha
‏	&rlm;	‏	Marca de derecha a izquierda
“	"	"	Comillas dobles
«	«	«	Comilla española o Comilla de inicio
»	»	»	Comilla española de cierre o Comilla de fin
‹	&lsaquo;	‹	Comilla de ángulo abierto
›	&rsaquo;	›	Comilla de ángulo cerrado o Comilla de cierre angulada
“	“	“	Comilla de inicio o Comilla de cita
”	”	”	Comilla de cierre o Comilla de cita
„	&bdquo;	„	Comilla baja o Comilla baja de apertura
‘	'	'	Comilla simple de apertura o Comilla simple de inicio
‘	‘	‘	Comilla simple o Comilla de apertura
’	’	’	Comilla simple o Comilla de cierre
‚	&sbquo;	‚	Comilla baja o Comilla baja de cierre
…	…	…	Puntos suspensivos o Triple punto
!	!	!	Signo de exclamación
¡	¡	¡	Signo de exclamación invertido
?	?	?	Signo de interrogación
¿	¿	¿	Signo de interrogación invertido
(	(	(	Paréntesis de apertura
)	)	)	Paréntesis de cierre
[	[	[	Corchete de apertura o Corchete izquierdo
]	]	]	Corchete de cierre o Corchete derecho
{	{	{	Llave de apertura o Llave izquierda
}	}	}	Llave de cierre o Llave derecha
¨	¨	¨	Diéresis” o Diacrítico de umlaut
´	´	´	Acento agudo o Acento ortográfico
`	`	`	Acento grave
^	^	^	Acento circunflejo
ˆ	&circ;	ˆ	Acento circunflejo o sombrero
~	~	~	Tilde o virgulilla
˜	&tilde;	˜	Tilde invertido o tilde bajo
¸	¸	¸	Cedilla
#	#	#	Símbolo de número o almohadilla
*	*	*	Asterisco o estrella
,	,	,	Coma
.	.	.	Punto
:	:	:	Dos puntos
;	;	;	Punto y coma
·	·	·	Punto medio o interpunto
•	•	•	Punto de viñeta o punto de bala
¯	¯	¯	Macrón o raya alta
‾	&oline;	‾	Sobrebarra o barra superior
–	–	-	Guión o raya
–	–	–	Guion largo o raya enemiga
—	—	—	Guion largo o raya enemiga
_	_	_	Guion bajo o subrayado
\|	\|	\|	Barra vertical (pipe)
¦	¦	¦	Barra vertical doble
‌	&zwnj;	‌	Espacio sin avance o separador de palabras de ancho cero
‍	&zwj;	‍	Espacio sin avance o separador de palabras de ancho cero
†	&dagger;	†	Cruz de malta (“daga” o “cruz de la muerte”)
‡	&Dagger;	‡	Doble cruz de malta (“doble daga” o “cruz de la muerte doble”)
§	§	§	Sección
¶	¶	¶	Párrafo
©	©	©	Copyright
®	®	®	Marca registrada
™	™	™	Marca registrada o símbolo de trademark
&	&	&	Ampersand o et
@	@	@	Arroba
/	/	/	Barra o Slash
\	\	\	Barra invertida o backslash
◊	&loz;	◊	Rombo
♠	&spades;	♠	Pica o espada
♣	&clubs;	♣	Trébol negro
♥	&hearts;	♥	Corazón negro
♦	&diams;	♦	Diamante negro
←	←	←	Flecha izquierda
↑	↑	↑	Flecha arriba
→	→	→	Flecha a la derecha
↓	↓	↓	Flecha abajo
↔	↔	↔	Flecha bilateral izquierda-derecha

Si tienes alguna duda o aporte no dudes en comentar. Nos vemos en el siguiente artículo. ¡No olvides compartirlo! :’)