Aunque herramientas como nuestro Creador de Páginas Web permiten diseñar y publicar un proyecto en línea sin escribir una sola línea de código HTML, comprenderlo y saber cuándo y para qué usarlo les da control.
Saber qué hacen las etiquetas de una página web en HTML les ayudará a corregir detalles, mejorar la accesibilidad y el SEO y a comunicarse mejor con desarrolladores. Por eso vamos a mostrarles las más importantes, para qué sirven y en qué casos conviene utilizarlas.
¿Qué es HTML y para qué sirve?
HTML significa HyperText Markup Language, y es el lenguaje estándar que describe la estructura de una página web. No es programación porque no ejecuta lógica: las etiquetas HTML para páginas web indican qué es cada parte del contenido (títulos, párrafos, enlaces, imágenes, formularios).
Así, cuando el navegador lee esas marcas, es capaz de construir el documento que aparece en pantalla. Después, CSS se encarga del aspecto visual y JavaScript de la interacción.
Por eso los códigos HTML son la base sobre la que se apoya toda página web, porque aportan significado y ayudan a los lectores de pantalla y a buscadores.
Fundamentos de HTML
Antes de memorizar etiquetas de código HTML, es importante que dominen unas reglas simples. Estos fundamentos les permitirán leer cualquier plantilla, comprender por qué algo ‘se rompe’ y escribir código HTML limpio desde cero.
- Elementos y etiquetas: Un elemento suele tener etiqueta de apertura y cierre que hacen que el contenido quede ‘envuelto’ dentro. Algunos no se cierran, como ‘img’.
- Atributos: Añaden información extra (por ejemplo, ‘href’ o ‘src’) y se escriben como ‘nombre="valor"’. Usen comillas y valores claros.
- Anidamiento correcto: Coloca elementos dentro de otros sin cruzar cierres para mantener una jerarquía y evitar problemas.
- Estructura mínima: ‘<!doctype html>’, ‘<html>’, ‘<head>’ y ‘<body>’ guían al navegador y los lectores de pantalla.
- Semántica: Elijan etiquetas para código HTML por significado (títulos, listas, navegación), no solo por apariencia, así mejorarán la accesibilidad y el mantenimiento.
10 etiquetas HTML y para qué sirven
Existen muchos elementos HTML para estructura, metadatos, texto, multimedia o formularios, pero dominar un grupo pequeño de etiquetas HTML para crear una página web les permitirá crear la mayoría de los sitios que deseen.
<HTML>, <head>, <title>
Estas tres etiquetas forman el marco del documento y le dicen al navegador cómo tratar la página, además de ayudar a buscadores y herramientas de accesibilidad a comprenderlo.
Son obligatorias en cualquier HTML completo y se escriben al inicio del archivo, antes del contenido visible.
- <html>: Elemento raíz que envuelve toda la página y normalmente contiene ‘<head>’ y ‘<body>’.
- <head>: Guarda metadatos y recursos (CSS, scripts, meta) y se usa una sola vez, arriba.
<title>: Define el título del documento, por lo que aparece en la pestaña y en marcadores, dentro del ‘<head>’.
<body>
El elemento ‘<body>’ contiene todo lo que el usuario ve y con lo que interactúa: textos, imágenes, enlaces, formularios, etc. Se coloca dentro de ‘<html>’ y después de ‘<head>’. En un documento completo solo debe existir un ‘<body>’, que es el que agrupa el contenido principal del sitio.
<h1> - <h6>
Las etiquetas ‘<h1>’ a ‘<h6>’ definen encabezados, desde el nivel más importante al menos relevante. Se usan para estructurar secciones y crear jerarquía de lectura. Utilicen ‘<h1>’ para el título principal y los demás para subsecciones, manteniendo un orden lógico sin saltos entre niveles consecutivos.
<p>
El elemento ‘<p>’ marca un párrafo, un bloque de texto con separación automática respecto a otros bloques. Utilícenlo para contenido escrito normal (descripciones, explicaciones, noticias..) y colóquenlo dentro de ‘<body>’.
<a>
La etiqueta ‘<a>’ crea un enlace (hipervínculo) hacia una URL, un archivo, una sección de la misma página o un correo. Su atributo clave es ‘href’, que indica el destino. Usen este código HTML para navegación y llamadas a la acción, describiendo el texto del enlace con claridad.
<img>
El elemento ‘<img>’ inserta una imagen en el documento sin etiqueta de cierre. Normalmente requiere ‘src’ (o ‘srcset’) para indicar la ruta del archivo. Añadan siempre ‘alt’ con una descripción, ya que mejora la accesibilidad y sirve de reemplazo si no carga. Utilicen esta etiqueta HTML dentro de ‘<body>’ en el contenido.
<ul>, <ol>, <li>
Estas etiquetas HTML para páginas web sirven para crear listas claras, muy útiles en menús, pasos, inventarios y preguntas frecuentes. ‘<ul>’ agrupa elementos sin orden numérico, ‘<ol>’ los presenta en secuencia (normalmente numerada) y ‘<li>’ es cada ítem, que siempre debe ir dentro de una lista.
- <ul>: Úsenla cuando el orden no importe, como características, recursos o enlaces laterales.
- <ol>: Es rcomendable usarla para instrucciones, recetas o rankings, en los que la secuencia es importante.
- <li>: Escriban aquí el contenido de cada punto, incluso texto o enlaces breves.
<div> y <span>
‘<div>’ y ‘<span>’ son contenedores genéricos que no añaden significado por sí mismos, pero sirven para agrupar contenido cuando no hay una etiqueta semántica más adecuada.
Suelen combinarse con ‘class’ o ‘id’ para aplicar estilos (CSS) o seleccionar elementos con JavaScript. Usen ‘<div>’ para bloques completos (secciones, columnas, tarjetas) y ‘<span>’ para fragmentos dentro de una línea.
- <div>: Agrupa contenido en bloque y facilita la maquetación con Flexbox o Grid.
<span>: Agrupa contenido en línea para dar formato puntual o marcar idioma (lang).
<form>
La etiqueta ‘<form>’ define una sección con controles interactivos para recopilar datos y enviarlos, por ejemplo, a un servidor. Se usa en registros, compras o contacto. Dentro se colocan campos como ‘<input>’ y botones.
<input>
Usar el código HTML ‘<input>’ permite crear controles para que el usuario introduzca datos en formularios: texto, email, contraseña, casillas, fechas... Su comportamiento depende del atributo ‘type’. Se utiliza dentro de ‘<form>’ (o asociado a uno) y suele llevar ‘name’ para enviar el valor de forma segura.
Ejemplos de Código HTML
Ver el código HTML en acción es la forma más rápida de entenderlo, por eso vamos amostrarles algunos ejemplos con fragmentos típicos que encontrarán a diario en blogs, tiendas en línea o páginas corporativas simples.
- En un menú, un enlace a otra sección: ‘<a href="#precios">Ver precios</a>’. Utilícenlo para navegar sin recargar y escriban un texto de enlace claro.
- En un artículo, una imagen ilustrativa: ‘<img src="/img/zapato.jpg" alt="Zapato negro">’. El alt describe la imagen y ayuda a lectores de pantalla si no carga.
- En un producto, lista de beneficios: ‘<ul><li>Envío gratis</li><li>Devolución 30 días</li></ul>’. Permite escanear rápido y ordena la información sin depender de estilos visuales extra.
Cómo crear un documento HTML básico
- Comenzar con <!DOCTYPE html> para definir el tipo de documento.
- Usar la etiqueta <html> para iniciar el documento.
- Dentro de <html>, colocar <head>. Aquí pueden incluir el título de su página con <title>Mi Página Web</title>.
- Después de <head>, añadir la etiqueta <body>.
- Dentro de <body>, pueden agregar contenido como <p>¡Hola, mundo!</p> para un párrafo.
- Cerrar las etiquetas </body> y </html> para finalizar el documento.
Buenas prácticas al escribir HTML
Un código HTML escrito se lee como un esquema claro y reduce errores. Además, facilita el SEO y la accesibilidad, incluso antes de aplicar CSS o JavaScript.
- Validar el documento con el W3C Markup Validator para detectar etiquetas mal cerradas.
- Usar elementos semánticos cuando existan, evitando abusar de ‘div’ si hay alternativas claras para secciones.
- Mantener una jerarquía de títulos ordenada (h1, h2, h3) para lectura y SEO correctos.
- Describir imágenes con un ‘alt’ útil y enlaces con texto informativo, sin provocar clics genéricos.
Comentar lo justo para entender el código rápido sin dudas en el futuro.
Errores comunes al usar HTML
Los fallos en HTML no siempre rompen la página, ya que el navegador intenta corregirlos. Aun así, pueden afectar a la accesibilidad, el SEO o los formularios, por eso les conviene saber cuáles son, ¡es la mejor forma de evitar caer en ellos!
- Omitir ‘<!doctype html>’ o anidar mal etiquetas activa ‘quirks mode’ y provoca comportamientos impredecibles en navegadores.
- No usar etiquetas semánticas y depender de ‘div’ reduce la información en el árbol de accesibilidad.
- Saltarse niveles de encabezado (h1-h4) complica la navegación para lectores de pantalla y buscadores.
- Imágenes sin ‘alt’, lo que hace que el contenido se pierda para usuarios con lector de pantalla activo.
- Enlaces con texto vago, como ‘clic aquí’ o ‘ver más’, dificultan entender el destino fuera de contexto rápido.
- Olvidar ‘name’, ‘required’ o ‘autocomplete’ en formularios empeora la experiencia del usuario (UX).
Conclusión: dominar las etiquetas HTML básicas
Dominar las etiquetas para código HTML básicas permite entender cualquier plantilla, ajustar contenido sin miedo y detectar errores rápido. También mejora el modo en que organizan la información: títulos, listas legibles, enlaces claros e imágenes accesibles.
Ese orden ayuda a buscadores, lectores de pantalla y a su propio equipo cuando mantiene el sitio. Incluso si usan un creador visual como el nuestro, saber HTML les dará autonomía para optimizar detalles, integrar formularios y publicar con confianza.
