Tema 24 · Tecnologías Web

Entidades, Símbolos y Emojis

Aprende a representar caracteres reservados (<, >, &), símbolos monetarios, flechas, caracteres matemáticos y emojis universales.

Integración con JavaScript (<script>)

¿Por qué son necesarias las Entidades en HTML?

En HTML existen caracteres que son reservados por el propio lenguaje. Por ejemplo, si intentas escribir el símbolo menor que (<) en medio de un texto ordinario, el navegador asumirá que estás iniciando una nueva etiqueta y romperá el diseño. Para mostrar estos caracteres con total seguridad, utilizamos Entidades HTML. 

<!-- Sintaxis por nombre o por código numérico Unicode -->
&nombre_entidad;
&#numero_entidad;

Entidades Reservadas e Indispensables

Resultado Descripción Nombre de Entidad Número Decimal
Espacio indivisible (Non-breaking space: evita saltos de línea entre palabras) &nbsp; &#160;
< Menor que (Less than) &lt; &#60;
> Mayor que (Greater than) &gt; &#62;
& Ampersand (Y comercial) &amp; &#38;
" Comillas dobles &quot; &#34;
© Símbolo de Copyright &copy; &#169;
€ Símbolo de Euro &euro; &#8364;
» Comillas angulares dobles derecha (flecha) &raquo; &#187;

Símbolos Matemáticos y Emojis en HTML5

Con la declaración <meta charset="UTF-8">, puedes insertar cualquier símbolo matemático o emoji utilizando su código decimal Unicode:

  • Infinito (&infin; o &#8734;): ∞
  • Sumatoria (&sum; o &#8721;): ∑
  • Cohete espacial (&#128640;): 🚀
  • Cara sonriente (&#128512;): 😀

⚡ Demostración de Entidades, Símbolos y Emojis

Observa cómo el navegador renderiza entidades de código, símbolos comerciales y emojis sin corromperse:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Entidades y Emojis en HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #f8fafc; }
    .card-simbolos { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .item-simbolo { font-size: 1.05rem; margin-bottom: 8px; }
    .emoji-grande { font-size: 1.8rem; vertical-align: middle; }
    code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; color: #0284c7; }
  </style>
</head>
<body>

  <div class="card-simbolos">
    <h3 style="margin-top: 0; color: #0f172a;">Caracteres Especiales y Entidades</h3>

    <div class="item-simbolo">
      <strong>Código seguro:</strong> Para mostrar <code>&lt;h1&gt;</code> usamos: <code>&amp;lt;h1&amp;gt;</code>.
    </div>

    <div class="item-simbolo">
      <strong>Divisas:</strong> 100 &euro; (Euro), 50 &pound; (Libra), 200 &yen; (Yen).
    </div>

    <div class="item-simbolo">
      <strong>Matemáticas:</strong> &radic;16 = 4 &nbsp;&bull;&nbsp; 5 &ne; 10 &nbsp;&bull;&nbsp; &pi; &asymp; 3.1416
    </div>

    <div class="item-simbolo">
      <strong>Navegación:</strong> Siguiente lección &raquo; &nbsp;|&nbsp; &larr; Regresar al inicio
    </div>

    <hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 15px 0;">

    <div class="item-simbolo">
      <strong>Emojis Unicode en HTML5:</strong><br>
      <span class="emoji-grande">&#128640;</span> &nbsp; Cohete espacial (<code>&amp;#128640;</code>)<br>
      <span class="emoji-grande">&#128187;</span> &nbsp; Computadora personal (<code>&amp;#128187;</code>)<br>
      <span class="emoji-grande">&#129302;</span> &nbsp; Robot inteligente (<code>&amp;#129302;</code>)
    </div>

    <p style="margin-top: 15px; font-size: 0.85rem; color: #64748b;">
      &copy; 2026 Kilopolis &amp; Asociados &reg;. Todos los derechos reservados.
    </p>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.