≡En resumen
- HTML describe qué es cada parte de una página; CSS decide cómo se ve y JavaScript añade comportamiento.
- Se escribe con etiquetas que forman elementos, y los atributos añaden información a esos elementos.
- Nació en el CERN con Tim Berners-Lee y pasó por HTML 2.0, 3.2, 4.01, XHTML y HTML5.
- Desde 2019 existe una sola versión oficial: el HTML Living Standard del WHATWG, sin números de versión.
- Un HTML semántico y válido mejora la accesibilidad y ayuda a los buscadores a entender la página.
01 ¿Qué es HTML?
«Hipertexto» significa texto con enlaces a otros textos, que es la idea que dio origen a la web. «Marcado» significa que el lenguaje no calcula ni decide nada: anota el contenido. Cada anotación es una de las etiquetas HTML, y el conjunto de etiquetas de una página forma un documento que el navegador convierte en un árbol de objetos, el DOM, al que luego acceden los estilos y los scripts.
02 ¿HTML es un lenguaje de programación?
No. Es una confusión muy extendida, pero HTML no tiene variables, condiciones ni bucles: no puede tomar decisiones ni hacer cálculos. Es un lenguaje de marcado, como XML. La lógica de una web la aportan lenguajes de programación como JavaScript en el navegador o PHP y otros en el servidor, y el aspecto visual lo define CSS.
| Lenguaje | Tipo | Responde a | Ejemplo |
|---|---|---|---|
| HTML | Marcado | ¿Qué es este contenido? | Esto es un botón con el texto «Comprar» |
| CSS | Hojas de estilo | ¿Cómo se ve? | El botón es verde, redondeado y ocupa todo el ancho en móvil |
| JavaScript | Programación | ¿Qué hace? | Al pulsarlo, añade el producto al carrito sin recargar |
03 Cómo funciona HTML: elementos, etiquetas y atributos
Un elemento HTML suele tener una etiqueta de apertura, un contenido y una etiqueta de cierre. Los atributos van en la etiqueta de apertura y añaden información: adónde apunta un enlace, qué texto alternativo tiene una imagen o en qué idioma está la página. Algunos elementos, como img o meta, son vacíos y no llevan cierre.
<a href="https://www.ejemplo.com/contacto/">Escríbenos</a>
<a>: etiqueta de apertura del elemento enlace.href="…": atributo con la dirección de destino.Escríbenos: contenido, el texto del enlace.</a>: etiqueta de cierre.
04 Historia de HTML: de 1990 al HTML Living Standard
Tim Berners-Lee propuso en 1989 en el CERN un sistema de hipertexto sobre Internet y a finales de 1990 especificó HTML y escribió el primer navegador y el primer servidor. Se inspiró en SGML, un metalenguaje para documentos. La primera descripción pública, el documento «HTML Tags», apareció a finales de 1991.
| Fecha | Versión | Qué supuso |
|---|---|---|
| Finales de 1990 | HTML original (CERN) | Primera especificación y primer navegador, WorldWideWeb |
| 24 de noviembre de 1995 | HTML 2.0 (RFC 1866, IETF) | Primer estándar formal |
| 14 de enero de 1997 | HTML 3.2 (W3C) | Tablas y recopilación de extensiones de los navegadores de la época |
| 18 de diciembre de 1997 | HTML 4.0 (W3C) | Hojas de estilo, scripts y mejoras de accesibilidad |
| 24 de diciembre de 1999 | HTML 4.01 (W3C) | Revisión de HTML 4.0 |
| 26 de enero de 2000 | XHTML 1.0 (W3C) | HTML reformulado con la sintaxis estricta de XML |
| 2004 | Nace el WHATWG | Apple, Mozilla y Opera continúan evolucionando HTML |
| 28 de octubre de 2014 | HTML5 (Recomendación W3C) | Semántica, audio y vídeo nativos, canvas y nuevos formularios |
| 28 de mayo de 2019 | Acuerdo W3C–WHATWG | Una sola versión de HTML: el Living Standard |
05 HTML5 y HTML Living Standard: ¿qué versión se usa hoy?
Oficialmente, ya no hay versiones numeradas. El estándar vigente es el HTML Living Standard que publica el WHATWG en html.spec.whatwg.org: se actualiza de forma continua a medida que los navegadores implementan nuevas funciones. «HTML5» se sigue usando como etiqueta popular para el HTML moderno, y la declaración <!DOCTYPE html> que se introdujo con él es la que usan hoy todas las páginas.
Si quieres ver cómo se aplica todo esto en una página real, el tutorial de HTML5 te guía paso a paso con código.
Quién lo edita
El WHATWG, un grupo impulsado por los fabricantes de navegadores.
Cómo cambia
Por incorporación continua de funciones que ya tienen implementaciones.
Papel del W3C
Colabora y publica instantáneas revisadas del Living Standard como recomendación.
06 ¿Para qué sirve HTML?
Estructurar contenido
Títulos, párrafos, listas, tablas y secciones de cualquier página web.
Enlazar documentos
Los enlaces son la esencia del hipertexto y de cómo los buscadores descubren páginas.
Recoger datos
Formularios con campos de correo, fecha, número o archivo, y validación nativa.
Insertar multimedia
Imágenes, audio y vídeo sin complementos, con los elementos img, audio y video.
Hacer la web accesible
Un marcado semántico permite a lectores de pantalla navegar por la página.
Dar contexto a buscadores e IA
Títulos, metadatos y datos estructurados ayudan a entender e indexar el contenido.
Toda web, la haga un CMS o un equipo de desarrollo web a medida, termina entregando HTML al navegador. Por eso entenderlo te permite detectar problemas que ningún panel de control te muestra.
07 Cómo ver el HTML de cualquier página
Todo el HTML que recibe tu navegador es público. Mirarlo es la forma más rápida de aprender cómo está hecha una web y de comprobar, por ejemplo, si una página tiene su título, su meta description o sus encabezados bien puestos. Hay dos vistas distintas y conviene no confundirlas: el código fuente, que es lo que envió el servidor, y el DOM, que es lo que queda después de que JavaScript lo modifique.
-
1
Código fuente
Pulsa Ctrl+U (Cmd+Opción+U en Mac) o escribe view-source: delante de la URL. Verás el HTML tal como llegó del servidor.
-
2
Inspeccionar elemento
Clic derecho sobre cualquier parte de la página y «Inspeccionar». Las herramientas de desarrollo muestran el DOM en vivo.
-
3
Busca lo que te interesa
Usa Ctrl+F dentro del código para localizar title, h1, meta o link rel="canonical".
-
4
Compara ambas vistas
Si un contenido aparece en el DOM pero no en el código fuente, lo genera JavaScript, y los buscadores tendrán que renderizarlo para verlo.
08 HTML, SEO y accesibilidad
- ✓Un solo h1 que describa el tema de la página y una jerarquía de títulos coherente.
- ✓Etiqueta title y meta description únicas en cada página.
- ✓Atributo alt descriptivo en las imágenes con contenido.
- ✓Enlaces con elemento a y href real, no solo con JavaScript.
- ✓Elementos semánticos (main, nav, article) en lugar de div para todo.
- ✓Atributo lang en la etiqueta html con el idioma de la página.
- ✓Código sin errores graves, revisado con un validador.
Para comprobar el último punto, un validador HTML como el del W3C te señala etiquetas mal cerradas o atributos inválidos. Y si quieres que la base técnica de tu web esté bien hecha desde el principio, es parte de nuestro trabajo de diseño y desarrollo web.
Preguntas frecuentes sobre HTML
Son las siglas de HyperText Markup Language, en español «lenguaje de marcado de hipertexto». Es el lenguaje con el que se estructura el contenido de las páginas web.
Sirve para indicar qué es cada parte de una página web (títulos, párrafos, enlaces, imágenes, formularios) para que el navegador la muestre y los buscadores la entiendan.
No. Es un lenguaje de marcado: describe contenido pero no tiene lógica, variables ni bucles. La programación en la web la aporta JavaScript o los lenguajes del servidor.
Tim Berners-Lee, en el CERN, que lo especificó a finales de 1990 junto con el primer navegador y el primer servidor web.
No hay versiones numeradas desde 2019: el estándar vigente es el HTML Living Standard del WHATWG, que se actualiza de forma continua. HTML5 es el nombre popular del HTML moderno.
HTML5 es el nombre de la gran revisión del lenguaje que se hizo recomendación del W3C en 2014 y que añadió elementos semánticos, audio, vídeo y nuevos formularios. Hoy ambos términos se refieren en la práctica al mismo HTML moderno, el Living Standard.
HTML define la estructura y el significado del contenido; CSS define su presentación, como colores, tipografías y maquetación.
Con cualquier editor de texto plano, desde el Bloc de notas hasta editores de código como Visual Studio Code. El archivo se guarda con extensión .html y se abre en un navegador.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