Las entidades HTML salvaron mi blog de romperse
Un solo símbolo de menor que en una entrada de blog sobre C++ derribó todo el diseño de mi página. Ese fue el día en que aprendí que las entidades HTML no son opcionales — son esenciales.
Recuerdo el momento exacto en que mi blog se rompió. Había escrito un artículo sobre plantillas de C++, y en él usé los símbolos de menor y mayor reales del código — \\x60
Ese fue el día en que aprendí sobre las entidades HTML, y llegué vergonzosamente tarde a la fiesta.
Las entidades HTML son códigos especiales que te permiten mostrar caracteres reservados — aquellos que HTML usa para su propia sintaxis — sin que el navegador intente interpretarlos. Las más importantes son \\x60<\\x60 para el signo de menor que \\x60<\\x60, \\x60>\\x60 para el signo de mayor que \\x60>\\x60, y \\x60&\\x60 para el ampersand \\x60&\\x60 mismo. Estas tres habrían salvado completamente mi artículo de C++.
Pero hay muchas más. Y las uso constantemente ahora.
El espacio de no separación \\x60 \\x60 es el que más uso. Evita que dos palabras se separen entre líneas. Lo uso entre números y sus unidades, entre nombres e iniciales, y en cualquier lugar donde un salto de línea incómodo se vería poco profesional. Es un pequeño ajuste que hace que el texto se sienta pulido.
Los símbolos de copyright y marca registrada — \\x60©\\x60, \\x60®\\x60, \\x60™\\x60 — se ven mucho más limpios que intentar escribir el carácter real, especialmente porque algunas fuentes renderizan esos caracteres de manera inconsistente. Del mismo modo, \\x60—\\x60 para guiones largos y \\x60–\\x60 para guiones cortos son mucho más fiables que escribir guiones y esperar lo mejor. Una vez que empiezas a usar guiones largos reales, los guiones simples empiezan a verse mal.
Las comillas curvas son otra. \\x60“\\x60 y \\x60”\\x60 para comillas dobles, \\x60‘\\x60 y \\x60’\\x60 para comillas simples. Dan a tu texto comillas tipográficas adecuadas en lugar de las marcas rectas hacia arriba y hacia abajo que parecen de una ventana de terminal. Es una diferencia sutil, pero se acumula en todo un artículo.
Las entidades de fracción como \\x60¼\\x60, \\x60½\\x60 y \\x60¾\\x60 son salvavidas para cualquier contenido que trate con medidas o recetas. Y las entidades de flecha — \\x60→\\x60 para flecha derecha, \\x60←\\x60 para flecha izquierda — son excelentes para instrucciones de navegación y listas sin necesidad de imágenes.
Mi flujo de trabajo ahora es simple. Antes de publicar cualquier cosa que pueda contener código, caracteres especiales o puntuación inusual, lo escaneo en busca de cualquier cosa que el navegador pueda malinterpretar. Los símbolos de menor/mayor que se reemplazan con entidades. Los ampersands en las URLs se codifican. Los guiones se mejoran a guiones largos adecuados. Tarda unos dos minutos y me ha salvado exactamente del tipo de desastre que derribó mi artículo de C++.
Hoy en día mantengo una chuleta fijada en mi editor con las treinta o más entidades HTML que uso regularmente. Mi blog no se ha roto por un carácter rebelde desde entonces. Y finalmente terminé ese artículo de C++. Con los símbolos de mayor/menor adecuados, esta vez.