Archivos HTML

¿Qué es un archivo .HTML?

El archivo .html típico será un documento HTML, es decir, el origen que un navegador web interpreta y muestra como una página web. La especificación actual es lo que se denomina WHATWG HTML Living Standard, cuyos fundamentos fueron establecidos por el consorcio World Wide Web. Este documento HTML comprende el contenido, así como la información de formato, como títulos o encabezados, párrafos, formularios, tablas, enlaces o anclas, atributos de datos o metaetiquetas y referencias a archivos CSS, archivos JavaScript, imágenes, fuentes, videos o audio. Los lugares habituales en los que puedes encontrarte con archivos .html incluyen páginas web descargables, archivos de ayuda para varios softwares, documentos generados a partir de distintas documentaciones, sitios estáticos generados, archivos de informes de herramientas, archivos de correo electrónico, así como archivos guardados localmente usando tu navegador web.

Esta extensión histórica .htm básicamente significa lo mismo en el mismo formato exacto, y se usa debido a problemas de compatibilidad con DOS y con la compatibilidad de nombres de archivo 8.3 de Windows. Además, el XHTML más antiguo basado en XML también suele asociarse con el nombre de archivo .html, principalmente si está escrito como plain-old-html; la forma más fiable incluiría comprobaciones de sintaxis y/o de espacio de nombres, ya que el tipo de contenido MIME correcto para documentos XHTML XML estrictos será "application/xhtml+xml". Hay numerosos casos en los que los frameworks web también adoptan la extensión .html para plantillas similares a HTML con el uso de la sintaxis Django {% %}, Jinja {{ }}, Liquid, Handlebars, ERB o Go template en estos archivos. Estos archivos de plantilla no serán HTML final listo para el navegador hasta que se rendericen. Cuando lo ves en tu editor de texto, hay ciertos iniciadores que verás como "<!DOCTYPE HTML>, <html>, <head>or<body>" en un archivo HTML.

Cómo abrir un archivo .HTML

Detalles técnicos

Representa un texto, no un formato binario, y no tiene un único valor exacto para el número mágico. Por ejemplo, los archivos pueden empezar con <!DOCTYPE html>, <html>, una etiqueta de comentario html, una o varias líneas en blanco, BOM UTF-8, marcado antiguo sin doctype, etc.

Los valores comunes del encabezado MIME-type incluyen text/html (y text/html; charset=utf-8, que puede usar el servidor). También se puede establecer manualmente el charset del documento como parte del archivo con <meta charset=utf-8> en el nivel superior de la sección head.

UTF-8 suele usarse como predeterminado para documentos recién creados, mientras que las codificaciones de caracteres en el navegador se deducen mediante varios métodos, incluidos los byte-order marks de los documentos, la información de los encabezados HTTP, <meta charset attribute, los charset predeterminados de transmisión y algoritmos antiguos de detección en el analizador. La estructura típica de un archivo contendría un doctype, un elemento raíz html, head con varios datos y un body. La mayoría de los errores comunes de sintaxis serán corregidos automáticamente por los navegadores, es decir, cierres o anidamientos incorrectos de etiquetas, omisiones, sintaxis errónea, etc.

El formato real no está comprimido; gzip y brotli se usan normalmente con fines de transporte; por lo tanto, cualquier HTML no comprimido en disco sigue siendo un documento textual, mientras que si está ubicado en un archivo como .zip, 7z, el documento no sería visible directamente. Los estilos se cargan usando la etiqueta css link; js se incluye mediante etiquetas script; las fuentes de imágenes se cargan desde las fuentes del elemento img; otros datos multimedia, usando etiquetas audio/video; las web fonts mediante CSS @font-face. La información que se incluye comúnmente se relacionaría con el título del archivo, meta-description y etiquetas open graph, datos de twitter card, la url canónica de un documento, información de viewport, los idiomas usados, así como datos estructurados JSON-LD.

El tamaño típico de un archivo en disco va desde varios kilobytes hasta varios megabytes, generalmente debido a información adicional de CSS/Jscript/SVG incrustado/imagen codificada con Base64; la serialización XHTML usando una extensión .html sigue el formato XML (es decir, usando etiquetas, prefijos xmlns en minúsculas, encabezados xml, etc.). Algunos archivos html incluirían un marcador de posición para el motor de plantillas, por ejemplo, jinja o django.

Cómo convertir archivos .HTML

Usa PDF en los casos en que deba generarse una captura. La generación de capturas en CSS moderno puede lograrse mejor con Chromium/Chrome moderno o en modo sin interfaz (wkhtmltopdf sigue pareciendo bastante práctico aquí). Las opciones de línea de comandos pueden ser, por ejemplo: chromium --headless --disable-gpu --print-to-pdf=output.pdf input.html, y para wkhtmltopdf: wkhtmltopdf input.html output.pdf. El enfoque requiere acceso de la página HTML a las fuentes CSS, imágenes y tipografías. A veces puede requerir que la página se cargue para capturar todos los datos generados por JavaScript por el navegador Chromium.

Usa el formato admitido en DOCX y ODT en el caso de procesadores de texto que requieren editar el archivo de salida. Una forma de convertir es generar documentos de Word con Pandoc: pandoc input.html -o output.docx;Copy otra es generar un archivo ODT con LibreOffice mediante el comando soffice --headless --convert-to odt input.html.Copy Este enfoque admite mejor los niveles de encabezado y su formato, el marcado de listas, las imágenes y sus pies de imagen, las tablas y los enlaces entre diferentes secciones.

Genera archivos en formato Markdown adecuados para READMEs, conversiones de sitios estáticos, documentos de Gitbook y otros textos almacenados en formato plano con el comando pandoc input.html -t gfm -o output.md,Copy y en formato de texto con pandoc input.html -t plain -o output.txt.Copy A diferencia de los formatos PDF y DocX/Odt, no se conserva ningún marcado relacionado con el estilo ni la maquetación o formato de tablas impulsados por scripting o CSS.

Comparte la página web e incluye en HTML el CSS, las fuentes y las imágenes incrustados con el siguiente comando y opción: pandoc input.html --embed-resources --standalone -o output.html.Copy El contenido HTML dinámico debe convertirse en el momento de la generación de la página completa en el navegador. No captura operaciones del lado del servidor, detalles de autenticación de usuario ni sesiones, ni el contenido de las bases de datos de las páginas dinámicas.

Problemas comunes y soluciones

Por otro lado si la misma página .html aparece como "This site can’t be reached" normalmente habrá alguna URL remota o una carpeta de activos lo que significa que hay URLs remotas como https://...Debes restaurar la estructura de carpetas o cambiar los caminos a las imágenes y los scripts dependiendo de la situación. La razón por la cual aparece una página en blanco está relacionada con errores de sintaxis de JavaScript porque de lo contrario los problemas en HTML se mostrarían de otra forma en un sitio web; sin embargo las pestañas de la consola y la red de las herramientas del desarrollador incluyen información adicional sobre el problema del 404 y los errores de sintaxis en JavaScript. En caso de que tu sitio web no muestre estilos en absoluto las razones principales podrían ser caminos incorrectos, una etiqueta base incorrecta e incluso el caché del navegador. Mirando la pestaña de la red si tu navegador solicitó la hoja de estilos y qué tipo MIME se devolvió podría ayudarte a resolver el problema con los estilos. En caso de que recibas no un HTML sino un texto la salida significa que el tipo de respuesta del archivo es text/plain en vez de text/html;deberías cambiarlo a text/html en los encabezados desde el lado del servidor porque podría ser el problema. La aparición de algunos caracteres extraños en el sitio web indica que hay una diferencia entre los sistemas de codificación del servidor y el archivo .html,deberías guardar tu archivo .html en UTF-8 y poner el mismo charset en la etiqueta meta en el head.

