Al escribir HTML, puede haber momentos en los que desee insertar un carácter que no puede simplemente escribir. Muchos símbolos comunes, incluidos los símbolos de moneda, los operadores matemáticos y los símbolos legales (como © y ®), no están disponibles en un teclado estándar.
También hay un problema si desea incluir un carácter en su sitio web que ya se usa en HTML. Por ejemplo, HTML interpretará los corchetes angulares (< i >) como el principio y el final de una etiqueta, por lo que no puede escribirlos en HTML como letras o números. No se muestra y puede causar problemas con la página.
La solución a ambos problemas es usar entidades HTML. En esta publicación, aprenderá cómo usar entidades HTML para insertar caracteres especiales en su sitio web. También enumeraremos algunos símbolos comunes y sus entidades para que pueda insertarlos fácilmente en su documento.
Cómo escribir símbolos HTML
Para agregar símbolos en HTML, los desarrolladores usan una entidad HTML. Una entidad HTML es una cadena especial (serie de caracteres) que comienza con un ampersand (&), termina con un punto y coma (;) y contiene el nombre de la unidad o el número de unidad para un símbolo específico. Muchos símbolos tienen entidades HTML reservadas.
Por ejemplo, para insertar el símbolo de copyright (©) en HTML, podemos usar una entidad & Copiar; (nombre de la entidad) o © (número de entidad). Observe cómo se coloca el símbolo hash adicional (#) delante del número de unidad.
El uso de uno de estos elementos hace que el símbolo se represente correctamente en la página:
ver la pluma Símbolos HTML: derechos de autor por HubSpot (@hubspot) en CódigoPen.
Los caracteres que tienen un uso dual como carácter de visualización y carácter HTML funcional también tienen sus propios elementos, por ejemplo, corchetes angulares, ampersand y comillas:
ver la pluma Símbolos HTML: más ejemplos por HubSpot (@hubspot) en CódigoPen.
Para colocar elementos, puede escribirlos o pegarlos de una lista (como la siguiente). Para las entidades que tienen nombres, son fáciles de recordar y escribir. Sin embargo, es posible que algunos navegadores antiguos no procesen el nombre de la entidad. Utilice el número de asunto para asegurarse de que su asunto se muestre correctamente en todos los navegadores.
Lista de símbolos HTML
A veces puede recordar una entidad HTML por su nombre. Otras veces tendrás que comprobarlo. Para ayudarlo, aquí hay una lista de símbolos comunes junto con sus entidades HTML en formatos de nombre y número:
Signos de puntuación y gramática
| Símbolo | Nombre de la unidad | número de entidad | Conocido como |
|---|---|---|---|
| espacio indestructible | |||
| & | & | & | ampersand |
| ‘ | ‘ | ‘ | apóstrofe / comillas simples |
| « | « | « | comillas dobles |
| « | « | « | comillas dobles izquierdas |
| « | « | « | comillas dobles derechas |
| ‘ | ‘ | ‘ | comillas simples izquierdas |
| ‘ | ; ‘ | ‘ | comilla simple derecha |
| – | – | – | guión por favor |
| – | – | – | ellos corren |
| ~ | ˜ | ~ | tilde |
| ¿ | ¿ | ¿ | signo de interrogación invertido |
| yo | ¡ | ¡ | signo de exclamación invertido |
Símbolos de moneda
| Símbolo | Nombre de la unidad | número de entidad | Conocido como |
|---|---|---|---|
| € | € | € | euro |
| £ | &libra; | £ | libra esterlina (libra esterlina) |
| ¥ | ¥ | yen | |
| ¢ | ¢ | centavo | |
| € | lira | ||
| ₣ | franco |
simbolos matematicos
| Símbolo | Nombre de la unidad | número de entidad | Conocido como |
|---|---|---|---|
| × | &veces; | × | multiplicación |
| ÷ | ¶ compartir; | ÷ | división |
| ± | ± | ± | más o menos |
| < | < | < | menos que |
| > | > | > | Mejor que |
| ≤ | ≤ | ≤ | Menos que o igual a |
| ≥ | ≥ | ≥ | Mayor qué o igual a |
| √ | √ | raíz cuadrada | |
| &suma; | ∑ | suma | |
| ∞ | ∞ | infinito | |
| ƒ | ƒ | ƒ | función |
| ∫ | ∫ | integral | |
| ∆ | aumentar | ||
| &Hola; | ∂ | diferencial parcial | |
| ∏ | &dar un toque; | ∏ | producto de n argumentos |
| ∙ | operador de misiles | ||
| ¶ todo el mundo; | ∀ | para todo el mundo | |
| &existir; | ∃ | existe allí | |
| &es en; | ∈ | es parte del kit | |
| &no en; | ∉ | no incluido en el equipo | |
| &vacío; | ∅ | conjunto vacio | |
| ∋ | ∋ | sólo si |
Otros símbolos populares
| Símbolo | Nombre de la unidad | número de entidad | Conocido como |
|---|---|---|---|
| ® | ® | ® | marca registrada |
| © | & Copiar; | © | Derechos de autor |
| ™ | &comercio; | ™ | marca comercial |
| yo | &daga; | † | daga |
| ‡ | &Daga; | ‡ | daga doble |
| ← | flecha izquierda | ||
| → | → | flecha correcta | |
| ↑ | flecha arriba | ||
| ↓ | flecha hacia abajo | ||
| ★ | ★ | estrella negra | |
| ☆ | estrella blanca | ||
| ⚑ | Bandera Negra | ||
| ⚐ | bandera blanca | ||
| &cima; | ♠ | pala negra | |
| y clubes; | ♣ | club negro | |
| &corazones; | ♥ | corazon negro | |
| ♦ | ♦ | diamante negro | |
| ♧ | club blanco | ||
| ♤ | pala blanca | ||
| ♡ | corazón blanco | ||
| ♡ | diamante blanco | ||
| ☐ | urna vacia | ||
| ☑ | urna con una marca de verificación | ||
| ☒ | urna con x | ||
| ☻ | cara sonriente negra | ||
| ☺ | cara blanca sonriente | ||
| ☹ | cara arrugada | ||
| ☮ | Signo de la paz | ||
| ♲ | símbolo de reciclaje |
Agregue símbolos a su código HTML.
En la mayoría de los casos, debería poder escribir bloques de texto sin problemas. Sin embargo, a veces ayuda saber cómo funcionan las entidades HTML y cómo usarlas en sus páginas. Esta es otra herramienta útil para los creadores de sitios web y de contenido, y saberlo te acercará un paso más a dominar HTML.
