Códigos HTML | Carácteres especiales (escapados)

Códigos HTML | Carácteres especiales (escapados)

Print Friendly, PDF & Email
Códigos HTML | Carácteres especiales (escapados)
Valora esta entrada
¿Que tienen en común un chino, un ruso, un español y un italiano? Parece un chiste malo pero me voy a resistir.

El alfabeto chino es distinto al ruso. El ruso muy distinto al griego. E incluso entre las lenguas con un origen común en el latín existen diferencias entre el español, el francés y el italiano.

¿Verdad que resultaría poco práctico que tu navegador almacenara tanta información como para ocupar excesivo espacio en tu ordenador y ser capaz de interpretar todas las webs con contenidos en todos los idiomas del mundo?

Sin embargo un día necesitas una letra en especial porqué te has apuntado a un curso de chino y tu profesor te ha colgado los apuntes en su web y entonces te das cuenta que la has fastidiado porqué parece Matrix.

El chino, el ruso, el español y el italiano todos comparten en común que todos usan exactamente el mismo HTML. Se escribe igual en Peking que en Pokong.

Pero lo que es la prosa, frases, oraciones, palabras… ya es otro cantar. Y cada navegador interpreta lo que puede. El chino lo ve de maravilla en su navegador chino. Tu no ves nada.

Como solución, en html se habilita la posibilidad de identificar cualquier símbolo de forma unequívoca mediante los famosos códigos HTML.

De este modo si nuestro amigo prevé que va a escribir un carácter especial entonces lo hará escapado.

Como moraleja, si alguna vez ves que tu letra ñ está destinada a una web en un país ruso entonces puedes usar el texto ñ

Otros usos de los caracteres especiales

En ocasiones vas a necesitar escribir < o >.

Tu navegador lo entenderá como un error de sintaxis y verás resultados inesperados. Veamos un ejemplo:

Como se visualiza

Me encanta escribir etiquetas html como <a> o <img>

Como es el html en realidad

Ejemplo de texto escrito con códigos html
Ejemplo de texto escrito con códigos html

Códigos html básicos

Es imposible recordar toda la tabla de códigos html y códigos ASCII.

Personalmente cuando tengo dudas me gusta ir a este enlace. Tal vez haya recursos mejores pero a mi este me funciona.

Intento recordar los que suelen dar más problemas o que son de uso habitual

  • < se esribe &lt;    (lower than)
  • > se escribe &gt;  (greater than)
  • ” se escribe &quot; (en inglés quotes es comillas)
  • espacio en blanco se escribe &nbsp;  (ver la publicación como escribir espacios en blanco)
  • ® se escribe &reg;
  • © se escribe &copy;
  • € se escribe &euro;

Luego tenemos la familia de los grave; y de los acute;  Por ejemplo:

  • á se escribe &aacute;
  • à se escribe &agrave;
  • Á se escribe &Aacute;
  • À se escribe &Agrave;

Siguiendo la lógica salen todas las vocales.

Qué hacer si no encuentras tu código html

Puede pasar que busques y rebusques y no encuntres.

Olvida el nombre HTML y pásate al número HTML (que viene a ser la misma lógica). Verás que hay más opciones posibles.

Por ejemplo:

  • ; se escribe &#59;
  • = se escribe &#61;
  • ° se escribe &deg; o &#176

¡Hola!

Querido lector,

Debo admitir que el tema de los caracteres escapados siempre me ha costado de asimilar. Aunque si lo piensas bien tiene mucha lógica.

Por ejemplo el símbolo del € no siempre ha existido.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

LibrosWeb ahora es UniWebSidad
- 56
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Como funcionan los frameset de html. ¡Cuidado que están obsoletos!
- 306
El uso de framesets está completamente desaconsejado. Son etiquetas obsoletas. Sin embargo en esta entrada recuperamos su uso y las repasamos. ¡Nunca se sabe si algún día volverán a ser de utilidad!...
Mapas de imagen en html
- 329
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...
Meta etiquetas en HTML : meta tags
- 564
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
Etiquetas básicas introductoras al html5
- 762
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
Como indicar a Google la modificación y corrección de contenidos mediante html
- 96
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
Factores que afectan al tiempo de carga de una página web
- 307
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Como navegar por el árbol de una página web mediante enlaces html
- 32
Resumen con ejemplos de como acceder de forma relativa y con enlaces a los distintos archivos de un proyecto web dado un html referencia.
Imágenes en html: la etiqueta img
- 420
Hoy en día se nos hace difícil imaginar aquellas primeras páginas web sin imágenes. La etiqueta de html se propuso por primera vez en 1993 por Marc Andreessen. En esta entrada presentamos la etiqueta...
Como hacer espacios en blanco con html
- 196
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de como se debe hacer con HTML.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.