HTML para principiantes (parte 22): Entidades HTML

Las entidades en HTML son unas estructuras que, mediante el uso de una codificación, nos permiten representar un símbolo.

Los caracteres reservados en HTML o los caracteres que no están presentes en el teclado deben reemplazarse por entidades.

Por ejemplo, si intentas añadir al texto de tu página web, los símbolos > (mayor que) o < (menor que), lo más probable es que tu navegador web los confunda con delimitadores de etiquetas HTML y los interprete incorrectamente. Por consiguiente para representar estos dos caracteres reservados de HTML deberás utilizar entidades.

Una entidad tiene el siguiente formato:

&nombe_entidad; o &#código_entidad;

Por ejemplo para mostrar el símbolo de menor que (<), en tu página web, deberás de codificarlo como: < o <

Ventajas de utilizar los nombres de entidad: Un nombre de entidad es fácil de recordar.
Desventajas de usar un nombre de entidad: Algunos navegador podrían no soportar todos los nombres de entidad, pero suelen soportar todos los códigos de entidad.

Espacio en blanco indivisible

Una entidad muy común utilizada en HTML es el espacio en blanco, entre palabras, indivisible:  

Un espacio indivisible entre dos palbras no las dividirá en líneas diferentes.

Dos palabras separadas por un espacio indivisible, permanecerán juntas en la misma línea (no se dividirán, por ejemplo, si no caben ambas al final de una línea). Esto es útil cuando dividir las palabras puede ser perjudicial.

Ejemplos:

120 €
25 km/h
11 AM

Otro uso común del espacio en blanco indivisible es evitar que los navegadores eliminen espacios en blanco en las páginas HTML.

Si escribes 10 espacios en blanco seguidos en tu texto, el navegador eliminará 9 de ellos. Para agregar espacios reales al texto, puede usar la entidad   (aunque esta es una técnica que no recomiendo, se debería utilizar CSS para conseguir el mismo resultado y no abusar de  )

También existe el guión indivisible ( ‑ ) que te permitirá utilizar un guión (‑) entre palabras que no las dividirá en diferentes líneas, sino que hará que, al igual que con el espacio en blanco indivisible, permanezcan siempre en la misma línea.

Entidades para marcas diacríticas

Una marca diacrítica es un “glifo” agregado a una letra.

