HTML es el “lenguaje empleado para la elaboración de páginas web, define una estructura básica y un código (denominado código HTML) para plasmar el contenido de la página. Es decir, la estructura, el texto, las imágenes o vídeos, entre otros”, explica el Diccionario Panhispánico de Español 1.
Dicho así, puede resultar un poco confuso, pero lo cierto es que se trata del código más usado en la creación de páginas web. Por lo que, aunque no sepas qué es HTML, para qué sirve o cómo se utiliza, lo estás usando ya, mientras lees estas letras. Sí, es mucho más importante de lo que seguramente pensabas, ¿verdad?
Para ahondar un poco más en su importancia: ¡Vamos a ver un resumen de su historia y evolución con datos que recoge la Agencia de Marketing Serna Group 2! ⬇️
1989
Empieza la historia del HTML
El investigador Tim Berners-Lee inventa este código con la intención de compartir artículos científicos. Esta fue la primera versión.
1993
Nace el World Wide Web Consortium (W3C)
Se trata de un organismo que determinará el funcionamiento del HTML.
1996
Llega la versión HTML 3.2
Un paso más en su profesionalización, con una de las versiones más completas que marcaron la historia del HTML.
1999
Se hace oficial la versión 4
Solucionando los problemas de la versión 3, y agregando el llamado iFrame que permite tener sitios dentro de otros sitios.
2014
Quinta versión
Esta es la versión actual, en la que toman relevancia el vídeo, el audio y la posibilidad de introducir datos en la web.
👆 Te interesa: descubre cómo poner comentarios en HTML, especialmente importante si haces un trabajo colaborativo.
HTML significado y definición
Las siglas HTML corresponden en inglés a "HyperText Markup Language", cuya traducción sería: lenguaje de marcado de hipertexto.
Solo con esta traducción ya tenemos tres conceptos interesantes que nos van a ayudar a entender qué es el HTML:
- 1️⃣ Primero, que es un lenguaje.
- 2️⃣ Segundo, el concepto de hipertexto.
- 3️⃣ Y tercero, que es un lenguaje de marcado
Todo ello nos ayudará a ir trazando una definición más comprensible. Empecemos por el lenguaje:
El HTML es "el fundamento o lenguaje sobre el que se construye toda página web", explica la Universidad Europea 3. Y se utiliza para "estructurar el contenido de forma sencilla, para que cualquier usuario pueda acceder a la información de forma sencilla y útil".
Continuamos por el Hipertexto, ¿sabes lo que es? ➡️Aunque no conozcas la definición, has utilizado el hipertexto para llegar, literalmente, hasta aquí. Y es que se trata de los enlaces que conectan distintas páginas web. Estos enlaces pueden llevarte a una misma página, o a otra diferente, y son los que facilitan "saltar" de un contenido a otro en internet sin que te des prácticamente cuenta y de manera muy sencilla e intuitiva.
Por último, el lenguaje HTML es un lenguaje marcado. ¿Qué quiere decir? Explicado de forma muy sencilla se podría resumir diciendo que utiliza marcadores o marcas para identificar los elementos que conforman dicha página.
🌐 ¡Mejor con un ejemplo! En este artículo, el título tiene una etiqueta o marcador llamada <title> (título). Las fotos son <img> y, si hubiera vídeos, por ejemplo, sería <video>.
¿Cuál es la diferencias entre un lenguaje de marcado y un lenguaje de programación?
Especialmente para quienes no conocen estos términos, es fácil confundirlos, pues ambos lenguajes son importantes para el desarrollo de páginas webs, pero tienen funciones y propósitos diferentes.
En primer lugar, explica Antonio Heredia Morante, Docente y desarrollador web 4, porque un "lenguaje de marcado es una herramienta utilizada principalmente para definir la estructura y presentación de un documento". Es decir, esas marcas o etiquetas sirven para darle un formato concreto al contenido.
- ℹ️ Ejemplo: además de los que hemos visto más arriba, también puede ser, según explica el experto, organizar un texto en párrafos, crear una lista, poner un enlace en el contenido, etc.
Sin embargo, el lenguaje de programación, explica la misma fuente, está diseñado "para crear aplicaciones y realizar tareas complejas". Este tipo de lenguaje permite un desarrollador/a "escribir instrucciones que el ordenador ejecutará para realizar ciertas acciones". ¿Ves la diferencia?
📝 En resumen: el lenguaje de marcado "define la estructura y el diseño de la página", mientras que "el lenguaje de programación maneja la lógica y el comportamiento", finaliza.
¿Para qué sirve HTML?
El lenguaje HTML sirve para organizar de forma estructurada el contenido de una página web. Es, por así decirlo, lo que hay detrás de la misma para que veamos el aspecto final cuando estamos leyendo, por ejemplo, un artículo como este; o cuando estamos comprando en una plataforma de venta online.
El HTML es lo que permite que diferenciemos, por ejemplo, el título del resto del texto; o que aparezca el precio de un producto resaltado, etc. Para que quede más claro todavía, vamos a ver cuáles son las funciones principales de HTML en la estructura web:
- Definir la estructura de la página web y las páginas que a su vez la conforman.
- Diferenciar y definir también los elementos que forman las páginas, como por ejemplo los títulos, los destacados, la organización de un texto en párrafos, la creación de listas (como la que estamos empleando para explicar estas funciones).
- La creación de enlaces para acceder a otras páginas, tanto dentro de la misma web como hacia otra.
En definitiva, establecer cómo se ve el contenido y permitir a las personas que navegan en internet moverse de un lugar a otro a través de los enlaces.
Ejemplos prácticos:
- 1️⃣ Organizar la información en tablas: el lenguaje HTML permite, por ejemplo, crear tablas en tu página web. Utilizando las etiquetas table, tr, td y th puedes organizar tu texto de manera más ordenada y estructurada. De este modo, la información aparecerá en encabezados, filas y columnas en un lugar específico de tu web.
- 2️⃣ Integrar imágenes en las páginas web: cuando insertamos una imagen en HTML, no solo es importante la imagen en sí, sino la información que aportamos sobre la misma; desde el tamaño hasta una descripción, que nos ayudará a que el contenido sea leído y encontrado por los motores de búsqueda, pero también facilitando la accesibilidad a las personas que tienen problemas de visión.
- 3️⃣Dar formato al texto: por supuesto, en HTML podemos crear texto, que es la base del contenido web. Y es que, aunque cada vez tenga más peso la imagen, el texto sigue siendo la parte fundamental. Con HTML podemos poner negritas, subrayados, cursivas, centrar el texto, y un largo etcétera que nos ayudará a que el contenido sea accesible y legible.
- 4️⃣Diseñar páginas web: todo lo que hemos visto más arriba sirve, en definitiva, para diseñar el contenido de las páginas webs, como esta que estás leyendo ahora mismo.😉
El código HTML en acción
Vamos a ver ahora, de forma práctica, cómo se interpreta un fragmento de HTML así como su significado línea por línea:
- <!DOCTYPE html> explica que se trata de un documento de HTML en su última versión.
- <html lang="es"> indica que el contenido está en español.
- <head> aporta información sobre la página.
- <meta charset="UTF-8"> sirve para que se lean caracteres especiales como puede ser la letra ñ.
- <title>Ejemplo de página HTML</title> es el título que se verá en el navegador.
- </head> el cierre de head (cerras las etiquetas es fundamental en HTML).
- <body> indica que comienza el contenido.
- <h1>¡Hola, mundo!</h1> es el título principal.
- <p>Este es un párrafo de ejemplo.</p> indica que hay un párrafo de texto.
- <a href="https://www.ejemplo.com">Visitar Ejemplo.com</a> indica que hay un enlace.
- </body> indica el cierre de body.
- </html> indica el cierre de html.
¡En el siguiente vídeo puedes verlo de forma más gráfica!👇
Tutoriales para principiantes
Para saber cuáles son los elementos principales de HTML, para qué sirven y cómo se usan, utilizaremos tutoriales para principiantes con ejemplos prácticos: ¡Un tutorial por cada elemento!
1️⃣ La etiqueta body para identificar el cuerpo del texto.
2️⃣ La etiqueta head que define el título de la página de la web.
3️⃣ La etiqueta p, para identificar los párrafos de un texto.
4️⃣La etiqueta H1, H2, H3... para representar los encabezados.
5️⃣ La etiqueta table, para generar una tabla en el contenido.
Aunque pueda parecer complicado, si vas poco a poco, empezando por lo esencial y complicando las cosas cada vez un poco más hasta poder crear una página web con HTML, habrás dado un gran paso. Y es que, en la actualidad, internet es el eje de todo, y saber manejar un lenguaje como el HTML puede abrirte muchas puertas profesionales, más allá del saber cómo funciona "por dentro" cada contenido que consumes en la red de redes. ¡Qué interesante!🌐
Bibliografía
- (S/f). Rae.es. Recuperado el 3 de abril de 2025, de https://dpej.rae.es/lema/html
- (S/f-b). Sernagrp.com. Recuperado el 3 de abril de 2025, de https://sernagrp.com/blog/html/
- Qué es HTML: el lenguaje de etiquetas. (2024, octubre 18). Universidad Europea. https://universidadeuropea.com/blog/que-es-html/
- Morante, A. H. (2024, agosto 21). ¿Qué es el lenguaje de marcado en programación y qué tipos de lenguajes existen? Linkedin.com. https://www.linkedin.com/pulse/qu%C3%A9-es-el-lenguaje-de-marca-en-programaci%C3%B3n-y-tipos-heredia-morante-tjp7f/
¿Te gustó este artículo? ¡Califícalo!
Cargando…
