1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Como insertar caracteres especiales en tu HTMLimagen de greefus groinks

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 :)

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Nicolás Nicolás

    Muy bueno, Gracias!

  2. Avatar de Gerald Gerald

    Muy buen aporte.

  3. Avatar de Germán Germán

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

  4. Avatar de Lore 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. Avatar de Germán 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. Avatar de vazago 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. Avatar de vazago 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. Avatar de tenchus tenchus

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

    como esta que escribo

  9. Avatar de jb360 jb360

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

  10. Avatar de Isabel Isabel

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

  11. Avatar de Rafael B. 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. Avatar de monika monika

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

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910