Archivo HTML: guía completa

Descubre cómo funcionan los archivos HTML, explorando sus ventajas y desventajas, y aprende por qué es útil crear archivos HTML.

Más información

VE A LA SECCIÓN:

Archivos HTML: qué son, para qué sirven y cómo crearlos

Los archivos HTML (HyperText Markup Language) son la base de cualquier página web. Se utilizan para estructurar y organizar el contenido que visualizamos en el navegador, desde textos y enlaces hasta imágenes y tablas. Aunque surgieron con los primeros años de la World Wide Web, siguen siendo esenciales en el desarrollo web moderno. En esta guía conocerás qué es un archivo HTML, para qué se usa y cómo abrirlo o editarlo.

style

xl spacing, two up, roc-171591

layout

1 | 2

¿Qué es un archivo HTML?

Un archivo HTML define la estructura de una página web. En esta sección descubrirás qué significa HTML, cómo funciona, su historia y su papel en el desarrollo web actual.

Un archivo HTML (HyperText Markup Language) es un documento de texto que utiliza etiquetas para estructurar el contenido de una página web. Estas etiquetas indican al navegador cómo mostrar cada elemento: texto, imágenes, enlaces, vídeos o tablas.

Los archivos HTML son la base del front-end de cualquier sitio web: el espacio con el que los usuarios interactúan visualmente. Mientras que lenguajes como CSS o JavaScript añaden diseño y funcionalidad, HTML se encarga de la estructura.

¿Para qué se utilizan los archivos HTML?

Los programadores y desarrolladores web utilizan archivos HTML para estructurar y dar forma al contenido de una página web. HTML es el lenguaje que describe la estructura y los elementos visibles a través de la tecnología "front-end" en el desarrollo web, ya que se ocupa de los componentes con los que los usuarios interactúan mientras navegan por un sitio. El "front-end" se diferencia del "back-end", que es el sistema técnico que maneja la lógica interna y la gestión de datos del sitio.

Estructura de un sitio web.

Al igual que una revista o un periódico, una página web tiene un diseño específico, que se logra gracias a los archivos HTML. Básicamente, el HTML actúa como un conjunto de instrucciones para el navegador, proporcionando indicaciones de dónde y cómo mostrar varios elementos de la página. El navegador interpreta estas instrucciones según las etiquetas y organiza el contenido en consecuencia.

Creación elementos de una página.

Para dar forma al diseño de una página web, los desarrolladores crean elementos HTML. Esto implica usar símbolos específicos para "marcar" el contenido, insertando el texto entre etiquetas alfanuméricas. Por ejemplo, para crear un encabezado, se utilizaría una etiqueta como <h1>, y el texto se colocaría entre la etiqueta de apertura y la de cierre. De esta manera, el HTML define tanto la estructura como el estilo de la página.

Descubre las herramientas online gratuitas de Acrobat

Con Acrobat Online, tienes acceso a todo lo que necesitas para optimizar y gestionar tus archivos de manera eficiente, rápida y gratis.

Prueba las herramientas online de Acrobat

background

#F5F5F5

Estructura de un archivo HTML

Etiquetas HTML: HTML utiliza etiquetas para estructurar el contenido de una página web. Las etiquetas HTML son palabras clave o códigos escritos entre corchetes angulares. Cada etiqueta suele tener una etiqueta de apertura <tag> y una etiqueta de cierre </tag>. El contenido entre estas etiquetas define el elemento. Por ejemplo, un párrafo en HTML se escribe así:
Elementos HTML: Un elemento HTML consta de una etiqueta de apertura y una etiqueta de cierre, que determinan el principio y el final del contenido. Los elementos más comunes son <h1> a <h6> para encabezados, <p> para párrafos, <a> para enlaces o hipervínculos, y <img> para imágenes.
Atributos: Las etiquetas HTML pueden tener atributos que brindan información adicional sobre un elemento. Generalmente se colocan dentro de la etiqueta de apertura y constan de un nombre de atributo y un valor, separados por un signo igual. Por ejemplo, la etiqueta <img> puede tener el atributo src para indicar la fuente de la imagen:
Estructura: Un documento HTML tiene una estructura jerárquica. Generalmente comienza con la declaración <!DOCTYPE html>, que indica el tipo de documento. Luego sigue la etiqueta <html>, que engloba todo el contenido de la página. Dentro de esta, encontramos las etiquetas <head> y <body>. La sección <head> o área de encabezado contiene metadatos y referencias, mientras que el cuerpo del documento o <body> alberga el contenido visible de la página. Un ejemplo de estructura HTML básica sería:

