¿Cómo se indica el idioma principal de la página y de partes de ella?
Aprende a usar el atributo lang en HTML para declarar el idioma de tu página () y de fragmentos específicos, mejorando accesibilidad y SEO.
Indicar el idioma del contenido en tus páginas HTML es una práctica esencial para la accesibilidad, la correcta interpretación por parte de los navegadores y los motores de búsqueda, y para una mejor experiencia de usuario en general. Esto se logra principalmente mediante el uso del atributo global lang.
¿Por qué es importante declarar el idioma?
Declarar el idioma de tu contenido tiene varios beneficios clave:
- Accesibilidad (a11y): Es fundamental para las tecnologías de asistencia. Por ejemplo, los lectores de pantalla utilizan la información del idioma para cargar el motor de voz adecuado y aplicar las reglas de pronunciación correctas. Un texto en francés leído con una voz configurada para español sonará incorrecto y será difícil de entender.
- Motores de Búsqueda (SEO): Ayuda a los motores de búsqueda como Google a entender el idioma de tu contenido, lo que les permite indexarlo de manera más efectiva y mostrarlo a la audiencia correcta en los resultados de búsqueda geolocalizados o filtrados por idioma.
- Navegadores: Los navegadores pueden utilizar esta información para:
- Ofrecer la opción de traducir la página de forma más precisa.
- Seleccionar las reglas de corrección ortográfica y gramatical adecuadas si el contenido es editable.
- Aplicar reglas tipográficas específicas del idioma, como el tipo de comillas o la separación silábica (hyphenation).
- Decidir qué diccionario usar para la función de búsqueda en página.
- Estilización con CSS: Puedes utilizar el pseudoselector
:lang()en CSS para aplicar estilos específicos al contenido según su idioma (por ejemplo,p:lang(fr) { font-style: italic; }).
¿Cómo se declara el idioma principal de la página?
La declaración de idioma más importante es la que se aplica a todo el documento HTML. Esto se hace añadiendo el atributo lang al elemento raíz <html>.
Ejemplo:
<!DOCTYPE <strong>html</strong>>
<html lang="es"> <head>
<meta charset="UTF-8">
<title>Mi Página Web en Español</title>
</head>
<body>
<h1>Título Principal</h1>
<p>Todo el contenido dentro de esta página se considera en español por defecto.</p>
</body>
</html>
Lenguaje del código: PHP (php)El valor del atributo lang debe ser un código de idioma IETF (BCP 47) válido.
Los más comunes son códigos de dos letras (ISO 639-1) como es (español), en (inglés), fr (francés), de (alemán), etc.
También puedes usar códigos más específicos con subetiquetas de región, como es-ES (español de España), es-MX (español de México), en-US (inglés de Estados Unidos) o en-GB (inglés del Reino Unido), si necesitas diferenciar una variante regional específica.
Generalmente, se recomienda usar el código de idioma principal (es, en) a menos que haya una razón fuerte para la especificidad regional.
¿Cómo se declara el idioma de partes específicas de la página?
Si una sección de tu página contiene texto en un idioma diferente al idioma principal declarado en la etiqueta <html>, debes indicar este cambio utilizando el atributo lang en el elemento HTML que envuelve ese fragmento de texto. Esto puede ser un <span>, <p>, <div>, <blockquote>, <em>, etc.
Ejemplo:
<html lang="es">
<head>
<title>Un Artículo Bilingüe</title>
</head>
<body>
<p>Este es un párrafo en español. A continuación, citaremos una frase en inglés.</p>
<blockquote lang="en"> <p>The quick brown fox jumps over the lazy dog.</p>
</blockquote>
<p>La palabra francesa <em lang="fr">"déjà vu"</em> es muy conocida.</p> <p>El resto del contenido sigue en español.</p>
</body>
</html>
Lenguaje del código: PHP (php)En este ejemplo, un lector de pantalla sabría cambiar a la pronunciación inglesa para la cita y a la francesa para la palabra «déjà vu», mejorando significativamente la comprensión para el usuario.
Declarar el idioma correctamente es un paso sencillo pero muy poderoso para hacer tu web más global, accesible y profesional. No traduce el contenido, simplemente informa al software sobre el idioma en el que ya está escrito.
