Etimología

viene de HyperText Markup Language. En español se entiende como Lenguaje de Marcado de Hipertexto: un lenguaje que usa marcas o etiquetas para estructurar texto conectado por enlaces.

¿Qué es?

significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje estándar utilizado para crear y estructurar contenido en la web. Cada sitio web que visitas está construido sobre HTML — define lo que aparece en la página: encabezados, párrafos, imágenes, enlaces, listas, formularios, videos y más. HTML usa "etiquetas" (como <h1> para un encabezado o <p> para un párrafo) para decirle al qué es cada pieza de contenido. Piensa en HTML como el esqueleto de una página web — proporciona la estructura y organiza el contenido, pero no maneja colores, fuentes ni diseño (eso es ) ni interactividad (eso es ). Cuando un desarrollador construye un sitio web, HTML es siempre la primera capa que crea.

Juega con esto

Código

<h1>My Beach Trip</h1>

<p>Last summer I visited a

beautiful beach.</p>

<a href="photos.html">See more photos</a>

<ul>

<li>Swimming</li>

<li>Surfing</li>

<li>Sunbathing</li>

</ul>

Resultado

My Beach Trip

Last summer I visited a beautiful beach.

See more photos

Swimming
Surfing
Sunbathing

<h1>Encabezado principal — el título más grande de la página.

<p>Un párrafo — un bloque de texto normal.

<img>Una imagen — muestra una foto en la página.

<a>Un enlace — texto que al hacer clic te lleva a otra página.

<ul>Una lista sin orden — una lista con viñetas.

<li>Un elemento de lista — una entrada dentro de una lista.

srcLe dice al navegador dónde encontrar el archivo de imagen.

altUna descripción corta de la imagen, se muestra si no puede cargar.

hrefLa dirección web a la que apunta el enlace.

Ejemplos de la vida real

Un Artículo de Blog — el título en la parte superior, cada párrafo de texto, las imágenes y los enlaces clicables a otros artículos son piezas de contenido definidas por . Le dice al : "esto es un título, esto es un párrafo, esto es una imagen" para que todo aparezca en el orden correcto.
Un Formulario de Contacto — los campos de texto donde escribes tu nombre y correo electrónico, el menú desplegable para seleccionar un tema y el botón "Enviar" existen porque los define. Sin HTML, el no sabría mostrar un formulario en la página.
Un Video de YouTube en un Sitio de Noticias — cuando ves un reproductor de video incrustado dentro de un blog o artículo de noticias, es lo que coloca ese video en la página y le dice al de dónde cargarlo.
Un Menú de — la lista de enlaces clicables en la parte superior de un sitio web (Inicio, Acerca de, Contacto) está estructurada con . Define cada enlace y los agrupa para que el los muestre como un menú.

Analogías

es como el plano de una casa. Define dónde están las habitaciones, dónde van las puertas y ventanas, y cómo se organiza el espacio — pero no elige los colores de pintura ni los muebles. Eso es .
Piensa en como los huesos del cuerpo humano. El esqueleto le da al cuerpo su estructura y mantiene todo en su lugar, pero es la piel () la que le da su apariencia, y los músculos () los que lo hacen moverse.
es como escribir un esquema para un libro. Define los capítulos, secciones, párrafos e imágenes — la estructura del contenido — antes de que se aplique cualquier estilo o diseño.

Comparaciones

HTML vs CSS

define la estructura y el contenido de una página web — qué elementos existen y en qué orden (encabezados, párrafos, imágenes, enlaces).
define la presentación visual — cómo se ven esos elementos (colores, fuentes, espaciado, diseño, animaciones).
Una página web con solo se ve como un documento de . Agregar lo transforma en un diseño pulido y visualmente atractivo.

¿Por qué es importante?

es la base de cada sitio web en Internet. Sin HTML, no existirían páginas web. Entender HTML te ayuda a comunicarte con desarrolladores sobre la estructura del contenido, hacer ediciones básicas en tu propio sitio web y entender por qué ciertos cambios (como agregar una nueva sección o reorganizar contenido) toman el tiempo que toman. Aunque nunca escribas HTML tú mismo, saber qué hace te da una imagen más clara de cómo se construyen los sitios web y cómo se organiza el contenido detrás de escena.

Términos relacionados

CSS — CSS (Hojas de Estilo en Cascada)
JavaScript — JavaScript (Lenguaje de Programación para la Web)
Frontend — Frontend (Lado del Cliente)
Framework — Framework (Estructura Lista para Usar)
UX/UI — UX/UI (Experiencia de Usuario / Interfaz de Usuario)

HTML