HTML
Cómo declarar idioma, dirección del texto y codificación en HTML para que navegadores, lectores de pantalla y buscadores interpreten correctamente el contenido.
Para interpretar texto correctamente, el navegador necesita conocer cómo convertir bytes en caracteres, cuál es el idioma y qué dirección de escritura utiliza el contenido.
<html lang="es-CO">
<head>
<meta charset="utf-8">
</head>El servidor envía bytes. Una codificación define qué carácter representa cada secuencia.
Una codificación incorrecta produce texto corrupto como Nicolás.
<meta charset="utf-8">UTF-8 representa Unicode y es la opción estándar para la web moderna.
Decláralo también en HTTP:
Content-Type: text/html; charset=utf-8El header tiene prioridad sobre meta.
Debe aparecer temprano en head para evitar que el navegador interprete bytes con una codificación equivocada y reinicie parsing.
<html lang="es">Ayuda a pronunciación, spellcheck, traducción, tipografía e indexación.
<html lang="es-CO">
<p lang="en-US">Full-stack developer</p>
<p lang="pt-BR">Desenvolvedor</p>Usa códigos válidos. No inventes valores como lang="spanish".
<p>
El principio de
<span lang="en">progressive enhancement</span>
mantiene una base funcional.
</p>Marca cambios cuando afectan pronunciación o procesamiento.
<p dir="rtl" lang="ar">...</p>ltr: izquierda a derecha.rtl: derecha a izquierda.auto: determina dirección desde el contenido.<p dir="auto">Contenido escrito por el usuario</p>Evita asumir dirección cuando puede llegar en idiomas distintos.
<p>
Usuario: <bdi>إبراهيم</bdi> — 3 mensajes
</p>Aísla la dirección del fragmento para que no altere el texto alrededor.
<bdo dir="rtl">Texto invertido deliberadamente</bdo>Sobrescribe el algoritmo bidireccional. Es una herramienta especializada.
Para dirección del contenido, prefiere dir. CSS controla presentación adicional.
text-align: right no cambia el orden lógico ni reemplaza RTL.
Dos strings visualmente iguales pueden tener secuencias diferentes, por ejemplo un carácter precompuesto o letra + acento combinante.
HTML no normaliza datos de negocio. Búsqueda, IDs y validación pueden necesitar normalización en otra capa.
Marcas direccionales y zero-width characters pueden afectar texto sin verse. No copies contenido desconocido a IDs o lógica sin inspección.
Un emoji visible puede contener varios code points. HTML lo representa; la manipulación pertenece a JavaScript y fuentes.
Mantén todo el sistema en UTF-8. Mezclar codificaciones de formulario, servidor y almacenamiento produce errores difíciles de rastrear.
<article>
<h2>Arquitectura del sistema</h2>
<p>
Aplica el patrón
<span lang="en">dependency inversion</span>
para desacoplar infraestructura.
</p>
</article>¿Por qué text-align: right no reemplaza dir="rtl"?
Porque text-align solo cambia posición visual. Dir afecta el algoritmo bidireccional, orden lógico y puntuación.
Head y metadata del documento organiza información no visible y recursos.