Estructurando la web con HTML

HTML es la tecnología que define el contenido y la estructura de cualquier sitio web. Bien escrito, también debería definir la semántica (el significado) del contenido de forma que una máquina pueda interpretarla, algo esencial para la accesibilidad, para la optimización en buscadores y para aprovechar las funcionalidades que los navegadores ofrecen de serie para que el contenido funcione de la mejor manera. Este módulo cubre los fundamentos del lenguaje, antes de pasar a áreas clave como la estructura del documento, los enlaces, las listas, las imágenes, los formularios y más.

Prerrequisitos

Antes de empezar este módulo no necesitas conocimientos previos de HTML, pero deberías estar familiarizado, al menos de forma básica, con el uso de computadoras y con el uso pasivo de la web (es decir, sólo mirarla y consumir su contenido). Debes tener configurado un entorno de trabajo básico (como se detalla en Instalación de software básico) y comprender cómo crear y administrar archivos (como se detalla en Manejo de archivos). Ambos forman parte de nuestro módulo para principiantes Introducción a la web.

Nota: Si estás trabajando en una computadora, tablet u otro dispositivo en el que no puedas crear archivos, puedes probar el código en un editor en línea como CodePen o JSFiddle.

Tutoriales y desafíos

Primeros pasos con HTML: Cubre lo más básico de HTML para que puedas empezar: definimos los elementos, los atributos y otros términos importantes, y mostramos dónde encajan dentro del lenguaje. También mostramos cómo se estructura una página HTML típica y cómo se estructura un elemento HTML, y explicamos otras características básicas del lenguaje. Por el camino jugaremos un poco con HTML para que le tomes el gusto.
¿Qué hay en la cabecera? Metadatos en HTML: La cabecera de un documento HTML es la parte que no se muestra en el navegador cuando se carga la página. Contiene metadatos como el <title> de la página, enlaces a CSS (si quieres dar estilo a tu contenido HTML con CSS), enlaces a favicons personalizados y metadatos (datos sobre el HTML, como quién lo escribió y las palabras clave importantes que describen el documento).
Fundamentos de texto en HTML: Una de las tareas principales de HTML es dar estructura al texto para que el navegador muestre un documento HTML tal como pretende quien lo desarrolla. Este artículo explica cómo usar HTML para proporcionar la estructura fundamental de una página definiendo encabezados y párrafos.
Énfasis e importancia: El artículo anterior explicaba por qué la semántica es importante en HTML, y se centraba en los encabezados y los párrafos. Este artículo continúa con el tema de la semántica, y examina los elementos HTML que aplican énfasis e importancia al texto (el equivalente a la cursiva y la negrita en los medios impresos).
Listas: Las listas están por todas partes: desde la lista de la compra hasta la lista de indicaciones que sigues sin pensar para llegar a tu casa cada día, pasando por las listas de instrucciones que sigues en estos tutoriales. No te sorprenderá que HTML tenga un conjunto de elementos que nos permite definir distintos tipos de lista. En la web hay tres tipos: sin ordenar, ordenadas y de descripción. Esta lección te muestra cómo usar cada una.
Formateo de texto avanzado: HTML tiene muchos otros elementos para definir la semántica del texto que no vimos en el artículo Énfasis e importancia. Los elementos que se describen aquí son menos conocidos, pero conviene conocerlos (y esta sigue sin ser una lista completa, ni de lejos). Aprenderás a marcar citas, código y otro texto relacionado, subíndices y superíndices, información de contacto y más.
Marcando una carta ^Desafío: Todos aprendemos a escribir una carta tarde o temprano; además es un ejemplo útil para poner a prueba nuestras habilidades de formateo de texto. En este desafío tendrás que marcar una carta como prueba de tus habilidades con el formateo de texto en HTML, con los hipervínculos y con el uso correcto del elemento <head>.
Estructura web y documentación: Además de definir las partes individuales de tu página (como «un párrafo» o «una imagen»), HTML cuenta con varios elementos de bloque que sirven para definir zonas de tu sitio web (como «la cabecera», «el menú de navegación» o «la columna de contenido principal»). Este artículo explica cómo planificar la estructura básica de un sitio web y cómo escribir el HTML que la representa.
Crear hipervínculos: Los enlaces (también llamados hipervínculos) son realmente importantes: son lo que convierte a la Web en una web. Este artículo muestra la sintaxis necesaria para crear un enlace y comenta las buenas prácticas al usarlos.
Estructuración de una página de contenido ^Desafío: Estructurar una página de contenido lista para maquetarla con CSS es una habilidad muy importante, así que en este desafío se pondrá a prueba tu capacidad para pensar en cómo puede acabar viéndose una página y elegir la semántica estructural adecuada sobre la que construir una maquetación.
Imágenes en HTML: Al principio la web era sólo texto, y resultaba bastante aburrida. Por suerte, no pasó mucho tiempo antes de que se añadiera la capacidad de incrustar imágenes (y otros tipos de contenido más interesantes) dentro de las páginas web. En este artículo veremos en profundidad cómo usar el elemento <img>, desde lo básico hasta cómo anotarlo con pies de foto usando <figure>, y qué relación tiene con las imágenes de fondo de CSS.
Contenido de audio y video: Ahora que sabemos añadir imágenes sencillas a una página web, el siguiente paso es empezar a añadir reproductores de video y audio a tus documentos HTML. En este artículo veremos justamente eso con los elementos <video> y <audio>; terminaremos viendo cómo añadir subtítulos a tus videos.
Página de bienvenida ^Desafío: En este desafío pondremos a prueba lo que sabes de algunas de las técnicas comentadas en las últimas lecciones, pidiéndote que añadas imágenes y video a una página de bienvenida sobre bichos y otros animalillos.
Conceptos básicos de las tablas HTML: Este artículo te introduce en las tablas HTML y cubre lo más básico, como las filas, las celdas, los encabezados, hacer que una celda ocupe varias filas y columnas, y cómo agrupar todas las celdas de una columna para darles estilo.
Funciones avanzadas de las tablas HTML y accesibilidad: En este artículo veremos más funciones de accesibilidad de las tablas HTML, como los pies y los resúmenes, agrupar las filas en secciones de cabecera, cuerpo y pie, y delimitar el ámbito de columnas y filas.
Estructurando datos planetarios ^Desafío: En este desafío te damos datos sobre los planetas de nuestro sistema solar. Tu tarea es estructurarlos en una tabla HTML accesible.
Formularios y botones en HTML: Los formularios y los botones de HTML son herramientas potentes para interactuar con quien usa la página: lo más habitual es usarlos para recopilar datos o para permitir controlar una interfaz de usuario. En este artículo presentamos los fundamentos de los formularios y los botones.
Depuración de HTML: Escribir HTML está muy bien, pero ¿qué pasa cuando algo va mal y no consigues averiguar dónde está el error en el código? Este artículo te presentará algunas herramientas que te ayudarán a encontrar y corregir errores en HTML.

