HTML: Definición y guía esencial del lenguaje web (HTML5)

Descubre qué es HTML y HTML5: guía esencial para crear páginas web, etiquetas, metadatos, CSS y JavaScript. Aprende ejemplos y buenas prácticas paso a paso.

Autor: Leandro Alegsa

25-03-2026 11:49

El lenguaje de marcado de hipertexto (HTML) es un lenguaje de marcado que sirve para estructurar y representar el contenido de una página web. Las páginas web se muestran en navegadores y pueden incluir texto, enlaces, imágenes, sonido y vídeo, entre otros elementos. El HTML indica al navegador cómo deben organizarse y presentarse esos distintos tipos de contenido; además, permite añadir metainformación (datos sobre la página), como el autor o la descripción, que normalmente no se muestra directamente en pantalla. Las hojas de estilo en cascada (CSS) se utilizan para dar estilo a los elementos HTML, mientras que JavaScript se utiliza para manipular la estructura HTML y los estilos CSS y añadir interactividad.

¿Qué hace HTML?

Define la estructura del contenido mediante elementos (también llamados etiquetas), por ejemplo <h1> para títulos, <p> para párrafos o <img> para imágenes.
Permite enlazar recursos y páginas con la etiqueta <a> (hipervínculos).
Incluye metadatos en la sección <head> (como <meta>, <title> y enlaces a hojas de estilo).
Soporta formularios (<form>, <input>, <button>) para la interacción y el envío de datos.
Integra multimedia (audio y vídeo) y gráficos (SVG, <canvas>).

Estructura básica de un documento HTML

DOCTYPE: la primera línea suele ser <!DOCTYPE html>, que indica al navegador que se trata de HTML5.
Raíz: el elemento <html> contiene todo el documento y puede incluir el atributo lang para especificar el idioma.
Cabeza (<head>): metadatos, título, enlaces a CSS y scripts que deben cargarse antes del contenido visible.
Cuerpo (<body>): contenido visible por el usuario—texto, imágenes, enlaces, formularios, etc.

Etiquetas y atributos

Las etiquetas (por ejemplo <div>, <section>, <article>) envuelven contenido y pueden llevar atributos que modifican su comportamiento o proporcionan información (por ejemplo, id, class, src en imágenes, alt en <img>). HTML5 introdujo etiquetas semánticas como <header>, <nav>, <main>, <aside> y <footer> que ayudan a expresar la estructura lógica del contenido y mejorar la accesibilidad y el SEO.

HTML5 y su evolución

HTML ha evolucionado desde sus inicios y hoy en día las especificaciones las mantienen organismos como el World Wide Web Consortium (W3C) y el WHATWG, que trabaja en el "Living Standard" de HTML. HTML5 trajo muchas mejoras respecto a versiones anteriores: soporte nativo para audio y vídeo, APIs para almacenamiento local, nuevas etiquetas semánticas, mejor manejo de formularios y control multimedia, entre otras.

Accesibilidad y buenas prácticas

Usar etiquetas semánticas en lugar de <div> genéricos siempre que sea posible.
Proporcionar textos alternativos (alt) en las imágenes para lectores de pantalla.
Asegurar una estructura lógica de encabezados (<h1>–<h6>) y controles de formulario con etiquetas (<label>).
Evitar contenido que dependa únicamente del color; comprobar el contraste y la navegabilidad por teclado.
Usar atributos ARIA cuando sea necesario para mejorar la interpretación por tecnologías asistivas.

Interacción con CSS y JavaScript

HTML define la estructura, CSS define la apariencia y JavaScript añade comportamiento. Separar responsabilidades (estructura en HTML, presentación en CSS y lógica en JavaScript) facilita el mantenimiento y la accesibilidad. Los navegadores modernos interpretan las tres tecnologías para ofrecer páginas ricas e interactivas.

Compatibilidad y validación

Existen distintas versiones y recomendaciones, por lo que es importante validar el HTML y probar páginas en varios navegadores y dispositivos. Herramientas de validación y linters ayudan a detectar errores y a seguir las buenas prácticas del estándar.

Resumen

HTML es la base de la web: organiza contenido, permite integrar multimedia y formularios, y junto con CSS y JavaScript crea experiencias web completas. Su evolución continua (con aportes de organizaciones como el World Wide Web Consortium y el WHATWG) garantiza nuevas capacidades y compatibilidad con los navegadores actuales.

Etiquetas

El lenguaje HTML utiliza unos fragmentos especiales de lenguaje de programación llamados "etiquetas" para que el navegador sepa cómo debe ser una página web. Las etiquetas suelen venir en pares: una etiqueta de apertura define el comienzo de un bloque de contenido y una etiqueta de cierre define el final de ese bloque de contenido. Hay muchos tipos de etiquetas, y cada una tiene un propósito diferente. Consulte las etiquetas HTML básicas más abajo para ver ejemplos de etiquetas.

