≡En resumen
- HTML no es un lenguaje de programación: es un lenguaje de marcado que describe la estructura y el significado del contenido.
- Todo documento HTML básico tiene la misma estructura: doctype, html, head y body.
- Un elemento se forma con una etiqueta de apertura, el contenido y una etiqueta de cierre; los atributos añaden información extra.
- Con una docena de etiquetas (títulos, párrafos, enlaces, imágenes, listas) ya puedes crear una página completa.
- Un HTML semántico y bien jerarquizado ayuda al SEO y a la accesibilidad desde el primer día.
01 ¿Qué es HTML básico (HTML basics)?
HTML significa HyperText Markup Language, «lenguaje de marcado de hipertexto». Lo ideó Tim Berners-Lee en el CERN, que lo especificó a finales de 1990 junto al primer navegador y servidor web. La primera descripción pública, el documento «HTML Tags» de 1991, describía solo 18 elementos. Hoy HTML no tiene versiones numeradas: el WHATWG mantiene un estándar vivo (Living Standard) que se actualiza de forma continua, y desde 2019 es la única referencia oficial.
HTML trabaja junto a otros dos lenguajes: CSS se ocupa del aspecto (colores, tipografías, maquetación) y JavaScript del comportamiento (interacciones, datos dinámicos). HTML es la base: sin él no hay nada que decorar ni programar.
| Lenguaje | Función | Ejemplo |
|---|---|---|
| HTML | Estructura y significado del contenido | Esto es un título, esto un párrafo, esto un botón |
| CSS | Presentación visual | El título es azul y mide 32 píxeles |
| JavaScript | Comportamiento e interactividad | Al pulsar el botón se abre un formulario |
02 Elementos, etiquetas y atributos: la sintaxis básica
Un elemento HTML se compone de una etiqueta de apertura, el contenido y una etiqueta de cierre, que lleva una barra: <p>Hola, mundo</p>. Los atributos van dentro de la etiqueta de apertura y añaden información que no se muestra como contenido: <a href="https://www.ejemplo.com">Visita la web</a>, donde href indica el destino del enlace.
Anidamiento
Los elementos pueden ir unos dentro de otros, pero se cierran en orden inverso: primero el de dentro, después el de fuera.
Elementos vacíos
Algunos no tienen contenido ni etiqueta de cierre, como img (imagen), br (salto de línea) o meta.
Atributos globales
id, class, lang o title se pueden usar en casi cualquier elemento para identificarlo o darle estilo.
Mayúsculas y minúsculas
HTML no distingue entre ellas en las etiquetas, pero la convención es escribirlas siempre en minúsculas.
03 Estructura básica de un documento HTML
Todas las páginas comparten el mismo esqueleto. Este es un documento HTML mínimo y válido:
<!DOCTYPE html><html lang="es"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Mi primera página</title></head><body> <h1>Hola, mundo</h1> <p>Este es mi primer párrafo.</p></body></html>
| Parte | Para qué sirve |
|---|---|
| !DOCTYPE html | Preámbulo obligatorio: indica al navegador que use el modo estándar |
| html (con lang="es") | Elemento raíz que envuelve todo; el atributo lang declara el idioma |
| head | Información que no se ve en la página: título, codificación, CSS, metadatos |
| meta charset="utf-8" | Codificación de caracteres, para que tildes y eñes se vean bien |
| meta name="viewport" | Hace que la página se adapte al ancho del móvil |
| title | Título de la pestaña del navegador y, normalmente, del resultado en Google |
| body | Todo el contenido visible: textos, imágenes, enlaces, formularios |
04 Las etiquetas HTML básicas que más vas a usar
| Etiqueta | Uso | Ejemplo de uso |
|---|---|---|
| h1 a h6 | Títulos y subtítulos, de mayor a menor importancia | Un h2 con el texto «Nuestros servicios» |
| p | Párrafo de texto | Un párrafo con el horario de apertura |
| a | Enlace; el destino va en el atributo href | Un enlace a la página de contacto |
| img | Imagen; necesita los atributos src (archivo) y alt (texto alternativo) | El logo, con alt="Logo de la tienda" |
| ul, ol, li | Listas sin orden, ordenadas y cada uno de sus elementos | La lista de productos de la carta |
| strong, em | Énfasis fuerte y énfasis | Resaltar la palabra «Oferta» |
| div, span | Contenedores genéricos para agrupar y dar estilo | Una tarjeta de producto |
| header, nav, main, footer | Etiquetas semánticas de estructura de la página | El menú principal dentro de nav |
| form, input, button | Formularios, campos y botones | Un formulario de contacto con botón Enviar |
| table, tr, td | Tablas de datos: tabla, fila y celda | Una tabla de precios |
Con estas etiquetas cubres la mayoría de páginas sencillas. Tienes el resto explicadas una a una en nuestra ficha de etiquetas HTML, y las tablas, que tienen su propia lógica de filas y celdas, en la de HTML table.
05 Cómo crear tu primera página HTML paso a paso
-
1
Abre un editor de texto
Sirve el Bloc de notas o TextEdit en modo texto plano, aunque es más cómodo un editor de código gratuito como Visual Studio Code.
-
2
Escribe el esqueleto
Copia la estructura básica del apartado anterior y cambia el título y el contenido.
-
3
Guarda el archivo
Llámalo index.html y guárdalo con codificación UTF-8.
-
4
Ábrelo en el navegador
Haz doble clic sobre el archivo: se abrirá en tu navegador predeterminado.
-
5
Enlaza CSS y JavaScript
Añade en el head una etiqueta link con rel="stylesheet" que apunte a tu archivo CSS y, antes de cerrar body, una etiqueta script cuyo atributo src apunte a tu JavaScript.
-
6
Revisa el código
Pulsa F12 o «Inspeccionar» en el navegador para ver el HTML y detectar errores.
06 HTML básico, SEO y accesibilidad
Google y los lectores de pantalla leen tu HTML, no tu diseño. Por eso un marcado limpio y semántico (usar cada etiqueta para lo que significa) es el primer paso del SEO técnico y de la accesibilidad web, que desde el 28 de junio de 2025 la normativa europea exige a muchos servicios digitales, como las tiendas online.
- ✓Un solo h1 por página que describa el tema principal, y subtítulos h2 y h3 en orden.
- ✓Un title único y descriptivo en cada página.
- ✓Texto alternativo (alt) en todas las imágenes que aportan información.
- ✓Enlaces con texto descriptivo, no «haz clic aquí».
- ✓Etiquetas semánticas (header, nav, main, article, footer) en lugar de div para todo.
- ✓Atributo lang en la etiqueta html para indicar el idioma.
- ✓Botones reales (button) para acciones, no div con JavaScript.
Una asesoría hizo su primera web a mano con lo aprendido en un curso: funcionaba, pero todos los títulos eran div con letra grande y las imágenes no tenían alt. Google no distinguía los servicios y la página no era accesible. Al rehacer la plantilla con h1, h2, alt y etiquetas semánticas, sin cambiar el aspecto visual, el contenido pasó a ser comprensible para buscadores y lectores de pantalla.
Cuando el proyecto crece, lo habitual es pasar a un CMS o a un diseño web a medida hecho por profesionales, y si necesitas funciones propias (reservas, áreas de cliente, integraciones), a un desarrollo web a medida. Pero todo sigue descansando en el mismo HTML básico.
Preguntas frecuentes sobre HTML Basics
Es el conjunto de conceptos mínimos para escribir HTML: la estructura de un documento (doctype, html, head y body), la sintaxis de elementos, etiquetas y atributos y las etiquetas más comunes, como títulos, párrafos, enlaces, imágenes y listas.
No. HTML es un lenguaje de marcado: describe la estructura y el significado del contenido, pero no tiene variables, condiciones ni bucles. La lógica se programa con JavaScript o en el servidor.
Lo esencial se aprende en pocos días de práctica: con una docena de etiquetas ya puedes montar una página sencilla. Dominar la semántica, la accesibilidad y su combinación con CSS lleva más tiempo.
HTML5 fue la gran revisión del lenguaje, recomendación del W3C desde 2014, que añadió etiquetas semánticas, vídeo y audio nativos y nuevos formularios. Hoy se habla simplemente de HTML, mantenido como estándar vivo por el WHATWG.
Cualquier editor de texto plano y un navegador. Un editor de código gratuito como Visual Studio Code facilita el trabajo con resaltado de sintaxis y autocompletado.
html, head, title y body para la estructura; h1 a h6 para títulos; p para párrafos; a para enlaces; img para imágenes; y ul, ol y li para listas.
Fuentes consultadas
Sobre el autor
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil y artículos → Ver perfil en LinkedIn ↗