Curso de HTML / Configurar título, descripción, idioma y codificación

El head de un documento HTML contiene información como su título, codificación y descripción. El idioma principal se declara mediante lang en el elemento html. Estos ajustes ayudan a interpretar y describir la página, pero no sustituyen los textos que el lector necesita encontrar dentro de body.

Comparar el título de la pestaña con el de la página

Guarda este documento como index.html en UTF-8 y ábrelo con un navegador:

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Small Garden | Plant Care Guide</title>

  <meta name="description"

        content="Learn about beginner-friendly plants and basic care in the Small Garden guide.">

</head>

<body>

  <h1>Small Garden</h1>

  <p>Start learning how to care for plants.</p>

</body>

</html>

La pestaña muestra el title y la página presenta el encabezado h1. Son elementos distintos, aunque deben describir coherentemente el mismo tema. Cambia solo title, guarda y recarga; después restaura el valor y modifica únicamente h1 para comparar.

La información de head no se muestra toda como texto normal de la página. Las instrucciones que el lector necesita ver deben estar en body. La estructura básica del documento explica esa división. En un sitio con varias páginas, crea títulos que permitan distinguir cada una, no una copia del nombre del sitio para todas.

Declarar idioma y codificación reales

El ejemplo conserva textos en inglés y lang="en". Para una página cuyo contenido principal esté en español, utiliza lang="es". El atributo no traduce el contenido y no debe cambiarse por una palabra aislada en otro idioma. Si un pasaje diferente necesita una indicación propia, puedes asignar lang a ese elemento.

meta charset="utf-8" declara la codificación. El archivo también debe estar guardado realmente en UTF-8. Mantén la declaración cerca del comienzo y comprueba los caracteres acentuados al reabrir el archivo. Una declaración nueva no recupera automáticamente texto que ya se guardó dañado por una decodificación incorrecta.

Escribir description y entender viewport

La descripción debe resumir qué encontrará el lector en esa página concreta. No la conviertas en una lista de palabras clave ni la copies de otra página con una finalidad distinta.

Google puede construir el fragmento de un resultado a partir del contenido y, en algunos casos, de la descripción. Por tanto, el valor escrito no está garantizado como texto literal del resultado; la documentación de fragmentos de Google Search explica su selección.

viewport influye en el ancho de distribución y la escala inicial en dispositivos móviles. Es útil junto con un diseño adaptable, pero no hace que todos los elementos se ajusten por sí solos. No impidas el zoom para disimular texto demasiado pequeño: revisa tamaños, anchuras y distribución.

Comprobar dónde va cada ajuste

lang no es una etiqueta independiente que se coloque dentro de head. La referencia del atributo lang en MDN detalla su ámbito y herencia.

Investigar caracteres incorrectos y revisar la página

Si aparecen caracteres dañados, conserva una copia del archivo antes de volver a guardarlo. Abre el original correcto, revisa su codificación y guarda una versión conocida en UTF-8. Si la copia local se ve bien y la del servidor no, inspecciona la respuesta del documento en Network, especialmente Content-Type y su charset.

Alinea la configuración del servidor con los bytes del archivo. Cambiar únicamente la etiqueta no soluciona una respuesta declarada de otra manera ni repara contenido ya alterado.

Antes de compartir la página, compara título, descripción y contenido. Prueba una pantalla estrecha, zoom y desplazamiento horizontal. Las comprobaciones de accesibilidad ayudan a revisar lectura y operación; el proyecto de varias páginas exige metadatos distintos y coherentes para cada documento.