Cómo insertar caracteres especiales en tus páginas web

¿Alguna vez te preguntaste cómo insertar símbolos como ™ o ©?, ¿O cómo escribir algo como <p> sin que el navegador lo interprete como código HTML?

Pues para eso están los caracteres especiales!

Esta no es un una lista de caracteres especiales, es más bien un pequeño tutorial sobre cómo usarlos, aquí voy a hablar de los 5 más usados, en pocos días haré un lista con muchos más.

Cómo escribir los caracteres especiales

&, ©, ™ y más

Tomemos como ejemplo el símbolo &, lo primero que tienes que saber es que si quieres que tu página sea válida no puedes simplemente escribir &, tienes que escribir esto: &amp;

Esto se debe a que cualquier referencia a caracteres comienza con el símbolo &

Veamos los símbolos ©, ™ y ®

Aquí verás cómo se escribe cada uno de ellos:

© = &copy;

™ = &trade;

® = &reg;

Nota que para definir un símbolo siempre se empieza con & y se termina con ;

Lo mismo pasa cuando quieres escribir código HTML no como código sino como texto.

Si yo quisiera escribir "<p>Esto es un párrafo.</p>" y lo pusiera tal cual, el navegador asumiría que se trata de HTML y lo mostraría sólo como un párrafo Esto es un párrafo.

Cómo escribir HTML que no sea HTML

En realidad es muy sencillo, sólo hay que cambiar los símbolos < y > por sus respectivos caracteres especiales.

< = &lt; y > = &gt;

Entonces, para escribir ese párrafo y mostrarlo no como HTML sino como texto hay que escribirlo de la siguiente manera:

&lt;p&gt;Esto es un párrafo.&lt;/p&gt;

tu navegador mostrará esto:

<p>Esto es un párrafo.</p>

Hay muchos más símbolos que esos, en pocos días crearé una página de referencia.

Por último, para escribir &amp; y que no se interprete como & tienes que escribir &amp;amp;.

Osea, escribe el signo & y luego el amp;

Creo que eso es todo :)

Comentarios

deja un comentario

1. Nicolás

   Muy bueno, Gracias!

2. Gerald

   Muy buen aporte.

3. Germán

   Gracias! pronto publicaré una página con una lista mucho más amplia de caracteres especiales. :)

4. Lore

   ¡Gracias! Estuve buscando cómo poner el código de unos botones en el blog y lo interpretaba como html... ¡Genial, Germán!

5. Germán

   Que bueno que te haya servido Lore, acabo de sacar una referencia de todos los caracteres especiales (puedes verla en el sidebar) :)

   Un beso.

6. vazago

   muy bueno eso de como insertar códigos especiales en la página, soy webmaster en una empresa de elaboracion de software si tienen alguna duda sobre web me gustaria ayudarlos, pueden escribirme a esta direccion maykelmo@isp.rimed.cu

   chao

7. vazago

   up...... perdonen me equivoque en la direccion de correo es maykelmo@isp.scu.rimed.cu si tienen una duda sobre web ya saben que hacer

8. tenchus

   sabes quisiera saber si puedes poner un tutorial para insertal comentario en un pagina html.

   como esta que escribo

9. jb360

   Aquí tenéis un enlace interesante sobre cómo convertir todos los caracteres a entidades html: http://phpjs.org/functions/htmlentities:425

10. Isabel

    Muchisimas gracias, muy útil!! me salvó con un exámen!

11. Rafael B.

    Tenía algunos errores y algunos caracteres especiales no se veían correctamente. Al final lo he solucionado con lo que dicen en http://www.bloogie.es/tecnologia/web-y-servidores/419-como-utilizar-codigos-html-de-caracteres-especiales respecto al meta charset.

12. monika

    Cómo se ecribe ó, é, á, í ????