Mostrar el código HTML de un sitio web parece trivial: clic derecho, “Mostrar código fuente”, listo. La realidad es más matizada desde que la mayoría de los sitios se basan en frameworks de JavaScript como React o Vue. El código fuente bruto enviado por el servidor ya no corresponde necesariamente al contenido visible en el navegador. Saber qué método utilizar y en qué contexto marca toda la diferencia entre una inspección útil y una lectura vacía.
Mostrar el código fuente o inspeccionar el DOM: lo que muestra cada método
Los navegadores ofrecen dos caminos para acceder al código de una página. No devuelven la misma información, y confundir ambos falsea cualquier análisis.
| Criterio | Mostrar código fuente (Ctrl+U) | Inspeccionar elemento (F12 / DevTools) |
|---|---|---|
| Contenido mostrado | Respuesta HTML bruto enviada por el servidor | DOM activo después de la ejecución del CSS y JavaScript |
| Refleja el renderizado visual | No, en los sitios JS modernos | Sí, en tiempo real |
| Modificación local posible | No | Sí (temporal, del lado del navegador) |
| Útil para la auditoría SEO técnica | Sí (visión “crawler”) | Sí (visión “usuario”) |
| Atajo de teclado (Chrome, Firefox) | Ctrl+U (Windows) / Cmd+Option+U (Mac) | F12 o Ctrl+Shift+I |
“Mostrar código fuente” muestra lo que el servidor envía, no lo que el visitante ve. En un sitio construido con un framework de JavaScript, este código fuente puede limitarse a una etiqueta <div id="root"> vacía seguida de un archivo JS voluminoso. El texto, las imágenes y la estructura de navegación solo aparecen después de que el navegador ejecuta el script.
Las DevTools, accesibles a través de F12, muestran el DOM tal como lo ha construido el navegador. Es esta versión la que corresponde al renderizado real. Cuando el objetivo es verificar una etiqueta title, un atributo alt o un enlace canónico, es necesario saber cuál de las dos vistas consultar, dependiendo de si se busca el dato bruto o el resultado interpretado.
Una guía completa para encontrar el código html de un sitio web detalla estos dos enfoques con casos concretos por navegador.
Sitios en JavaScript: por qué el código fuente bruto a menudo está vacío
Los frameworks front-end (React, Vue, Angular) generan el contenido directamente en el navegador del visitante. El servidor se limita a enviar una concha HTML mínima y un bundle de JavaScript. El HTML inicial no contiene texto ni etiquetas semánticas aprovechables.
Esta arquitectura plantea un problema concreto para cualquiera que inspeccione el código con fines de auditoría o aprendizaje. Con Ctrl+U, se obtiene una página casi vacía. Solo las DevTools (pestaña “Elements” en Chrome, “Inspector” en Firefox) muestran el DOM completo después del renderizado.
Probar la página como un robot de indexación
Para ver lo que un crawler que no ejecuta JavaScript percibe, la buena práctica consiste en desactivar JavaScript en las DevTools antes de recargar la página. En Chrome, esto se hace a través de la configuración de la pestaña “Sources” o abriendo la paleta de comandos (Ctrl+Shift+P) y luego escribiendo “Disable JavaScript”.
Si la página se vuelve blanca o solo muestra el esqueleto, el sitio depende completamente del renderizado del lado del cliente. Los robots que no renderizan el JS no ven ningún contenido indexable. Esta prueba rápida evita sacar conclusiones erróneas a partir del único código fuente bruto.
Atajos de teclado por navegador para acceder al código HTML
El método varía ligeramente de un navegador a otro. Aquí están los atajos más directos:
- Chrome y Edge (Windows/Linux): Ctrl+U para el código fuente, F12 para las DevTools. En Mac: Cmd+Option+U y Cmd+Option+I respectivamente.
- Firefox: misma lógica con Ctrl+U y F12. El inspector de Firefox muestra además un panel “Reglas” que detalla los estilos CSS aplicados a cada elemento.
- Safari (solo Mac): el menú Desarrollador debe activarse manualmente en las preferencias avanzadas. Luego, Cmd+Option+U abre el código fuente y Cmd+Option+I abre el inspector web.
En móvil (Android), Chrome permite acceder al código fuente escribiendo view-source: seguido de la URL en la barra de direcciones. En iOS, Safari no ofrece un equivalente nativo simple; aplicaciones de terceros o marcadores JavaScript (bookmarklets) cubren esta falta.
Buscar una etiqueta precisa en el código fuente HTML
Mostrar el código completo de una página solo tiene sentido si se sabe qué buscar. La función de búsqueda textual (Ctrl+F en el código fuente o en la pestaña Elements de las DevTools) permite localizar una etiqueta específica en cuestión de segundos.
Verificaciones comunes en auditoría SEO
La etiqueta title y la meta descripción se encuentran en el <head> del código fuente. Al escribir “title” o “meta name” en la barra de búsqueda, se aíslan inmediatamente estos elementos. Su presencia en el código fuente bruto (Ctrl+U) confirma que son accesibles para los motores de búsqueda sin ejecución de JavaScript.
Para las etiquetas de estructura (h1, h2, h3), la búsqueda en las DevTools es más fiable, ya que refleja el DOM real. Un sitio JavaScript puede inyectar sus títulos dinámicamente: estarán ausentes del código fuente pero presentes en el inspector.
- Etiqueta canónica: buscar
rel="canonical"en el <head> para verificar la URL de referencia declarada. - Atributos alt de las imágenes: buscar
alt=en el código para localizar las imágenes sin descripción textual. - Datos estructurados: buscar
application/ld+jsonpara localizar los scripts de marcado schema.org.
Marco jurídico en Francia: consultar el código, sí, pero no copiar todo
Consultar el código HTML de un sitio es lícito. El navegador descarga este código para mostrar la página, y el usuario solo lee lo que ya se le transmite. Aspirar o copiar sistemáticamente el código o los datos que contiene pertenece a otro régimen.
En derecho francés y europeo, varias protecciones enmarcan la copia: el derecho de autor sobre el código original y los contenidos, el derecho sui generis sobre las bases de datos, y el RGPD cuando están en juego datos personales. Mirar el código de un competidor para entender su estructura de etiquetas es una práctica común y legítima. Extraer metódicamente su contenido o reproducir su arquitectura para duplicarla expone a acciones legales.
La frontera es clara: la inspección manual de una página sigue siendo un gesto técnico banal. La aspiración automatizada y la reutilización del código o los datos requieren un análisis jurídico previo.