¿Qué es HTML como Formato de Archivo?
HTML (HyperText Markup Language, Lenguaje de Marcado de Hipertexto) es tanto el lenguaje de la web como un formato de archivo de documento. Un archivo .html o .htm es un documento de texto plano con sintaxis de etiquetas similar a XML que los navegadores renderizan en páginas visuales, y que los conversores analizan para extraer contenido, estructura y metadatos.
Aunque la mayoría de personas piensa en HTML como "sitios web", los archivos HTML también se usan como:
- Documentos autónomos — informes de una sola página, libros electrónicos (EPUB es HTML), boletines de correo electrónico
- Formato de conversión intermedio — las herramientas de Word, PDF y Markdown pasan a través de HTML
- Formatos de documentación — Javadoc, Doxygen, Sphinx y mkdocs todos generan HTML
- Salida de aplicaciones — exportación de Jupyter Notebook, páginas de Confluence, informes de datos
Estructura del Documento HTML
Un documento HTML5 moderno bien formado:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descripción de la página para buscadores">
<title>Título del Documento</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<nav aria-label="Navegación principal">
<a href="/">Inicio</a>
</nav>
</header>
<main>
<article>
<h1>Encabezado Principal</h1>
<p>Primer párrafo con texto en <strong>negrita</strong> y <em>cursiva</em>.</p>
</article>
</main>
<footer>
<p>© 2025 Nombre del Autor</p>
</footer>
<script src="app.js" defer></script>
</body>
</html>
La Declaración DOCTYPE
<!DOCTYPE html> no es una etiqueta HTML — es una instrucción de procesamiento que indica a los navegadores que usen el modo estándar. HTML5 tiene un único DOCTYPE.
La Sección <head>
El <head> contiene metadatos del documento — información sobre la página, no contenido mostrado:
| Elemento | Propósito |
|---|---|
<title> |
Título de pestaña del navegador, nombre del marcador, título en resultados de búsqueda |
<meta charset> |
Codificación de caracteres (siempre UTF-8 para documentos modernos) |
<meta name="description"> |
Fragmento del motor de búsqueda |
<meta name="viewport"> |
Escalado del diseño responsivo |
<link rel="stylesheet"> |
Referencia CSS externa |
<meta property="og:*"> |
Metadatos Open Graph (vistas previas en redes sociales) |
Elementos HTML5 Semánticos
HTML5 introdujo elementos semánticos que describen la estructura del contenido:
| Elemento | Significado |
|---|---|
<header> |
Contenido introductorio para una sección o la página |
<nav> |
Enlaces de navegación |
<main> |
Contenido principal de la página (uno por página) |
<article> |
Contenido autónomo e independientemente distribuible |
<section> |
Agrupación temática de contenido |
<aside> |
Contenido tangencial (barra lateral, nota aclaratoria) |
<footer> |
Contenido de cierre para una sección o la página |
<time datetime="2025-03-15"> |
Fecha/hora legible por máquina |
CSS y JavaScript: Inline vs Externo
CSS
<!-- Estilos en línea (peor práctica — no cacheable, no reutilizable) -->
<p style="color: red; font-size: 16px;">Texto rojo</p>
<!-- Hoja de estilos interna (documentos de una página, correo electrónico) -->
<style>
p { color: #333; line-height: 1.6; }
</style>
<!-- Hoja de estilos externa (mejor práctica para sitios web) -->
<link rel="stylesheet" href="estilos.css">
Carga de JavaScript
<!-- Bloqueante (legado — malo para el rendimiento) -->
<script src="app.js"></script>
<!-- Diferido: ejecutar tras el análisis HTML (recomendado) -->
<script src="app.js" defer></script>
<!-- Asíncrono: ejecutar en cuanto se descargue -->
<script src="analytics.js" async></script>
Conversión de Archivos HTML
HTML a PDF
# wkhtmltopdf — renderiza HTML con WebKit, soporte CSS completo
wkhtmltopdf --page-size A4 --margin-top 20mm entrada.html salida.pdf
# Pandoc (más sencillo, menor soporte CSS)
pandoc entrada.html -o salida.pdf
HTML a DOCX
# Pandoc — excelente conversión HTML a DOCX
pandoc entrada.html -o salida.docx
# Con documento de referencia personalizado para estilado
pandoc entrada.html --reference-doc=plantilla.docx -o salida.docx
HTML a Markdown
# Pandoc
pandoc entrada.html -t markdown -o salida.md
# Python: html2text
pip install html2text
python -c "
import html2text
with open('entrada.html') as f:
h = html2text.HTML2Text()
print(h.handle(f.read()))
" > salida.md
BeautifulSoup (Python) para Extracción de Datos
from bs4 import BeautifulSoup
with open('entrada.html', encoding='utf-8') as f:
soup = BeautifulSoup(f, 'html.parser')
# Extraer título
print(soup.title.string)
# Extraer todos los párrafos
for p in soup.find_all('p'):
print(p.get_text())
# Extraer todos los enlaces
for a in soup.find_all('a', href=True):
print(a['href'], a.get_text())
HTML vs Otros Formatos de Documento
| Característica | HTML | DOCX | Markdown | |
|---|---|---|---|---|
| Fuente legible por humanos | Sí (con esfuerzo) | No (XML en ZIP) | No (binario) | Sí (limpio) |
| Visualización en navegador | Nativa | No (necesita plugin) | Sí | No |
| Compatible con control de versiones | Sí (texto) | Difícil | Difícil | Excelente |
| Fidelidad de impresión | Variable | Buena | Perfecta | Variable |
| Indexación en motores de búsqueda | Nativa | Mediante extracción | Mediante extracción | Mediante extracción |
| Accesibilidad | Excelente (ARIA) | Buena | Aceptable | N/A |
| Mejor para | Web, documentos interactivos | Documentos de oficina | Entrega/impresión final | Documentación técnica |
La posición de HTML como sustrato universal de la información digital — cada cliente de correo electrónico, cada visor de documentos, cada lector electrónico y cada aplicación web en última instancia renderiza HTML — lo convierte en lo más parecido a un formato de documento universal que ha producido la informática.
Conversiones relacionadas
Conversiones de documento que siguen este tema: