Cómo usar caracteres especiales en HTML

4.2 (84.49%) 138 votes


Las p√°ginas web que usted visita en l√≠nea est√°n construidas usando c√≥digo HTML que le dice a los navegadores web cu√°l es el contenido de la p√°gina y c√≥mo renderizarla visualmente para los espectadores. El c√≥digo contiene bloques de construcci√≥n instructivos conocidos como elementos, que el visualizador de p√°ginas web nunca ve. El c√≥digo tambi√©n contiene caracteres de texto normales como los de los titulares y p√°rrafos dise√Īados para que el espectador los lea.

El papel de los caracteres especiales en HTML

Cuando utiliza HTML y escribe el texto dise√Īado para ser visto, por lo general no necesita ning√ļn c√≥digo especial; s√≥lo utiliza el teclado de su computadora para agregar las letras o caracteres apropiados. Un problema surge cuando se desea escribir un car√°cter en el texto legible que HTML utiliza como parte del propio c√≥digo. Estos caracteres incluyen los caracteres < y> que se usan en el c√≥digo para comenzar y terminar cada etiqueta HTML. Tambi√©n puede incluir caracteres en el texto que no tengan un an√°logo directo en el teclado, como ¬© y √Ď. Para los caracteres que no tienen una tecla en el teclado, introduzca un c√≥digo.

Los caracteres especiales son piezas espec√≠ficas de c√≥digo HTML dise√Īadas para mostrar caracteres que se utilizan en el c√≥digo HTML o para incluir caracteres que no se encuentran en el teclado en el texto que ve el espectador. HTML muestra estos caracteres especiales con codificaci√≥n num√©rica o de caracteres para que puedan ser incluidos en un documento HTML, le√≠dos por el navegador y mostrados correctamente para que los visitantes de su sitio los vean.

Hay tres caracteres en el centro de la sintaxis del c√≥digo HTML. Nunca debe usarlos en las partes legibles de su p√°gina web sin codificarlos primero para que se muestren correctamente. Son los s√≠mbolos de mayor que, menor que y ampersand. En otras palabras, nunca debe usar el s√≠mbolo menos que < en su c√≥digo HTML a menos que sea el comienzo de una etiqueta HTML. Si lo haces, el personaje confunde a los navegadores, y es posible que tus p√°ginas no se muestren como esperas. Los tres caracteres que nunca debe a√Īadir sin codificar son:

  • signo de menos que <
  • mayor que signo>
  • ampersand &

Cuando escribes estos caracteres directamente en tu código HTML, a menos que los estés usando como elementos en el código, en la codificación para ellos, para que aparezcan correctamente en el texto legible:

  • signo “menos que” – &lt;
  • mayor que signo – &gt;
  • ampersand – &amp;

Cada car√°cter especial comienza con un amperio e incluso el car√°cter especial para amperio comienza con este car√°cter. Los caracteres especiales terminan con punto y coma. Entre estos dos caracteres, se a√Īade lo que sea apropiado para el car√°cter especial que se desea a√Īadir. lt (for less than) crea el s√≠mbolo menos que nada cuando aparece entre el ampersand y el punto y coma en HTML. De manera similar, gt crea el s√≠mbolo mayor que el s√≠mbolo y amperios produce un amperiosand cuando se colocan entre un amperiosand y un punto y coma.

Caracteres especiales que no puede escribir

Cualquier car√°cter que se pueda representar en el juego de caracteres est√°ndar de Latin-1 se puede representar en HTML. Si no aparece en el teclado, se utiliza el s√≠mbolo ampersand con el c√≥digo √ļnico que se ha asignado al car√°cter seguido del punto y coma.

Por ejemplo, el “c√≥digo amistoso” para el s√≠mbolo de copyright es &copy; y &trade; es el c√≥digo para el s√≠mbolo de marca registrada.

Este código amigable es fácil de escribir y fácil de recordar, pero hay muchos personajes que no tienen un código amigable que sea fácil de recordar.

Cada car√°cter que se puede escribir en la pantalla tiene un c√≥digo num√©rico decimal correspondiente. Puede utilizar este c√≥digo num√©rico para mostrar cualquier car√°cter. Por ejemplo, el c√≥digo num√©rico decimal para el s√≠mbolo de copyright-&#169;-demuestra c√≥mo funcionan los c√≥digos num√©ricos. Todav√≠a comienzan con un ampersand y terminan con un punto y coma, pero en lugar de texto amigable, se utiliza el signo num√©rico seguido de un c√≥digo num√©rico √ļnico para ese car√°cter.

Los códigos amistosos son fáciles de recordar, pero los códigos numéricos son a menudo más confiables. Los sitios que están construidos con bases de datos y XML pueden no tener todos los códigos amistosos definidos, pero soportan los códigos numéricos.

La mejor manera de encontrar los códigos numéricos de los caracteres es en los juegos de caracteres que puede encontrar en línea. Cuando encuentre el símbolo que necesita, simplemente copie y pegue el código numérico en su HTML.

Algunos juegos de caracteres incluyen:

  • C√≥digos de moneda
  • C√≥digos matem√°ticos
  • C√≥digos de puntuaci√≥n
  • C√≥digos de pronunciaci√≥n
  • C√≥digos diacr√≠ticos

Caracteres que no son del idioma inglés

Los caracteres especiales no se limitan al idioma inglés. Los caracteres especiales en idiomas que no sean el inglés pueden expresarse en HTML incluido:

  • Espa√Īol
  • Franc√©s
  • Griego
  • Rumano

Entonces, ¬Ņqu√© son los c√≥digos hexadecimales?

El código hexadecimal es un formato alternativo para mostrar caracteres especiales en código HTML. Puedes usar cualquier método que quieras para tu página web. Usted los busca en juegos de caracteres en línea y los usa de la misma manera que usa códigos amistosos o códigos numéricos.

A√Īadir la declaraci√≥n Unicode a su cabecera de documento

Agregue la siguiente metaetiqueta en cualquier lugar dentro de su p√°gina web para asegurarse de que sus caracteres especiales se muestren correctamente.

content=”text/html;charset=utf-8″ />

Consejos

Independientemente del método que utilice, tenga en cuenta algunas de las mejores prácticas:

  • Termine siempre su entidad con un punto y coma. Algunos editores HTML le permiten publicar c√≥digos HTML sin el punto y coma final, pero sus p√°ginas no ser√°n v√°lidas y muchos navegadores web no mostrar√°n correctamente las entidades sin ellas.
  • Comience siempre con un ampersand. Muchos editores web le permiten salirse con la suya omitiendo el “amp;” pero cuando muestra un ampersand solo en XHTML, esto causa un error de validaci√≥n.
  • Pruebe sus p√°ginas en tantos navegadores como pueda. Si el car√°cter es crucial para entender su documento y no puede probarlo en las combinaciones de navegador/OS que usan sus clientes, deber√≠a encontrar otra forma de representarlo. Sin embargo, antes de recurrir a im√°genes o a otra cosa, pruebe una de las herramientas de prueba del navegador que pueden validar su c√≥digo en varios navegadores.

Deja un comentario

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