Las marcas diacríticas más utilizadas, son los acentos, ya sean graves (`) o agudos (´).

Estas marcas pueden aparecer tanto encima como debajo de una letra, dentro de una letra y entre dos letras.

Las marcas diacríticas las puedes usar en combinación con caracteres alfanuméricos para producir un carácter que no está presente en el conjunto de caracteres (codificación) utilizado en una página web.

A continuación unos ejemplos:

Símbolo	Nombre entidad	Número entidad
á	á	á
ñ	& ntilde;	& #241;
ü	& uuml;	& #252;

Listado de las principales entidades HTML

Código	Nombre	Símbolo	Descripción
"	"	"	Comillas dobles
&	&	&	Ampersand
<	<	<	Menor que
>	>	>	Mayor que
&#160			Espacio sin ruptura (Non-breaking Space)
¡	¡	¡	Exclamación invertida
¢	¢	¢	Signo de Centavo
£	£	£	Signo de Libra Esterlina
¤	¤	¤	Signo de Moneda General
¥	¥	¥	Signo de Yen
¦	¦	¦	Barra vertical partida
§	§	§	Signo de Sección
¨	¨	¨	Diéresis
©	©	©	Copyright
ª	ª	ª	Ordinal Femenino
«	«	«	Ángulo izquierdo
¬	¬	¬	Signo No
			Guión suave
®	®	®	Marca registrada
¯	¯	¯	Acento macron
°	°	°	Signo de Grado
±	±	±	Más / menos
²	²	²	Signo de "al cuadrado" (superscript 2)
³	³	³	Signo de "al cubo" (superscript 3)
´	´	´	Acento agudo
µ	µ	µ	Signo de Micro
¶	¶	¶	Párrafo
·	·	·	Punto medio
¸	¸	¸	Cedilla
¹	¹	¹	Signo de "a la 1" (superscript 1)
º	º	º	Ordinal Masculino
»	»	»	Ángulo derecho
¼	¼	¼	Fracción un-cuarto
½	½	½	Fracción un-medio
¾	¾	¾	Fracción tres-cuartos
¿	¿	¿	Interrogación abierta
À	À	À	A mayúscula, acento grave
Á	Á	Á	A mayúscula, acento agudo
Â	Â	Â	A mayúscula, acento circunflejo
Ã	Ã	Ã	A mayúscula, tilde
Ä	Ä	Ä	A mayúscula, diéresis
Å	Å	Å	A mayúscula, anilloanillo
Æ	Æ	Æ	AE mayúscula diptongo (ligature)
Ç	Ç	Ç	C mayúscula, cedilla
È	È	È	E mayúscula, acento grave
É	É	É	E mayúscula, acento agudo
Ê	Ê	Ê	E mayúscula, acento circunflejo
Ë	Ë	Ë	E mayúscula, diéresis
Ì	Ì	Ì	I mayúscula, acento grave
Í	Í	Í	I mayúscula, acento agudo
Î	Î	Î	I, acento circunflejo
Ï	Ï	Ï	I mayúscula, diéresis
Ð	Ð	Ð	Letra Eth mayúscula, (Islandia)
Ñ	Ñ	Ñ	N mayúscula, tilde
Ò	&Ograve	Ò	O mayúscula, acento grave
Ó	Ó	Ó	O mayúscula, acento agudo
Ô	Ô	Ô	O mayúscula, acento circunflejo
Õ	Õ	Õ	O mayúscula, tilde
Ö	Ö	Ö	O mayúscula, diéresis
×	×	×	Signo de Multiplicar
Ø	Ø	Ø	O mayúscula, slash
Ù	Ù	Ù	U mayúscula, acento grave
Ú	Ú	Ú	U mayúscula, acento agudo
Û	Û	Û	U mayúscula, acento circunflejo
Ü	Ü	Ü	U mayúscula, diéresis
Ý	Ý	Ý	Y mayúscula, acento agudo
Þ	Þ	Þ	Letra Thorn, (Islandia)
ß	ß	ß	s minúscula sostenida, (Alemania)
à	à	à	a minúscula, acento grave
á	á	á	a minúscula, acento agudo
â	â	â	a minúscula, acento circunflejo
ã	ã	ã	a minúscula, tilde
ä	ä	ä	a minúscula, diéresis
å	å	å	a minúscula, anillo
æ	æ	æ	ae minúsculae diptongo
ç	ç	ç	c Small c, cedilla
è	è	è	e minúscula, acento grave
é	é	é	e minúscula, acento agudo
ê	ê	ê	e minúscula, acento circunflejo
ë	ë	ë	e minúscula, diéresis
ì	ì	ì	i minúscula, acento grave
í	í	í	i minúscula, acento agudo
î	î	î	i minúscula, acento circunflejo
ï	ï	ï	i minúscula, diéresis
ð	ð	ð	eth minúscula, (Islandia)
ñ	ñ	ñ	n minúscula, tilde
ò	ò	ò	o minúscula, acento grave
ó	ó	ó	o minúscula, acento agudo
ô	ô	ô	o minúscula, acento circunflejo
õ	õ	õ	o minúscula, tilde
ö	ö	ö	o minúscula, diéresis
÷	÷	÷	Signo de División
ø	ø	ø	o minúscula, slash
ù	ù	ù	u minúscula, acento grave
ú	ú	ú	u minúscula, acento agudo
û	û	û	u minúscula, acento circunflejo
ü	ü	ü	u minúscula, diéresis
ý	ý	ý	y minúscula, acento agudo
þ	þ	þ	thorn minúscula, (Islandia)
ÿ	ÿ	ÿ	y minúscula, diéresis
Œ	&OElig;	Œ	OE mayúscula
œ	&oelig;	œ	oe minúscula
Š	&Scaron;	Š	S mayúscula con caron
š	&scaron;	š	s minúscula con caron
Ÿ	&Yuml;	Ÿ	Y mayúscula con diéresis
ˆ	&circ;	ˆ	acento circunflejo
˜	&tilde;	˜	tilde minúscula
–	–	–	dash en
—	—	—	dash em
‘	‘	‘	comilla simple izquierda
’	’	’	comilla simple derecha
‚	&sbquo;	‚	coma bajo-9 simple
“	“	“	comilla doble izquierda
”	”	”	comilla doble derecha
„	&bdquo;	„	coma bajo-9 doble
†	&dagger;	†	daga
‡	&Dagger;	‡	doble daga
‰	&permil;	‰	por mil
‹	&lsaquo;	‹	ángulo simple izquierdo
›	&rsaquo;	›	ángulo simple derecho
€	€	€	euro