¿Cómo agregar emoji en un documento HTML?

Los emojis son los caracteres del conjunto de caracteres Unicode que parecen imágenes o íconos. Se pueden cambiar de tamaño, copiar o pegar como cualquier otro carácter en HTML. UTF-8 es el juego de caracteres predeterminado que se usa en documentos HTML porque contiene casi todos los caracteres y símbolos.

Los emojis se pueden insertar en documentos HTML especificando el juego de caracteres en UTF-8 que se usará mientras se muestran las páginas web en el navegador. Esta información de codificación de caracteres se especifica mediante el uso de la etiqueta <meta> en la sección de encabezado. Después de la declaración de charset, los emojis se pueden agregar en HTML usando las etiquetas <p> y <span>. La etiqueta <p> se usa para insertar el emoji en una nueva línea, mientras que la etiqueta <span> inserta el emoji en la misma línea.

Hay tres métodos para insertar emojis en un documento HTML:

  1. Usando código hexadecimal
  2. Usando código decimal
  3. Copiar y pegar desde una fuente externa

Usando código hexadecimal:

Los emojis se pueden agregar en un documento HTML especificando su código hexadecimal dentro de las etiquetas requeridas. Estos códigos comienzan con y terminan con ; para informar al navegador que se debe mostrar el carácter representado por el código hexadecimal. Los códigos hexadecimales son más preferidos que los códigos decimales para usarse en HTML porque aseguran la portabilidad y la consistencia del documento a largo plazo.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
</head>
  
<body>
  
    <h1>Emoji List:</h1>
  
    <p>Grinning face : <span> 😀 </span> </p>
    <p>Face having tears of joy : <span> 😂 </span> </p>
    <p>Fire : <span> 🔥 </span> </p>
    <p>Thumbs up : <span> 👍 </span> </p>
    <p>Bell : <span> 🔔 </span> </p>
  
</body>
  
</html>

Producción:

Emojis agregados usando código hexadecimal

Usando código decimal:

Los emojis se pueden agregar en un documento HTML especificando su código decimal dentro de las etiquetas requeridas. Estos códigos comienzan con y terminan con ; para informar al navegador que se debe mostrar el carácter representado por el código decimal.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
</head>
  
<body>
    <h1>Emoji List:</h1>
  
    <p>Grinning face : <span> 😀 </span> </p>
    <p>Face having tears of joy : <span> 😂 </span> </p>
    <p>Fire : <span> 🔥 </span> </p>
    <p>Thumbs up : <span> 👍 </span> </p>
    <p>Bell : <span> 🔔 </span> </p>
</body>
  
</html>

Producción:

Emojis agregados usando código decimal

Copiar de fuente externa:

Los emojis se pueden agregar a documentos HTML copiándolos desde alguna fuente externa y pegándolos directamente en el código. Se prefiere este método cuando un emoji no se puede representar con un solo punto de código, sino que requiere una combinación de varios puntos de código. En este caso, es mejor copiar y pegar directamente el emoji requerido desde alguna fuente externa.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
</head>
  
<body>
    <h1>Emoji List:</h1>
  
    <p>Grinning face : <span> ???? </span> </p>
    <p>Face having tears of joy : <span> ???? </span> </p>
    <p>Fire : <span> ???? </span> </p>
    <p>Thumbs up : <span> ???? </span> </p>
    <p>Bell : <span> ???? </span> </p>
</body>
  
</html>

Producción:

Emojis copiados de una fuente externa

Nota: Los mismos emoji se pueden mostrar en diferentes formatos en diferentes navegadores. Además, es posible que algunos navegadores no admitan los últimos emojis lanzados por Unicode durante algún tiempo y, en ese caso, serán reemplazados por un cuadro rectangular.

Publicación traducida automáticamente

Artículo escrito por saxenaanjali239 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *