Lenguaje HTML: todo lo que debes conocer

Por Felipe

Publicado en: 29 junio, 2021

El lenguaje HTML (HyperText Markup Language) es el lenguaje de marcado que define la estructura y el contenido de cualquier página web: textos, imágenes, listas y enlaces. Funciona junto a CSS y JavaScript, lo interpretan los navegadores y constituye la base sobre la que se construye y se publica tu web en un servidor de alojamiento.

Qué es el lenguaje HTML

HTML son las siglas de HyperText Markup Language, es decir, lenguaje de marcado de hipertexto. Se trata de un lenguaje de diseño web basado en el uso de etiquetas con las que se define la estructura, el texto y todos los elementos que componen una página: imágenes, listas, enlaces, tablas o formularios. No es un lenguaje de programación en sentido estricto, sino un lenguaje de marcado: no contiene lógica ni operaciones, sino que describe cómo se organiza la información para que el navegador la represente correctamente.

El término «marcado de hipertexto» hace referencia al uso de enlaces que conectan unas páginas con otras, tanto dentro del propio sitio (enlazado interno) como hacia recursos externos como otras webs, tiendas online o blogs. Esa capacidad de enlazar documentos es, precisamente, lo que dio origen a la web tal y como la conocemos. En la práctica, el HTML rara vez trabaja solo: se combina con CSS para personalizar el aspecto visual y con JavaScript para añadir funcionalidad e interactividad, formando el trío fundamental del desarrollo web front-end.

Breve historia del HTML

La primera versión del HTML vio la luz en 1991 con tan solo 18 etiquetas. Desde entonces, el lenguaje ha progresado de forma espectacular hasta convertirse en el estándar universal del diseño web. Cada revisión añadió nuevas posibilidades: soporte para tablas, formularios, elementos multimedia y, sobre todo, una mejor separación entre la estructura (HTML) y la presentación (CSS).

El gran salto llegó con HTML5, publicado en 2014, que introdujo etiquetas semánticas, soporte nativo para audio y vídeo sin complementos externos, y un conjunto de APIs que permiten crear aplicaciones web modernas directamente en el navegador. Hoy, dominar HTML sigue siendo una prioridad para cualquier desarrollador front-end y un conocimiento muy útil para quien gestiona su propia web.

Cómo funciona el HTML

El código HTML de una página se guarda en archivos con extensión .html o .htm. Lo habitual es situar en la raíz del espacio de almacenamiento del sitio un archivo index.html, ya que es el documento que los navegadores solicitan por defecto cuando realizan una petición de acceso al servidor web. Cuando un visitante escribe tu dominio, el servidor entrega ese archivo y el navegador lo interpreta para mostrar la página.

Cada documento HTML está compuesto por un conjunto de etiquetas. La mayoría utiliza una apertura y un cierre, entre las cuales se incluye el contenido y las propiedades que se quieren mostrar, siguiendo el esquema <etiqueta>contenido</etiqueta>. Algunas etiquetas, como las de imagen o el salto de línea, son de cierre automático y no necesitan una etiqueta de cierre independiente.

Para que esos archivos sean accesibles desde cualquier navegador del mundo necesitan estar publicados en un servidor conectado a internet. Aquí es donde entra en juego el alojamiento: contratar un alojamiento web con discos NVMe y tecnología LiteSpeed permite que tus archivos HTML se sirvan con rapidez a los visitantes. En HostingPlus, además, el certificado SSL y la migración están incluidos, de modo que tu web se entrega mediante HTTPS desde el primer momento.

Características principales del HTML

El HTML destaca por una serie de características que explican su éxito y su longevidad como estándar de la web:

No distingue entre mayúsculas y minúsculas. Las etiquetas pueden escribirse indistintamente de una u otra forma; por ejemplo, <body> equivale a <BODY>. Aun así, por convención y legibilidad se recomienda escribirlas en minúscula.
Es dinámico y fácil de actualizar. El proceso para cambiar y actualizar una página desarrollada en HTML es rápido y ágil, lo que facilita el mantenimiento del sitio a lo largo del tiempo.
Es fácilmente editable. Basta con un simple editor de texto para crear y modificar código HTML, sin necesidad de programas especializados ni licencias.
Es multiplataforma y accesible. Una misma página puede mostrarse en ordenadores, tabletas y móviles, ya que cualquier navegador es capaz de interpretar el código.

Tipos de etiquetas que se utilizan en HTML

Podemos dividir en tres grandes grupos las etiquetas que se emplean para diseñar una página web.

Etiquetas de bloque

Son las que definen la estructura general del documento y deben estar presentes en todos los archivos HTML:

<html>: dentro de esta etiqueta se encierra todo el código HTML de la página.
<head>: incluye la información principal del documento, como el título, las etiquetas meta o los scripts que utiliza la página.
<body>: contiene el código HTML que encierra todo el contenido visible de la página, como textos, imágenes o enlaces.

Etiquetas de texto y enlaces

Dan formato al contenido y permiten navegar entre páginas. Entre las más utilizadas están los párrafos (<p>), los encabezados (de <h1> a <h6>) y, sobre todo, el enlace o hipervínculo. Un ejemplo de uso del enlace sería <a href="direccion">Texto del enlace</a>, donde el atributo href indica el destino al que apunta.

Etiquetas semánticas

Con la actualización a HTML5 en 2014 se introdujo una serie de etiquetas semánticas para estructurar la página con sus secciones habituales, como <article>, <header> o <footer>. Estas etiquetas describen el significado del contenido que contienen, lo que ayuda a los navegadores y a los motores de búsqueda a entender mejor la página. Combinadas con hojas de estilo en cascada (CSS), permiten diseñar una web con una estructura moderna y ordenada de forma rápida y sencilla.

HTML, SEO y rendimiento de tu web

Un HTML bien estructurado no solo facilita el mantenimiento: también influye en el posicionamiento. Un marcado semántico claro, con encabezados jerarquizados y etiquetas descriptivas, ayuda a los buscadores a interpretar el contenido de cada página. A ello se suma la velocidad de carga, un factor que depende tanto de un código limpio como de la calidad del servidor donde se aloja la web. Por eso conviene acompañar un buen HTML de un alojamiento con recursos suficientes y tecnología de servidor optimizada, especialmente cuando el proyecto empieza a recibir visitas de forma constante.

Preguntas frecuentes

¿HTML es un lenguaje de programación?

En sentido estricto, no. El HTML es un lenguaje de marcado: describe la estructura y el contenido de una página, pero no incluye lógica ni operaciones propias de un lenguaje de programación. Para añadir funcionalidad se combina con JavaScript y, para la presentación visual, con CSS.

¿Necesito saber HTML para tener una página web?

No es imprescindible. Gestores de contenidos como WordPress y los creadores de páginas web permiten publicar sin escribir código. Aun así, conocer los fundamentos del HTML te da más control para ajustar detalles, corregir errores o personalizar plantillas a tu gusto.

¿Dónde se publican los archivos HTML?

Los archivos HTML deben alojarse en un servidor web conectado a internet para que sean accesibles. Al contratar un plan de alojamiento, subes tus archivos (por ejemplo, el index.html) al espacio del servidor y quedan disponibles a través de tu dominio.

¿Tu web necesita un hosting que vuele?

Hosting en España con soporte real en español, migración gratis, SSL incluido y 30 días de garantía. Sin líos y sin costes ocultos.

Ver planes de hosting →