Las etiquetas esenciales para que HTML funcione como se espera
(blog.jim-nielsen.com)- Para que una página web se muestre en el navegador como se espera, es indispensable incluir algunas etiquetas básicas de HTML
- `` garantiza el renderizado en modo estándar y evita errores en el cálculo del layout
- `` mejora la accesibilidad, la búsqueda y la calidad de la traducción al proporcionar información del idioma
ycontrolan respectivamente la codificación de caracteres y la escala de visualización en móviles- Estas etiquetas no son simples elementos de formato, sino componentes clave para mantener la consistencia de los estándares web y la experiencia de usuario
Estructura básica de HTML y panorama general de las etiquetas esenciales
- El texto está inspirado en la charla de Alex Petros, “Incantations that make HTML work correctly”
- El autor resume el snippet básico que siempre debería incluirse al abrir un archivo HTML directamente en el navegador
- La estructura básica mostrada como ejemplo es la siguiente
- Cada etiqueta ayuda a que el navegador interprete y muestre el HTML de forma estándar
- Si faltan, el navegador puede cambiar a modo no estándar (quirks mode), o bien aparecer problemas como texto corrupto o páginas reducidas en pantallas móviles
`` — Declaración de modo estándar
- `` es la declaración que le indica al navegador que renderice en modo estándar (standards mode)
- Si esta declaración no está presente, el navegador entra en quirks mode y emula comportamientos antiguos de HTML no estándar
- Como resultado, cambian los cálculos de layout, tamaño y alineación, y pueden aparecer errores de visualización inesperados
no distingue entre mayúsculas y minúsculas, así que reconoce formas comoo ``- El autor bromea diciendo que “si quieres escribir markup al estilo de 1998, puedes ponerlo en mayúsculas”
`` — Especificar el idioma del documento
- `` es la etiqueta que define el idioma base del documento
- Esta información la aprovechan navegadores, motores de búsqueda, lectores de pantalla y otras herramientas
- Ejemplos de uso principales
- Los lectores de pantalla eligen la pronunciación y el tono de voz correctos
- Los motores de búsqueda mejoran la indexación y la precisión de las traducciones
- Se aplican funciones basadas en la configuración regional, como la corrección ortográfica
- Aunque omitir el atributo de idioma no parezca causar problemas visibles en pantalla, las herramientas alrededor del documento pueden procesarlo mal
- Por eso conviene incluirlo explícitamente dentro del HTML
- La información de idioma también puede enviarse en los encabezados de respuesta del servidor, pero al abrir archivos locales directamente, es más seguro declararlo dentro del HTML
- Código de ejemplo
return new Response( "Hello world
- Código de ejemplo
", { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); ```
`` — Especificar la codificación de caracteres
- `` permite que el navegador reconozca la codificación de caracteres del documento
- Gracias a eso, caracteres no ASCII como é, ü, ñ, ©, ™, ®, …, 👍 se muestran correctamente
- Si esta etiqueta falta, los caracteres especiales o las comillas tipográficas pueden verse corruptos
- El autor menciona como ejemplo un caso en su blog donde se rompían las “comillas tipográficas (smart quotes)”
- Comparación de ejemplo
- Sin ``: los caracteres especiales y los emojis se rompen
- Con la etiqueta incluida: todos los caracteres se muestran normalmente
- En el blog se adjunta una captura de pantalla comparando ambos casos
`` — Configuración del viewport móvil
- Esta etiqueta controla la proporción de pantalla y el nivel de zoom en navegadores móviles
- Si falta, la página puede verse reducida y demasiado pequeña en dispositivos móviles
- El autor cuenta un caso en el que “en desktop se veía bien, pero al abrirlo en móvil todo se veía pequeño”, como ejemplo de haber olvidado la etiqueta meta viewport
- Explica visualmente la diferencia con capturas comparativas: a la izquierda sin la etiqueta y a la derecha con ella
- Por eso, incluso en un prototipo simple, conviene incluirla para mantener la proporción de layout esperada
Cierre — Lo verdaderamente básico de HTML
- Al final, el autor bromea diciendo que “olvidó el snippet más importante”
- Como ejemplo, muestra el siguiente código
- Como ejemplo, muestra el siguiente código
- Es una referencia satírica a la estructura de apps basada en JavaScript que se usa con frecuencia en el desarrollo web moderno
- En conjunto, el texto subraya que las etiquetas básicas de HTML son elementos clave para garantizar un comportamiento conforme a los estándares web
3 comentarios
Si son esenciales, ¿por qué no funcionan por defecto? En fin, la web sí que es extraña. Tiene una forma de pensar bastante peculiar.
¿No será por la compatibilidad con versiones anteriores? Si simplemente cambian el comportamiento predeterminado, podrían romper cosas que antes funcionaban bien.
Opiniones en Hacker News
document.compatModeen las herramientas de desarrollador Yo uso un userscript para copiar fácilmente el texto del elemento sobre el que paso el mouse, pero en Quirks Mode funciona de manera inestable Se puede forzar condocument.write("" + document.documentElement.innerHTML), pero eso reinicia todo el documento y causa problemas Me pregunto si, del lado del usuario, hay una forma más limpia de forzar Standards Modedanghiciera algunas mejoras de usabilidad en HN El tamaño de fuente predeterminado ronda los 12px, así que se ve demasiado pequeño en la mayoría de los dispositivos modernos Además, parece que el CSS sigue siendo prácticamente el código antiguo publicado hace unos 13 años