Breve historia del archivo HTML

El HTML fue creado en 1992 por Sir Tim Berners-Lee en el CERN (Suiza) para conectar documentos científicos mediante hipervínculos. Con el tiempo, el consorcio W3C lo estandarizó y hoy sigue evolucionando con versiones más potentes como HTML5, compatibles con vídeo, audio e interactividad.

HTML en los primeros navegadores web

Tras desarrollar HTML, Tim Berners-Lee animó a otros investigadores a crear documentos y programas capaces de leer este nuevo formato. Con la llegada de los primeros navegadores, como Mosaic y Netscape Navigator, el lenguaje fue mejorándose para adaptarse a las nuevas formas de navegación y diseño web.

Internet Explorer y la estandarización

Cuando Internet empezó a popularizarse, Microsoft lanzó Internet Explorer, que pronto se convirtió en el navegador más utilizado. El rápido crecimiento de la web impulsó al World Wide Web Consortium (W3C) a estandarizar el HTML, garantizando su compatibilidad entre navegadores y facilitando su evolución.

¿Qué significa HTML?

HTML significa "lenguaje de marcado de hipertexto". El acrónimo HTML se hizo popular entre los investigadores a principios de la década de 1990 como abreviatura del formato. Ha sido ampliamente aceptado como método para crear sitios web desde la década de 2000.

El hipertexto fue una innovación a finales de la década de 1980 que permitía pasar de un archivo a otro en el mismo ordenador mediante un sistema de referencias cruzadas, simplemente presionando una tecla. Esta funcionalidad es la base de la creación de una página web en HTML.
HTML es el lenguaje de programación básico de un sitio web: mientras que el marcado ayuda a indicar la forma en que se organiza la información en la página, los símbolos se utilizan para enmarcar y posicionar los diferentes elementos de la página.

El gráfico muestra la pantalla en la que puede verse el código HTML.

Estructura característica del código HTML en la pantalla del ordenador.

style

xl spacing

Ventajas y limitaciones de los archivos HTML

Como ocurre con muchas tecnologías, trabajar con archivos HTML tiene ventajas y desventajas. Te mostramos cuáles son en los siguientes apartados.

Ventajas de los archivos HTML

HTML es fácil de aprender: si quieres probar la programación o el desarrollo web, HTML es el lenguaje web más sencillo porque puedes editarlo o crearlo directamente.
HTML se actualiza constantemente: HTML es un estándar abierto, lo que significa que puedes acceder y utilizar HTML de forma gratuita mientras los expertos lo actualizan y mejoran continuamente.
HTML es compatible con muchos navegadores: casi todos los navegadores web y la mayoría de los sistemas operativos admiten HTML. Entonces, cuando escribes páginas en HTML, generalmente puedes estar seguro de que son compatibles con los principales navegadores, independientemente de cómo los usuarios accedan a Internet.
HTML se puede integrar sin problemas: HTML se puede combinar fácilmente con otros lenguajes de marcado. Por ejemplo, HTML se puede fusionar con código escrito en CSS, otro lenguaje de interfaz de usuario.

Limitaciones de los archivos HTML

HTML no es dinámico: las páginas web actuales son dinámicas: se desplazan y cambian su orientación para adaptarse a diferentes tamaños de pantalla. Estos requisitos van más allá de las funciones básicas de HTML. Para que un sitio web funcione dinámicamente, necesitas otro lenguaje como CSS.
HTML se muestra de manera diferente: dependiendo del navegador con el que accedas a un sitio web, una página HTML se puede mostrar de manera diferente. Por ejemplo, el diseño de la página HTML de Google Chrome puede diferir del de Firefox.
HTML requiere mucho tiempo: crear páginas HTML puede resultar muy laborioso; Normalmente, incluso la página web más sencilla requiere grandes cantidades de código. Hoy en día existen formas más rápidas de crear páginas web.

