01 – ¿Qué es HTML y para qué sirve? Aprende HTML desde cero
Si alguna vez te has preguntado cómo se crea una página web, qué lenguaje utilizan los navegadores para mostrar su contenido o por dónde empezar a aprender desarrollo web, estás en el lugar adecuado.
HTML es una de las tecnologías fundamentales del desarrollo web y, junto con CSS y JavaScript, forma la base de prácticamente cualquier página que visitas en Internet.
Desde una página personal hasta una tienda online, pasando por un blog, un periódico digital o una aplicación web, todas utilizan HTML para organizar y estructurar su contenido.
En esta primera lección del Curso de HTML desde cero de CCH Tech Lab, vamos a descubrir qué es HTML, para qué sirve, cómo funciona, qué significa escribir HTML semántico y cuáles son las herramientas que necesitaremos para empezar a crear nuestras propias páginas web.
No necesitas conocimientos previos de programación. Comenzaremos desde lo más básico y avanzaremos progresivamente.
Aprende HTML en vídeo: primera lección
En este vídeo te explico los conceptos fundamentales de HTML de forma sencilla, con ejemplos y sin dar por supuesto que ya sabes programar.
Si prefieres aprender leyendo, a continuación encontrarás toda la teoría desarrollada, ejemplos de código y explicaciones adicionales que podrás consultar siempre que lo necesites.
Mi recomendación: utiliza el vídeo para familiarizarte con los conceptos y este artículo como material de consulta cuando empieces a escribir tus primeras líneas de HTML.
¿Qué es HTML?
HTML son las siglas de HyperText Markup Language, que en español significa Lenguaje de Marcado de Hipertexto.
Se trata de un lenguaje que permite definir la estructura y el significado del contenido de una página web mediante un conjunto de elementos y etiquetas.
Por ejemplo, gracias a HTML podemos indicar al navegador que determinados contenidos son:
- Títulos y subtítulos.
- Párrafos de texto.
- Imágenes.
- Enlaces a otras páginas.
- Listas de elementos.
- Tablas de información.
- Formularios.
- Menús de navegación.
- Secciones y artículos.
Cuando visitamos una página web, el navegador interpreta el código HTML recibido y lo convierte en una estructura que permite representar su contenido en pantalla.
Dicho de otra forma, HTML indica al navegador qué es cada elemento de una página web.
¿HTML es un lenguaje de programación?
Esta es una de las preguntas más habituales cuando empezamos a estudiar desarrollo web.
La respuesta es que HTML no es un lenguaje de programación, sino un lenguaje de marcado.
Un lenguaje de programación, como JavaScript o PHP, permite expresar instrucciones, realizar cálculos, tomar decisiones y trabajar con distintas estructuras de control.
HTML, en cambio, se utiliza para definir la estructura y el significado del contenido.
Por ejemplo, podemos utilizar HTML para crear un botón, pero necesitaremos otras tecnologías, como JavaScript, si queremos programar determinadas acciones cuando el usuario haga clic sobre él.
Eso no significa que HTML sea menos importante.
De hecho, conocer bien HTML es fundamental para desarrollar páginas web correctamente estructuradas, accesibles y fáciles de mantener.
¿Para qué sirve HTML?
La principal función de HTML es organizar y estructurar el contenido de una página web para que los navegadores puedan interpretarlo.
Sin embargo, sus aplicaciones van mucho más allá de mostrar textos e imágenes.
1. Crear la estructura de una página web
HTML permite dividir una página en diferentes partes, como la cabecera, el menú de navegación, el contenido principal y el pie de página.
Por ejemplo, una página web puede tener la siguiente estructura:
- Una cabecera con el logotipo.
- Un menú para navegar entre secciones.
- Un título principal.
- Varios artículos.
- Una barra lateral.
- Un pie de página con información adicional.
Cada una de estas partes puede representarse mediante elementos HTML.
HTML, CSS, JavaScript y PHP: ¿qué diferencias existen?
Cuando empezamos a investigar sobre desarrollo web, encontramos nombres como HTML, CSS, JavaScript o PHP.
Es normal preguntarse qué hace cada uno y si necesitamos aprenderlos todos.
Para comprender sus diferencias, vamos a utilizar una analogía muy sencilla: la construcción de una casa.
HTML: la estructura de la casa
Imagina que vamos a construir una vivienda.
Lo primero que necesitamos es definir su estructura: dónde estarán las habitaciones, las puertas, las ventanas y las paredes.
HTML cumple una función similar en una página web.
Nos permite definir qué elementos existen y cómo se organiza el contenido.
CSS: el diseño y la decoración
Una vez construida la estructura, tenemos que decidir cómo queremos que se vea nuestra casa.
Podemos elegir los colores de las paredes, los materiales, la distribución visual de los muebles y otros aspectos estéticos.
En desarrollo web, esta es la función de CSS (Cascading Style Sheets).
CSS controla la presentación visual de los elementos HTML: colores, tamaños, tipografías, márgenes, distribuciones y adaptación a diferentes pantallas.
JavaScript: la electricidad y los mecanismos
Ahora imagina que queremos encender y apagar las luces, abrir una puerta automática o activar un sistema de climatización.
Necesitamos mecanismos que permitan interactuar con nuestra casa.
JavaScript cumple una función parecida en el navegador.
Permite añadir interactividad y comportamientos dinámicos a nuestras páginas web.
Por ejemplo, podemos utilizar JavaScript para desplegar un menú, comprobar los datos de un formulario o actualizar parte de una página sin tener que recargarla.
PHP: los sistemas internos de la casa
Finalmente, nuestra casa también necesita instalaciones que no siempre vemos, como las tuberías o los sistemas que distribuyen el agua.
Podemos utilizar esta comparación para entender la función de PHP.
PHP es un lenguaje que se ejecuta en el servidor y que permite procesar datos, realizar operaciones y generar contenido dinámico, entre muchas otras tareas.
Por ejemplo, con PHP podemos consultar información almacenada en una base de datos y generar el HTML que recibirá el navegador.
Resumen de las diferencias
| Tecnología | Función principal | Analogía |
|---|---|---|
| HTML | Estructurar el contenido | Estructura y distribución de la casa |
| CSS | Definir la presentación visual | Decoración, colores y acabados |
| JavaScript | Añadir interactividad y comportamiento | Interruptores y mecanismos |
| PHP | Procesar operaciones en el servidor | Instalaciones y sistemas internos |
Estas tecnologías se complementan, aunque no todas son necesarias para construir cualquier tipo de página web.
En este curso nos centraremos exclusivamente en HTML. Más adelante podrás profundizar en CSS, JavaScript y PHP en sus respectivos cursos.
¿Cómo funciona HTML en un navegador?
Cuando introduces una dirección web en tu navegador, se producen diferentes operaciones para obtener y mostrar el contenido solicitado.
De forma simplificada, el proceso es el siguiente:
- Escribes una dirección web o haces clic en un enlace.
- El navegador solicita el recurso correspondiente.
- El servidor devuelve una respuesta que puede incluir un documento HTML.
- El navegador analiza el HTML y construye una representación del documento llamada DOM (Document Object Model).
- El navegador utiliza esta estructura, junto con CSS y otros recursos necesarios, para representar la página en pantalla.
Es importante comprender que el navegador no muestra las etiquetas HTML literalmente como texto, sino que las interpreta para construir el documento.
Por ejemplo, si escribimos:
<h1>Bienvenido a CCH Tech Lab</h1>
<p>Estoy aprendiendo HTML desde cero.</p>Lenguaje del código: HTML, XML (xml)El navegador representará un título principal y, debajo, un párrafo.
Esta es la base del funcionamiento de HTML.
¿Qué son las etiquetas HTML?
Las etiquetas son una de las piezas fundamentales del lenguaje HTML.
Se utilizan para identificar los diferentes elementos que forman parte de una página.
La mayoría de los elementos HTML tienen una etiqueta de apertura, contenido y una etiqueta de cierre.
Por ejemplo:
<p>Este es mi primer párrafo en HTML.</p>Lenguaje del código: HTML, XML (xml)En este ejemplo encontramos tres partes:
<p>: etiqueta de apertura.Este es mi primer párrafo en HTML.: contenido.</p>: etiqueta de cierre.
El elemento <p> se utiliza para representar un párrafo.
Etiquetas HTML más utilizadas
Aunque HTML dispone de numerosos elementos, durante las primeras lecciones trabajaremos con los más habituales.
| Etiqueta | Función |
|---|---|
<h1> a <h6> | Definir encabezados de diferentes niveles |
<p> | Crear párrafos |
<a> | Crear enlaces |
<img> | Insertar imágenes |
<ul> | Crear listas no ordenadas |
<ol> | Crear listas ordenadas |
<li> | Definir elementos de una lista |
<div> | Agrupar contenido sin aportar semántica propia |
<span> | Agrupar contenido en línea sin aportar semántica propia |
<strong> | Indicar importancia o relevancia especial |
<em> | Dar énfasis al contenido |
No necesitas memorizar todas estas etiquetas desde el primer día.
A medida que avances en el curso aprenderás cuándo y cómo utilizar cada una.
¿Todas las etiquetas HTML tienen cierre?
No.
HTML también dispone de elementos vacíos, que no contienen contenido interno y no utilizan una etiqueta de cierre.
Algunos ejemplos habituales son:
<img src="foto.jpg" alt="Fotografía de ejemplo">
<br>
<hr>
<input type="text">Lenguaje del código: HTML, XML (xml)Cada uno de estos elementos tiene una función específica.
Por ejemplo, <br> representa un salto de línea y <hr> una separación temática.
Estructura básica de un documento HTML
Todos los documentos HTML que vamos a crear durante el curso compartirán una estructura inicial.
Vamos a ver un ejemplo completo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Mi primera página HTML</title>
</head>
<body>
<h1>Hola, mundo</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>Lenguaje del código: HTML, XML (xml)Aunque inicialmente pueda parecer demasiado código, la estructura es bastante sencilla.
¿Qué es la semántica en HTML?
Uno de los conceptos más importantes que aprenderemos durante el curso es la semántica HTML.
Cuando hablamos de semántica, nos referimos al significado que tiene cada elemento dentro de un documento.
No se trata únicamente de conseguir que una página se vea correctamente.
También debemos indicar qué representa cada parte de su contenido.
Por ejemplo, no es lo mismo utilizar un elemento genérico para agrupar contenido que utilizar un elemento diseñado específicamente para representar una navegación, un artículo o el contenido principal.
Ejemplo de HTML sin una estructura semántica clara
Imagina una página construida de la siguiente manera:
<div class="cabecera">
Mi página web
</div>
<div class="menu">
Inicio | Cursos | Contacto
</div>
<div class="contenido">
Bienvenido a mi web
</div>Lenguaje del código: HTML, XML (xml)Este código utiliza elementos <div> para agrupar diferentes bloques.
No necesariamente es incorrecto, pero los elementos por sí mismos no expresan qué función cumple cada sección.
La información semántica depende de otros mecanismos y del contexto.
Ejemplo de HTML semántico
Ahora vamos a representar una estructura similar utilizando elementos semánticos:
<header>
<h1>Mi página web</h1>
</header>
<nav aria-label="Navegación principal">
<a href="/">Inicio</a>
<a href="/cursos/">Cursos</a>
<a href="/contacto/">Contacto</a>
</nav>
<main>
<h2>Bienvenido a mi web</h2>
<p>Aprende desarrollo web desde cero.</p>
</main>Lenguaje del código: HTML, XML (xml)En este segundo ejemplo utilizamos elementos cuyo nombre describe su función.
<header> representa una cabecera, <nav> identifica una sección de navegación y <main> indica el contenido principal del documento.
La estructura resulta más expresiva y facilita que otras herramientas puedan comprender el propósito de cada elemento.
¿Por qué es importante utilizar HTML semántico?
Escribir HTML semántico aporta numerosas ventajas.
1. Mejora la accesibilidad
Una página correctamente estructurada facilita la navegación a personas que utilizan lectores de pantalla y otras tecnologías de asistencia.
Los elementos semánticos permiten identificar regiones importantes del documento y ayudan a comprender su organización.
Eso sí, la semántica por sí sola no garantiza que una página sea completamente accesible: también debemos tener en cuenta aspectos como el uso del teclado, los textos alternativos y los nombres accesibles.
2. Facilita el mantenimiento
Un documento con una estructura clara resulta más sencillo de comprender y modificar.
Esto es especialmente importante cuando trabajamos en proyectos grandes o con otros desarrolladores.
3. Ayuda a los motores de búsqueda
Los motores de búsqueda analizan diferentes señales para comprender el contenido de una página.
Utilizar encabezados correctamente organizados y elementos HTML adecuados contribuye a que la estructura del documento sea más fácil de interpretar.
Sin embargo, debemos tener presente que el HTML semántico no garantiza mejores posiciones en Google.
El posicionamiento SEO depende de numerosos factores, como la utilidad del contenido, la relevancia respecto a la búsqueda, la indexación y la experiencia de usuario.
4. Favorece las buenas prácticas de desarrollo
Aprender a utilizar las etiquetas correctamente desde el principio nos permite construir una base sólida para futuros proyectos.
En lugar de escribir código únicamente para conseguir un resultado visual, aprenderemos a crear documentos con una estructura lógica.
¿Qué herramientas necesito para aprender HTML?
Una de las grandes ventajas de HTML es que no necesitamos un ordenador especialmente potente ni instalar herramientas complicadas.
Para comenzar nuestro curso, utilizaremos principalmente un editor de código y un navegador web.
Visual Studio Code: nuestro editor de código
Durante el curso utilizaremos Visual Studio Code, también conocido como VS Code.
Es un editor de código gratuito desarrollado por Microsoft que permite trabajar con numerosos lenguajes y tecnologías.
Entre sus características encontramos:
- Resaltado de sintaxis.
- Autocompletado y sugerencias.
- Organización de archivos y carpetas.
- Extensiones para añadir funcionalidades.
- Terminal integrada.
- Integración con herramientas de control de versiones como Git.
Aunque existen otros editores perfectamente válidos, utilizaremos Visual Studio Code para mantener un entorno de trabajo común durante las lecciones.
Puedes descargarlo desde su página oficial:
No es necesario instalar una gran cantidad de extensiones para empezar.
De hecho, Visual Studio Code ya proporciona soporte para HTML sin necesidad de añadir extensiones externas.
Navegador web: donde veremos nuestras páginas
La segunda herramienta fundamental será un navegador web.
Podemos utilizar Google Chrome, Mozilla Firefox, Microsoft Edge u otros navegadores modernos.
Su función será interpretar los documentos HTML que creemos y mostrar el resultado.
Durante el curso podremos abrir nuestros archivos directamente en el navegador para comprobar cómo se representan.
Herramientas de desarrollador: DevTools
Los navegadores modernos incluyen herramientas de desarrollo, conocidas como Developer Tools o DevTools.
Estas herramientas nos permiten inspeccionar los elementos HTML de una página, analizar sus estilos, detectar errores y comprender mejor cómo funciona el navegador.
En muchos navegadores de escritorio podemos abrirlas utilizando la tecla F12 o mediante la opción Inspeccionar del menú contextual.
Aunque al principio no las utilizaremos en profundidad, es interesante conocer su existencia desde el primer día.
Serán especialmente útiles cuando comencemos a trabajar con CSS y JavaScript.
¿Necesito instalar un servidor web para aprender HTML?
No necesariamente.
Una de las primeras ventajas que descubrirás es que podemos crear un documento HTML y abrirlo directamente desde nuestro ordenador.
Por ejemplo, si guardamos un archivo llamado index.html, podemos abrirlo en el navegador sin instalar Apache, PHP ni una base de datos.
Esto es suficiente para realizar numerosos ejercicios básicos de HTML.
Más adelante, cuando trabajemos con determinadas funcionalidades, peticiones de red u otras tecnologías, utilizaremos un servidor local cuando sea necesario.
Por ahora, con Visual Studio Code y un navegador será suficiente.
¿Qué aprenderemos durante el curso de HTML?
El objetivo de este curso es que puedas pasar de no conocer HTML a crear documentos web correctamente estructurados por tu cuenta.
Para conseguirlo, iremos trabajando progresivamente diferentes temas:
- Introducción a HTML y herramientas necesarias.
- Estructura básica de un documento HTML.
- Encabezados, párrafos y formato semántico de texto.
- Enlaces y navegación.
- Imágenes y contenido multimedia.
- Listas y tablas HTML.
- Elementos semánticos y estructura de páginas.
- Formularios y sus controles.
- Accesibilidad y buenas prácticas.
- Creación de una pequeña página web utilizando los conocimientos adquiridos.
Además, este curso servirá como base para los futuros contenidos de CSS, JavaScript, PHP y desarrollo de proyectos web completos.
La idea es que cada tecnología tenga su propio espacio de aprendizaje y que puedas consultar sus lecciones cuando las necesites.
Preguntas frecuentes sobre HTML
HTML es una de las tecnologías más accesibles para comenzar en el desarrollo web.
Su sintaxis básica es relativamente sencilla y permite obtener resultados visibles desde los primeros ejercicios.
Sin embargo, dominar HTML correctamente requiere comprender conceptos como la semántica, la accesibilidad y la estructura de los documentos.
Sí.
Puedes crear páginas web que contengan textos, imágenes, enlaces, listas, tablas y formularios utilizando únicamente HTML.
Sin embargo, para personalizar su presentación visual y añadir determinadas funcionalidades, lo habitual es utilizar tecnologías complementarias como CSS y JavaScript.
HTML5 es el nombre popularmente utilizado para referirse a la evolución moderna de HTML que introdujo y consolidó importantes funcionalidades, como nuevos elementos semánticos y capacidades multimedia.
Actualmente HTML se desarrolla como un estándar vivo, conocido como HTML Living Standard, que continúa evolucionando.
Cuando hablamos de aprender HTML hoy, nos referimos a utilizar las características modernas del lenguaje.
El HTML semántico consiste en seleccionar los elementos según el significado y la función del contenido.
Por ejemplo, utilizar <nav> para una sección de navegación, <main> para el contenido principal y <article> para una pieza de contenido independiente.
Su uso favorece una estructura más comprensible y ayuda a la accesibilidad.
Para comenzar únicamente necesitas un editor de código, como Visual Studio Code, y un navegador moderno.
No es obligatorio instalar un servidor web, una base de datos ni herramientas complejas para los primeros ejercicios.
Aunque es posible estudiar estas tecnologías de manera paralela, resulta muy recomendable comenzar por los fundamentos de HTML.
Comprender la estructura de los documentos facilitará posteriormente el aprendizaje de CSS y JavaScript
Conclusión: HTML es el primer paso para aprender desarrollo web
A lo largo de esta primera lección hemos descubierto qué es HTML, para qué sirve y por qué es una tecnología fundamental para crear páginas web.
También hemos aprendido que HTML no es un lenguaje de programación, sino un lenguaje de marcado que permite estructurar y describir el contenido de un documento.
Hemos visto cómo se relaciona con CSS, JavaScript y PHP, qué son las etiquetas y los atributos, cómo se organiza un documento HTML y por qué debemos prestar atención a la semántica.
Finalmente, hemos conocido las herramientas que utilizaremos durante el curso y hemos creado un pequeño documento que podemos visualizar directamente en el navegador.
Si hay una idea con la que deberías quedarte de esta lección, es la siguiente:
HTML no consiste simplemente en colocar etiquetas. Consiste en organizar el contenido de una página web utilizando los elementos adecuados.
En la siguiente lección comenzaremos a trabajar más a fondo con nuestros documentos HTML y conoceremos su estructura paso a paso.
Continúa aprendiendo con el Curso de HTML desde cero de CCH Tech Lab.
Nos vemos en la siguiente lección.