También existe una situación donde en vez de obtener un archivo normal con la extensión .html descargas un "download.html". Esto sucede a veces cuando era solo una página de inicio de sesión o una página de error y no un documento HTML esperado;en este caso puedes abrir el archivo "download.html" en un editor de texto para ver qué pasó. Como ya se dijo anteriormente los clientes de correo electrónico, los programas de exportación e instrumentos de informes generan una cantidad muy grande de etiquetas de estilos y muchos otros formatos propietarios que pueden confundir al navegador, por lo que tienes que limpiar tu archivo o exportarlo de nuevo. Si tu .html no se abre en el navegador y el archivo se está abriendo en otro lugar de tu computadora, es porque has configurado otra aplicación predeterminada para abrir esa extensión.

Consideraciones de seguridad

Los documentos HTML tienen la capacidad de ejecutar código JavaScript dentro del documento,recuperar datos remotos, enviar formularios, iniciar descargas así como acceder a las capacidades del navegador permitidas para ese origen del documento con las correspondientes permisos. Los documentos HTML locales normalmente funcionan de acuerdo al protocolo file:// con restricciones pero pueden acceder a rutas absolutas del sistema de archivos,realizar operaciones de red y crear páginas de inicio de sesión falsas. Ten cuidado al cargar un archivo .html sospechoso a través de un navegador ya que los atacantes usan el "HTML Smuggling",el robo de credenciales a través de formularios,scripts ofuscados,URLs de descarga peligrosas. El navegador está limitado en la realización de varias operaciones pero un documento HTML cuidadosamente elaborado puede provocar errores en el motor del navegador,el visor de PDF,los decodificadores multimedia y las extensiones del navegador. Puede almacenar información sensible en comentarios,objetos JSON de documentos HTML, identificadores de Google Analytics y rutas absolutas,URLs de guardado de páginas e incluso imágenes incrustadas. Prueba el documento HTML sospechoso con JavaScript deshabilitado en un perfil de aislamiento o en una máquina virtual.

Historia y versiones

HTML ha sido diseñado desde el propio CERN, ya que Tim Berners-Lee creó la idea de la WWW en ese lugar; los documentos más antiguos estuvieron disponibles alrededor de 1991. El primer documento oficial conocido es HTML 2.0, publicado por IETF en 1995 como RFC 1866. Nos ha proporcionado funciones básicas como formularios y una estructura básica de documentos. HTML 3.2 aparece en un documento de W3C en 1997. HTML 4.0 llegó en 1997 y después HTML 4.01 llegó en 1999, separando la estructura y las presentaciones y recomendando el uso de CSS. En 2000 apareció XHTML 1.0, que convirtió HTML al formato XML con recomendación en W3C Recommendation. HTML5 es recomendado por W3C desde 2014, añadiendo muchas cosas como nuevos elementos para un mejor manejo del contenido semántico, la capacidad de añadir videos y audios de forma nativa en la página web como elementos HTML 5 y el elemento canvas para dibujar en el navegador del cliente y el almacenamiento web sin conexión, entre otras nuevas reglas para analizar una página. Desde 2019, W3C y WHATWG están de acuerdo en usar WHATWG HTML Living Standard como especificación para html, mientras que .html sigue siendo una parte importante del mundo web.

Formatos relacionados

La extensión .htm tiene el mismo significado y funcionalidad que .html. Usa .html cuando sea posible, con la excepción de que las necesidades de compatibilidad pueden requerir el uso de un formato de nombre de archivo DOS de 3 letras o 8.3. Las extensiones .xht y .xhtml se refieren a XHTML y encajan mejor con el software de edición, validación y procesamiento basado en XML (ya que los navegadores son más estrictos cuando XHTML se sirve como XML). La extensión .xml significa un documento estructurado de una manera muy genérica. No hay semántica de página implícita como en los archivos HTML; una hoja de estilo o una transformación debe proporcionar la semántica de página. Los archivos CSS a los que se hace referencia en HTML llevan la extensión .css. El código JavaScript para el comportamiento va en archivos .js. Los formatos MHTML/MHT archivan las páginas con todo el contenido asociado junto en un solo documento; son útiles para archivar en un solo archivo y menos claros para una visualización simple como formato HTML. Las extensiones .md/.markdown indican marcado de texto plano, los archivos .pdf - salida de impresión.