Abrir un archivo HTML en cualquier dispositivo

Existen dos formas principales de abrir un archivo HTML: En un editor de texto, para ver o modificar el código fuente. En un navegador web, para visualizar la página tal y como la verían los usuarios. A continuación, te explicamos cómo abrir, crear y editar un archivo HTML paso a paso, tanto en Windows como en Mac.

Abrir un archivo HTML en TextEdit para Mac

Si estás utilizando un Mac, puedes abrir el archivo HTML en la aplicación TextEdit.

Abre TextEdit desde el Finder o Spotlight.
Ve a Archivo > Abrir.
Selecciona el archivo HTML que quieras ver.

Si quieres ver el código y no el texto con formato, activa la opción “Mostrar archivos HTML como código HTML en lugar de texto con formato”.

Ver un archivo HTML en un navegador

También puedes ver un archivo HTML directamente en un navegador como Google Chrome, Microsoft Edge o Mozilla Firefox:

Localiza el archivo .html en tu ordenador.
Haz clic con el botón derecho sobre él.
Selecciona Abrir con y elige el navegador que prefieras.

El navegador interpretará las etiquetas HTML y mostrará la página tal como se vería online..

Cómo crear y editar un archivo HTML

Puedes crear un archivo HTML con cualquier editor de texto, ya sea un programa básico o un entorno de desarrollo más avanzado. Los ejemplos más comunes son Bloc de notas en Windows y TextEdit en Mac.

Crea un archivo HTML en Windows

Abre el Bloc de notas.
Escribe tu código HTML.
Ve a Archivo > Guardar como…
Asigna un nombre con la extensión .html

Cambia la codificación a UTF-8 para garantizar la compatibilidad. A continuación, podrás abrir el archivo guardado en tu navegador para ver el resultado.

Crea un archivo HTML en Mac

Abre TextEdit.
Selecciona Archivo > Nuevo y, a continuación, ve a Formato > Crear texto sin formato.
Escribe tu código HTML.
Guarda el archivo con la extensión .html desde Archivo > Guardar.

Una vez guardado, podrás abrirlo o editarlo siempre que lo necesites.

Otros tipos de archivos HTML.

HTM: HTML y HTM son intercambiables. La extensión .HTM se utiliza como alternativa para algunos sistemas operativos, como Windows, que solo requieren extensiones de 3 caracteres.
XHTML: es una versión de HTML que requiere un marcado más preciso y un mejor manejo de errores para garantizar que pueda funcionar con archivos XML

¿Cómo puedo convertir archivos HTML a PDF?

Con Acrobat Pro puedes convertir una página web en formato HTML a PDF. Con las herramientas PDF de Adobe Acrobat puedes convertir un archivo HTML o un sitio web completo a PDF directamente en el navegador. Esto te facilita compartir archivos HTML con colegas manteniendo el formato y la funcionalidad originales. Normalmente necesitarás Acrobat Pro para esto. Una vez creado su PDF, puedes cargarlo en nuestras herramientas online para combinar archivos, organizar páginas, dividir PDFs y más.

Captura de pantalla: Convertir una página web en formato HTML a PDF en Acrobat Pro.

Con Acrobat Pro puedes convertir una página web en formato HTML a PDF.

Tipos de archivos similares a HTML.

Archivos DAT: Los archivos DAT proporcionan información sobre el programa que se utilizó para crearlos.
Archivos JS: JS es la abreviatura de JavaScript, uno de los lenguajes más utilizados para programar backends de sitios web.
Archivos XPS: Microsoft desarrolló el archivo XPS para capturar información de diseño de página para imprimir.
Archivos TXT: la extensión .txt se utiliza para crear archivos de texto simples en programas de texto como el Bloc de notas.