PowerPoint de Microsoft es una herramienta simple para convertir sus presentaciones en un video simple. Puede convertir sus imágenes en una presentación de diapositivas de video agregando texto y varios…
¿Cómo insertar emoji en HTML?
Los emoji son los últimos treinta años y se volvieron extremadamente populares con el uso de teléfonos inteligentes. Aunque inicialmente los jóvenes usan emoji en conversaciones informales de chat y mensajería instantánea, hoy en día se ha vuelto común usar emoji en la comunicación formal. Si es desarrollador web, bloguero o propietario de un sitio, también es posible insertar emoji en HTML como cualquier otro contenido de texto. Esto hará que su contenido sea atractivo para los lectores cuando lo lean en el navegador.
Comprensión de Emoji
Antes de continuar, estos son algunos de los puntos que debe comprender sobre los emoji.
- El consorcio Unicode, una organización sin fines de lucro, define la especificación para cada carácter emoji y mantiene la documentación técnica.
- Para usar emoji, debe asegurarse de que el documento HTML use el formato de conjunto de caracteres UTF-8.
- Hay más de 1300 emoji oficiales disponibles según Unicode e innumerables emoji no estándar también están disponibles de varios otros desarrolladores. Puede insertar el emoji Unicode formal en documentos HTML sin ninguna herramienta de software adicional.
- Los emoji son caracteres de texto como caracteres alfanuméricos. En los teclados móviles iOS y Android, puede cambiar el diseño del teclado para insertar emoji. Sin embargo, los teclados de escritorio no tienen teclas dedicadas para cada símbolo emoji.
Sin tener teclas en su teclado, veamos cómo puede insertar el emoji en HTML.
Unicode Codepoint
El propósito del consorcio Unicode es hacer emoji como caracteres estándar utilizados uniformemente en todos los dispositivos e idiomas. Para realizar esta tarea, asignarán un punto de código único para cada símbolo de emoji con una representación predeterminada. Los desarrolladores de aplicaciones y sistemas operativos pueden usar este punto de código para usar la representación predeterminada o personalizar la apariencia. Por ejemplo, U+1F609 es el punto de código del popular emoji Winking Face. Puede obtener los puntos de código de la página oficial de emojis de Unicode.
| Emoji | Codepoint | Hexadecimal | Decimal |
|---|---|---|---|
| Winking Face | U+1F609 | 1F609 | 128521 |
Como puede ver, el punto de código no es más que el código hexadecimal en el formato «U+ hexadecimal».
Insertar Emoji en HTML
Puede usar este código hexadecimal en HTML o convertir este código hexadecimal en formato decimal y uso. Estos códigos generalmente se denominan entidades de escape HTML o cadenas de escape. Veamos cómo usar estos códigos correctamente en la página web HTML.
Definición de UTF en HTML
Como se mencionó, el primer e importante paso es asegurarse de que su documento HTML tenga la metaetiqueta charset como se muestra a continuación:
<meta charset="UTF-8">La plantilla HTML completa debería verse algo como a continuación:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML Webpage with Emoji</title> </head> <body> ...Your Content Goes Here... </body> </html> Asegúrese de usar la declaración de codificación de caracteres inmediatamente después de la etiqueta principal. Esto indicará a los navegadores que interpreten las cadenas de escape hexadecimales y decimales como símbolos de emoji apropiados.
Etiquetas HTML para usar con Emoji
Como los emoji son caracteres de texto, puede usar cualquier etiqueta HTML relacionada con texto para insertar emoji. Las etiquetas de párrafo y de extensión son dos opciones sencillas:
- <p>emoji</p>
- <span>emoji</span>
Recuerde que, por lo general, la etiqueta de párrafo creará una nueva línea, mientras que la extensión continuará en la misma línea. Además, también puede usar emoji con otras etiquetas como <li> para crear una lista de emoji. Después de definir el conjunto de caracteres y decidir la etiqueta que desea usar, hay múltiples opciones para insertar emoji en su página HTML.
Uso de código hexadecimal en HTML
Tomemos el mismo ejemplo de emoji de Winking Face. Puede usar el siguiente formato de código hexadecimal en HTML para insertar el emoji.
<p>This is a Winking Face <span>😉</span> emoji symbol.</p>Puede usar letras mayúsculas o minúsculas para escribir el código hexadecimal. Producirá el resultado que se muestra a continuación.
Este es un símbolo emoji de Cara guiñando un ojo .
Código decimal de emoji en HTML
En lugar del código hexadecimal, puede usar el código decimal como cadena de escape con el siguiente formato.
<p>This is another Winking Face <span>😉</span> emoji symbol.</p>Lo hará producir el mismo resultado que el anterior. La única diferencia es que puede eliminar la ‘x’ en la sintaxis cuando usa código decimal.
Inserción directa de emoji en HTML
Aunque los dos métodos anteriores son fáciles de usar, no funcionarán en todos los casos. El problema es que no todos los emoji tienen un único punto de código. Hay muchos símbolos emoji que contienen una combinación de puntos de código. Por ejemplo, el punto de código para el emoji científico es U+1F9D1 U+200D U+1F52C, que no puede escribir con los métodos anteriores.
La opción más fácil aquí es copiar y pegar el emoji que necesita entre las etiquetas HTML.
<p>This is a scientist emoji <span> </span> symbol.</p>Ahora que puede hacer una pregunta, desde donde puede copiar todos estos símbolos emoji:
- Hay muchos sitios web que ofrecen copias pegar símbolo emoji. También tenemos más de 1000 símbolos emoji de copiar y pegar con opción de búsqueda. Puede buscar y encontrar su símbolo de emoji favorito, simplemente haga clic en él para copiarlo en el portapapeles. Después de copiar, puedes pegar el emoji en tu HTML.
- Si no quieres copiar y pegar, prueba los atajos de teclado del código alternativo para el símbolo de emoji. Por ejemplo, Alt + 128521 producirá un emoji de cara guiñando un ojo. Esto será útil cuando quieras usar pocos emoji con frecuencia. Sin embargo, solo funcionará en computadoras con Windows y necesita un teclado con un teclado numérico separado para escribir el código decimal.
- Tanto Windows como macOS ofrecen un panel de emoji que puede usar para insertar emoji en HTML. En Windows, presione las teclas «Win +». y presione «Comando + Control + Espacio» en macOS. Esto mostrará una ventana emergente donde puede buscar e insertar el emoji.
Insert Scientist Emoji
Editores de documentos HTML
La mayoría de las personas usan un editor de texto para preparar su documento HTML. Todas las aplicaciones de edición de texto como Notepad, Notepad++, TextEdit, Brackets, etc. admiten la inserción de emoji como se explicó anteriormente. Aunque los editores como el Bloc de notas mostrarán los emoji en color blanco y negro, aparecerán en color sólido cuando se muestren en el navegador.
Asegúrese de guardar el documento en formato UTF-8.
Select UTF-8 Format
A continuación se muestra un ejemplo del código en el editor TextEdit y cómo se mostrará en el navegador Google Chrome.
Emoji in TextEdit and Chrome
Si usa la aplicación para crear su página HTML, puede usar el método de inserción directa o usar el atajo de teclado. Recuerde, algunos sistemas de administración de contenido como WordPress usan PHP en lugar de HTML. Puede obtener más información en un artículo separado sobre la inserción de emoji en WordPress.
Visualización de nuevos emojis
Como se mencionó, la apariencia de emoji puede ser diferente según la codificación de caracteres utilizada por esa aplicación. Por ejemplo, Microsoft Edge, Firefox y Chrome pueden mostrar el mismo emoji en diferentes formatos. Además de este factor, encontrará que algunos símbolos de emoji se mostrarán como un cuadro cuadrado o mostrarán varios símbolos. Esto sucede cuando el navegador no admite el carácter emoji. Unicode lanza nuevos emoji cada año y los navegadores necesitan algo de tiempo para adoptar los nuevos caracteres. Hasta ese momento, verá un cuadro en lugar de un emoji.
Por ejemplo, el emoji Heart on Fire tendrá dos símbolos como este ❤️ . Puede encontrar todos los nuevos símbolos emoji marcados con el símbolo ⊛ en la página oficial de Unicode. Esto es para indicar que es posible que los navegadores no admitan estos símbolos correctamente y que debe evitar usarlos en su página HTML.
Conclusión
Como puede ver, hay muchas maneras de insertar emoji en páginas web HTML. La más fácil es usar paneles de emoji o copiar y pegar de sitios web de terceros. Sin embargo, la visualización de emoji puede distraer al desarrollar una página web en los editores de texto. En este caso, puede usar el formato de código hexadecimal o decimal para los símbolos emoji admitidos.