Pon a prueba tus habilidades

Entre los artículos del tutorial encontrarás artículos de tipo «Pon a prueba tus habilidades» para comprobar si has retenido la información más importante antes de seguir adelante. Si quieres verlos todos juntos, los tienes listados en Pon a prueba tus habilidades: HTML.

Tutoriales adicionales

Estos tutoriales no forman parte del itinerario de aprendizaje, pero resultan interesantes de todos modos; considéralos objetivos opcionales, para estudiarlos cuando hayas terminado los artículos principales de Core.

Agregar gráficos vectoriales a la web: Los gráficos vectoriales son muy útiles en muchas situaciones: ocupan poco y son muy escalables, así que no se pixelan al ampliarlos o al mostrarlos a gran tamaño. En este artículo te mostramos cómo incluir uno en tu página web.
Desde object hasta iframe: otras tecnologías de incrustación: Al hablar de incrustar contenido en páginas web solemos pensar en imágenes, video y audio. En este artículo damos un paso al costado y vemos algunos elementos que permiten incrustar una gran variedad de tipos de contenido: los elementos <iframe>, <embed> y <object>. Los <iframe> sirven para incrustar otras páginas web, y los otros dos permiten incrustar recursos externos como archivos PDF.

Véase también

Learn HTML and CSS, Scrimba ^{socio de aprendizaje de MDN}: El curso Learn HTML and CSS de Scrimba te enseña HTML y CSS construyendo y desplegando cinco proyectos, con lecciones y desafíos interactivos impartidos por docentes con experiencia.
Learn HTML, Codecademy: Otro recurso útil para aprender los fundamentos de HTML.
The basics of semantic HTML, Scrimba ^{socio de aprendizaje de MDN}: Esta lección interactiva ofrece una descripción útil de HTML, con especial énfasis en por qué es importante su aspecto semántico.

Help improve MDN

Learn how to contribute

This page was last modified on 11 sept 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content