Volver al diccionario
Desarrollo Web
HTML (HyperText Markup Language)
HTML es el lenguaje que estructura todas las páginas web. Aprende qué es HTML, sus etiquetas esenciales, HTML5 semántico y por qué es la base del desarrollo web.
Qué es HTML
HTML (HyperText Markup Language) es el lenguaje de marcado estándar con el que se construyen todas las páginas web. Define la estructura y el contenido de una página: qué es un título, qué es un párrafo, dónde va una imagen, cómo se forma un formulario. El navegador (Chrome, Firefox, Safari) lee el HTML y lo convierte en la página visual que ves.
HTML no es un lenguaje de programación — no tiene lógica, condiciones ni bucles. Es un lenguaje de marcado: envuelves el contenido entre etiquetas para describir qué tipo de elemento es.
Estructura básica de un documento HTML
\\\`html
Título principal de la página
Un párrafo de texto con información relevante.
© 2024 Mi empresa
\\\`
Etiquetas HTML más importantes
Estructura y semántica
- \
<header>\: Cabecera de la página o sección - \
<nav>\: Menú de navegación - \
<main>\: Contenido principal (único por página) - \
<section>\: Sección temática del contenido - \
<article>\: Contenido independiente (post, noticia, producto) - \
<aside>\: Contenido secundario, sidebar - \
<footer>\: Pie de página o sección
Títulos y texto
- \
<h1>\a \<h6>\: Títulos en jerarquía (h1 el más importante) - \
<p>\: Párrafo - \
<strong>\: Texto con énfasis fuerte (negrita semántica) - \
<em>\: Texto con énfasis (cursiva semántica) - \
<span>\: Contenedor inline genérico
Multimedia y enlaces
- \
<a href="">\: Enlace - \
<img src="" alt="">\: Imagen (el atributo alt es esencial para SEO y accesibilidad) - \
<video>\y \<audio>\: Vídeo y audio nativos sin plugins - \
<picture>\: Imágenes responsive con múltiples fuentes
Formularios
- \
<form>\: Contenedor del formulario - \
<input type="">\: Campo de entrada (texto, email, contraseña, checkbox...) - \
<textarea>\: Área de texto multilínea - \
<select>\y \<option>\: Lista desplegable - \
<button>\: Botón de acción - \
<label>\: Etiqueta asociada a un campo (mejora accesibilidad)
Listas y tablas
- \
<ul>\+ \<li>\: Lista desordenada (viñetas) - \
<ol>\+ \<li>\: Lista ordenada (numerada) - \
<table>\, \<tr>\, \<td>\, \<th>\: Tablas de datos
HTML5 y sus novedades
HTML5 (la versión actual del estándar) introdujo:
- Etiquetas semánticas: header, nav, main, section, article, aside, footer — mejoran SEO y accesibilidad
- Vídeo y audio nativos: Sin necesidad de Flash u otros plugins
- Canvas: Dibujo y animaciones 2D via JavaScript
- Formularios mejorados: Tipos de input nuevos (email, date, range, color), validación nativa
- APIs del navegador: Geolocalización, localStorage, Service Workers, WebSockets
- Web Components: Elementos HTML personalizados y reutilizables
HTML y SEO: por qué es fundamental
El HTML correcto es la base del SEO técnico:
- **\
<title>\**: El título que aparece en Google — uno por página, descriptivo y con keyword - **\
<meta name="description"\>\**: El extracto en los resultados de búsqueda - **\
<h1>\**: El título principal que Google usa para entender el tema de la página — uno por página - Etiquetas semánticas: Ayudan a Google a entender la estructura del contenido
- **\
alt\en imágenes**: Google "lee" las imágenes a través del texto alternativo - Enlazado interno: Los \
<a href>\entre páginas distribuyen la autoridad SEO - Datos estructurados: Markup JSON-LD o microdata dentro del HTML para rich snippets
Preguntas frecuentes
¿Cuánto tiempo se tarda en aprender HTML?
La sintaxis básica de HTML se puede aprender en pocos días. En una o dos semanas de práctica puedes crear páginas simples. HTML es el punto de entrada más accesible al desarrollo web, y dominar sus fundamentos no lleva más de 1-2 meses de práctica regular.
¿HTML es lo mismo que un lenguaje de programación?
No. HTML es un lenguaje de marcado, no de programación. No tiene variables, condiciones, bucles ni lógica. Para añadir comportamiento dinámico a una página HTML se usa JavaScript, que sí es un lenguaje de programación.
¿Necesito saber HTML si uso WordPress o un constructor web?
Aunque WordPress y constructores como Elementor o Webflow permiten crear páginas sin tocar HTML, conocer los fundamentos del lenguaje te permite resolver problemas que las herramientas visuales no pueden, optimizar el SEO técnico y entender por qué ciertas cosas funcionan como funcionan.
Términos relacionados
Necesitas ayuda con tu ecommerce?
Somos expertos en desarrollo de tiendas online. Cuéntanos tu proyecto y te asesoramos sin compromiso.
Contactar con Ganton