¿Qué es un archivo HTML y cómo se abre?

Q: ¿Puedo abrir un archivo HTML en el iPhone?

A medias. Guardándolo en la app Archivos puedes usar Compartir y elegir un navegador, y a veces se ve; la vista previa de Archivos, en cambio, suele enseñar el texto sin formato. Si el archivo lleva imágenes o scripts en archivos aparte, en el móvil casi nunca cargan. Cuando lo tiene que abrir otra persona desde el teléfono, mandar un enlace en lugar del archivo evita todo esto: el navegador ya está instalado.

Q: ¿Cómo creo un archivo HTML desde cero?

Abre el Bloc de notas, escribe el contenido y guarda con Guardar como, poniendo el nombre entre comillas y con la extensión —"pagina.html"— para que Windows no le añada .txt por detrás. Un documento mínimo necesita la declaración doctype html y las etiquetas html, head (con el title) y body, que es donde va el contenido. Al hacer doble clic ya se abre como página. Si prefieres ver el resultado mientras escribes, el recuadro de arriba renderiza lo que pegues al instante.

Un archivo .html es una página web guardada como archivo. Se abre con el navegador, se edita con un editor de texto y no se ve en el móvil — aquí tienes las tres cosas, y un recuadro para verlo ahora mismo.

Lo ves como una página de verdad, con sus estilos y su JavaScript. No se sube nada hasta que tú lo decides.

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Invoice preview</title>
    <style>
      body { font: 15px/1.6 system-ui, sans-serif; margin: 24px; color: #18181b; }
      h1 { font-size: 20px; margin: 0 0 4px; }
      p.meta { color: #71717a; margin: 0 0 20px; }
      table { border-collapse: collapse; width: 100%; }
      th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e4e4e7; }
      th { background: #fafafa; font-size: 13px; text-transform: uppercase; }
      button { margin-top: 18px; padding: 9px 16px; border: 0; border-radius: 8px;
               background: #2563eb; color: #fff; font-size: 14px; cursor: pointer; }
      #total { font-weight: 600; }
    </style>
  </head>
  <body>
    <h1>Studio Meridian — March</h1>
    <p class="meta">Invoice #0142 · due 30 days</p>
    <table>
      <thead>
        <tr><th>Item</th><th>Hours</th><th>Rate</th></tr>
      </thead>
      <tbody>
        <tr><td>Design system audit</td><td>12</td><td>$120</td></tr>
        <tr><td>Component build</td><td>26</td><td>$120</td></tr>
        <tr><td>Handover session</td><td>3</td><td>$120</td></tr>
      </tbody>
    </table>
    <p id="total">Total: —</p>
    <button type="button" id="calc">Work out the total</button>
    <script>
      document.getElementById('calc').addEventListener('click', function () {
        var hours = [12, 26, 3].reduce(function (a, b) { return a + b; }, 0);
        document.getElementById('total').textContent =
          'Total: $' + (hours * 120).toLocaleString() + ' for ' + hours + ' hours';
      });
    </script>
  </body>
</html>

Vista previa

La vista previa ejecuta el CSS y el JavaScript de la propia página, en un marco aislado sin origen propio. Por eso, lo que use localStorage da error aquí y funciona una vez publicado: la página publicada tiene su propio origen, así que su almacenamiento es real.

Un archivo con extensión .html es una página web guardada en tu equipo. Dentro no hay nada más que texto: etiquetas entre < y > que describen qué es un título, qué es un párrafo y dónde va una imagen. El programa que sabe convertir esas etiquetas en una página es el navegador, y por eso el mismo archivo se comporta de dos maneras según con qué lo abras.

Si haces doble clic, Windows o macOS se lo pasan a Chrome, Edge o Safari y ves la página terminada: títulos, colores, botones. Si lo abres con un editor de texto, ves el código. Ninguna de las dos cosas está mal —son las dos caras del mismo archivo—, y casi todas las dudas con .html salen de esperar una cuando toca la otra.

La excepción que sí es un problema de verdad es el móvil. Ni iOS ni Android traen una aplicación asociada a un .html suelto, así que al tocar el adjunto no pasa nada útil: o se descarga y ahí se queda, o se abre como texto plano. El archivo está perfecto; lo que falla es la forma de entregarlo. En el recuadro de arriba puedes pegar el código o abrir el archivo y verlo renderizado sin instalar nada.

Cómo abrirlo en cada sitio

1.
Windows — para verlo: doble clic y se abre en tu navegador. Si se abre con otra cosa, clic derecho → Abrir con → el navegador que uses.
2.
Windows — para editarlo: clic derecho → Abrir con → Bloc de notas. No hagas doble clic esperando editar; eso te da la página, no el código.
3.
Mac: doble clic abre Safari. Para editar, clic derecho → Abrir con → TextEdit, y ojo con una trampa clásica: TextEdit abre en modo texto enriquecido y guarda el HTML como documento con formato. Menú Formato → Convertir en texto sin formato antes de tocar nada.
4.
iPhone y Android: no hay aplicación por defecto para un .html suelto. En iPhone puedes guardarlo en Archivos y usar Compartir → un navegador; en Android depende del gestor de archivos y muchas veces directamente no ofrece con qué abrirlo.
5.
Portátiles del trabajo o del instituto: algunas políticas bloquean la apertura de archivos locales descargados. Ahí no hay ajuste que valga desde tu usuario, y la vía que sí funciona es que la página esté en una dirección web en lugar de en un archivo.
6.
Sin instalar nada: pega el código en el recuadro de esta página, o usa Abrir archivo .html. Se renderiza en tu propio navegador y no se envía a ningún sitio.

Un ejemplo real

Andrés estudia un grado de comercio en Sevilla y tiene que entregar una ficha de producto hecha en HTML. Escribe el archivo en clase, hace doble clic y todo está en su sitio: la foto, la tabla de tallas, el botón que enseña el precio con IVA.

Lo manda por correo al profesor y a dos compañeros del grupo, y empiezan las respuestas. El profesor lo abre desde el móvil y ve un montón de etiquetas. Un compañero lo abre en el portátil del centro, que bloquea los archivos descargados, y no ve nada. El otro lo abre con Word, que le enseña el código en lugar de la ficha. Andrés vuelve a hacer doble clic en su portátil y todo sigue funcionando perfectamente, que es lo que más despista: el archivo no tiene ningún fallo.

En el segundo intento pega el mismo código en esta página, comprueba en la vista previa que el botón del IVA sigue calculando, y publica. Manda un enlace en vez de un adjunto. El profesor lo abre desde el móvil, el compañero desde el portátil bloqueado, y los dos ven exactamente la misma ficha que veía él.

Preguntas sobre archivo html

¿Qué es un archivo .html y para qué sirve?

Es el archivo donde vive el código de una página web. Sirve para que un navegador sepa dibujar esa página: cada etiqueta le dice qué papel cumple cada trozo de texto —la etiqueta h1 marca un título, p un párrafo, a un enlace— y el navegador se encarga del resto. Una web entera no es más que archivos así, alojados en un servidor; el que tienes en el escritorio es exactamente lo mismo, sólo que sin dirección pública.

¿Cómo abro y edito un archivo HTML?

Son dos acciones distintas con dos programas distintos. Para verlo, doble clic: se abre en el navegador. Para editarlo, clic derecho → Abrir con → Bloc de notas en Windows o TextEdit en Mac (pasándolo antes a texto sin formato). Si vas a tocarlo más de una vez, merece la pena un editor de código gratuito como VS Code, que colorea las etiquetas y avisa de las que te dejas sin cerrar. Guarda siempre con la extensión .html, no .txt.

¿Cómo subo un archivo HTML a internet?

No hace falta contratar un hosting ni saber de FTP para una página suelta: pegas el contenido, publicas y obtienes una dirección que puedes enviar. La página funciona igual que en tu equipo, con sus estilos y su JavaScript, y se abre en cualquier móvil. El paso a paso completo, con las opciones que hay, está en subir una página web a internet.

¿Puedo abrir un archivo HTML en el iPhone?

A medias. Guardándolo en la app Archivos puedes usar Compartir y elegir un navegador, y a veces se ve; la vista previa de Archivos, en cambio, suele enseñar el texto sin formato. Si el archivo lleva imágenes o scripts en archivos aparte, en el móvil casi nunca cargan. Cuando lo tiene que abrir otra persona desde el teléfono, mandar un enlace en lugar del archivo evita todo esto: el navegador ya está instalado.

¿Cómo creo un archivo HTML desde cero?

Abre el Bloc de notas, escribe el contenido y guarda con Guardar como, poniendo el nombre entre comillas y con la extensión —"pagina.html"— para que Windows no le añada .txt por detrás. Un documento mínimo necesita la declaración doctype html y las etiquetas html, head (con el title) y body, que es donde va el contenido. Al hacer doble clic ya se abre como página. Si prefieres ver el resultado mientras escribes, el recuadro de arriba renderiza lo que pegues al instante.

Conserva tus enlaces para siempre

Las páginas públicas gratuitas duran inicialmente 7 días y las privadas, 3 días. Los planes de pago permiten enlaces permanentes; durante la prueba se aplican otras reglas de caducidad.

Ver precios