Algunas etiquetas sólo funcionan en determinados navegadores. Por ejemplo, la etiqueta <menuitem>, que se utiliza para hacer aparecer algo cuando la persona pulsa el botón derecho del ratón, sólo funciona en el navegador Mozilla Firefox. Otros navegadores simplemente ignoran esta etiqueta y muestran la escritura normalmente. Muchos creadores de páginas web evitan utilizar estas etiquetas "no estándar" porque quieren que sus páginas se vean igual en todos los navegadores.

Ejemplo

Aquí hay una página de ejemplo en HTML.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Este es el título de la página. </title> 5 </head> 6 < body> 7 < p> Esto es un párrafo. </p> 8 < a href="https://www.domain.com"> Este es un enlace. </a> 9 < img src="imagen.jpg" alt="Imagen"> 10 </body> 11 </html>

Una página HTML sencilla sería esto: un solo párrafo con "¡Hola mundo! " escrito en él.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> ¡Hola! </title> 5 </head> 6 < body> 7 < p> ¡Hola mundo! </p> 8 </body> 9 </html>

Etiquetas HTML básicas

Nombre de la etiqueta	Nombre	Función	Ejemplo de código
`<! DOCTYPE>`	Doctype	Define el tipo de documento	<!DOCTYPE html>
`<html>`	HTML	Define un documento HTML e inicia un documento HTML.	< html> Todo el código</html>
`<cabeza>`	Cabeza	Contiene cualquier código que no se utilice para mostrar elementos en la página web	<head></head>
`<título>`	Título	Define el título de la página web (se muestra en la ficha) y se introduce dentro del `<head>`	<título> Página web</título>
`<cuerpo>`	Cuerpo	Contiene los elementos visibles de la página web (y contiene el párrafo y más)	<body> Etiquetas Html</body>
`<h1>` a `<h6>`	Rúbricas	Títulos de varios tamaños `(<h1>` es el más grande)	< h1> Título</h1>
	Párrafo	Define un párrafo de texto	< p> TEXTO</p>
	Anclaje	Crea enlaces activos a otras páginas web	< a href="www.domain.com"> Visite nuestro sitio</a>
`<img>`	Imagen	Muestra una imagen en la página	< img src="ImageUrl" alt="Texto mostrado si la imagen no está disponible">
`<br>`	Romper	Inserta un único salto de línea	Texto < br> Texto
`<center>`	Centro	Mueve el contenido al centro de la página	<centro> Código</centro>
`<script>`	Guión	Crea un script en la página web, normalmente escrito en JavaScript	<script> document. write("¡Hola Mundo!")</script>

Uso de etiquetas HTML

Hacer una página web

Hacer una página web es fácil, lo único que hay que recordar son las etiquetas y el orden para hacer una página web.

En primer lugar, tienes que encontrar un lugar para escribir las etiquetas HTML (recomiendo el bloc de notas) y escribir las etiquetas.

Aquí hay otro ejemplo de una página con etiquetas HTML.

<html>

<título> ¡Hola! <título>

<h1>¡Hola mundo!</h1>

</head>

<p>

Esta es una página de etiquetas HTML.

</p>

Por: *Insertar nombre aquí*

</footer>

</html>

Una vez que haya terminado, guarde en esto en este formato: helloworld.htm

(no pongas espacios)

¡Y ya está! Una vez que lo guardes en tu ordenador, si lo pulsas, ¡te enviará a tu página web en google!

Preguntas y respuestas

P: ¿Qué es HTML?

R: HTML es un tipo de lenguaje de marcado que se utiliza para crear páginas web que contienen escritos, enlaces, imágenes y audiovisuales.

P: ¿Cuál es la función de HTML?

R: La función del HTML es indicar a los navegadores web el aspecto que deben tener las páginas web y añadir metainformación como el nombre del creador de la página web.

P: ¿Cuáles son algunos ejemplos de medios que pueden incluirse en las páginas web creadas con HTML?

R: Algunos ejemplos de medios que pueden incluirse en las páginas web creadas con HTML son los archivos de audio y los videoclips.

P: ¿Cómo complementa CSS a HTML?

R: CSS se utiliza para cambiar la apariencia de las páginas HTML.

P: ¿Cuál es el papel de JavaScript en el desarrollo web?

R: JavaScript es un lenguaje de scripting esencial en el desarrollo web, ya que indica a los sitios web cómo deben comportarse y puede cambiar la apariencia de HTML y CSS.

P: ¿Quién es el responsable de la creación de HTML?

R: HTML está creado por el Consorcio World Wide Web (W3C).

P: ¿Cuál es la versión estándar actual de HTML?

R: Desde septiembre de 2018, HTML 5 es la última versión estándar de HTML en su versión 5.2.

Buscar dentro de la enciclopedia