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:

Ejercicio sobre creación de capas html mediante etiquetas div
- 100
Ejercicio sobre creación y estructuración de un documento web mediante capas html. Este ejercicio es preparatorio al salto a html5. Incluye solución y anotaciones de clase.
Respuesta a dudas típicas cuando aprendemos html por primera vez
- 100
Cuando aprendes HTML por primera vez se presentan dudas lógicas fruto de nuestra inseguridad. Desafortunadamente en la red, en muchas ocasiones no encontramos las respuestas que necesitamos. En esta ...
Ejercicio estructura web mediante capas con div e id
- 105
¿Como crear y organizar capas html en un documento web? En este ejercicio lo harás de 0. Se incluye propuesta de solución. Es un paso previo a html5.
Ejercicio html sobre códigos HTML y caracteres especiales
- 84
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.
Ejercicio migración de xhtml a html5. Estructura web semántica.
- 89
Ejercicio html5 dónde transformamos un documento web realizado con capas html . Incluye solución.
Etiquetas xmp, pre y code en HTML
- 1110
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Introducción al HTML
- 1039
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
Ejercicio html para practicar con etiquetas de texto más comunes
- 95
Ejercicio html nivel principiante para practicar el uso de las principales etiquetas html de texto. Incluye enunciado y solución.
Ejercicio html sobre tablas. Etiquetas table, tr, td, colspan, rowspan
- 146
Ejercicio nivel básico sobre tablas html. Uso de rowspan y colspan. Incluye solución.
Como indicar a Google la modificación y corrección de contenidos mediante html
- 148
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?
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.