🔖 Qué son las etiquetas HTML y cómo funcionan
Cada página web que usted abre en un navegador parece, en su interior, un flujo continuo de texto. Pero el navegador, de alguna manera, lo convierte en encabezados, párrafos, imágenes, botones y formularios. El secreto detrás de esta transformación son las etiquetas HTML.
Los principiantes suelen tratar las etiquetas como hechizos mágicos: copiar, pegar y funciona. Pero sin entender su lógica, cualquier edición se convierte en un juego de adivinanzas. Una sola etiqueta de cierre faltante y el diseño se rompe mientras el formulario deja de enviar datos.
Veamos cómo funcionan internamente las etiquetas HTML, qué grupos de etiquetas existen y por qué son críticas para la optimización en motores de búsqueda. Sin rodeos, con ejemplos y un enfoque práctico.
💡 Resumen rápido:
- Una etiqueta consiste en un nombre entre corchetes angulares y atributos opcionales: el navegador los lee y decide cómo mostrar el contenido
- Las etiquetas emparejadas envuelven contenido (apertura + cierre), las etiquetas simples insertan un elemento en la página (imagen, salto de línea, metadatos)
- Las etiquetas semánticas de HTML5, header, nav, main, article, section y footer, describen el significado de los bloques, no solo su apariencia, lo cual es la base de la accesibilidad y el SEO
- Los motores de búsqueda analizan las etiquetas de encabezado (h1-h6), las etiquetas de enlace (
a), las etiquetas de imagen (imgcon alt) y las metaetiquetas para entender la estructura de la página y posicionarla por palabras clave - El anidamiento correcto de etiquetas es crítico: los navegadores perdonan errores, pero un HTML válido garantiza una visualización correcta en todos los dispositivos
Qué son las etiquetas HTML y para qué sirven
Una etiqueta HTML es un elemento de marcado encerrado entre corchetes angulares < y >. El navegador no muestra los corchetes al usuario: lee el nombre de la etiqueta y decide qué hacer con el contenido.
Tomemos un ejemplo simple: <p>Это абзац.</p>. El navegador ve la etiqueta de apertura <p>, entiende «comenzó un párrafo», muestra el texto y al llegar al cierre </p>, el párrafo termina. Todo lo que está entre ellas es el contenido del párrafo.
Las etiquetas resuelven tres tareas simultáneamente. Primero, describen la estructura del documento: dónde está el encabezado, dónde la navegación, dónde el texto principal. Segundo, controlan la visualización: negrita, cursiva, salto de línea. Tercero, incrustan recursos externos: imágenes, videos, scripts y hojas de estilo.
Anatomía de una etiqueta HTML
Cada etiqueta consta de tres partes: un nombre, atributos y, para las etiquetas emparejadas, el contenido entre los elementos de apertura y cierre.
El nombre de la etiqueta se escribe en caracteres latinos y define su función: p para párrafo, h1 para encabezado, a para enlace. Las mayúsculas o minúsculas no importan (<P> y <p> son lo mismo), pero el estándar recomienda minúsculas.
Los atributos refinan el comportamiento de la etiqueta. Tomemos <a href="https://example.com">: el atributo href le dice al navegador a dónde lleva el enlace. Y en <img src="photo.jpg" alt="Описание фото"> el atributo src especifica la ruta del archivo, mientras que alt proporciona una alternativa textual. Los valores de los atributos se encierran entre comillas y los atributos mismos se separan por espacios.
La regla más importante: las etiquetas emparejadas siempre se cierran. Usted abrió <div>, ciérrelo con </div>. Las etiquetas simples: img, br, input, meta, link, hr, no requieren un par de cierre. Y el orden de anidamiento: <p><strong>текст</strong></p> es correcto, <p><strong>текст</p></strong> es incorrecto (cruzado).
Principales grupos de etiquetas HTML
La especificación HTML5 contiene una multitud de etiquetas diferentes, pero para el trabajo práctico basta con conocer los grupos principales. Cubren el 95% de las tareas de un desarrollador frontend.
Etiquetas de estructura del documento
Cada página HTML comienza con un esqueleto:
<html>, el elemento raíz, envuelve todo el documento<head>, la sección de servicio: título de la pestaña, metaetiquetas, enlace a estilos y scripts<body>, el contenido visible de la página<title>, el texto en la pestaña del navegador (indexado por los motores de búsqueda)<meta>, codificación, descripción de la página, viewport para móviles
El usuario no ve estas etiquetas directamente, pero sin ellas la página no funcionará: el navegador no entenderá la codificación, el motor de búsqueda no leerá la descripción y el diseño móvil se romperá.
Etiquetas semánticas de HTML5
Antes de HTML5, los desarrolladores maquetaban todo con <div>s y clases. Un motor de búsqueda veía la página como un flujo continuo de <div>s; dónde estaba el menú, dónde el artículo, dónde el pie de página, no estaba claro. HTML5 resolvió esto con etiquetas semánticas:
<header>, la cabecera del sitio o de una sección (logotipo, menú, búsqueda)<nav>, un bloque de navegación (menú principal, migas de pan)<main>, el contenido único de la página (solo uno por documento)<article>, una unidad de contenido autocontenida (publicación, ficha de producto, comentario)<section>, un grupo temático de contenido con su propio encabezado<aside>, una barra lateral o contenido complementario<footer>, el pie de página: contactos, derechos de autor, mapa del sitio
La maquetación semántica no es un tributo a la moda. Los lectores de pantalla (programas para usuarios ciegos) se basan específicamente en <nav> y <main>, omitiendo repeticiones. Y los motores de búsqueda extraen señales clave de posicionamiento de los bloques semánticos.
Etiquetas de contenido textual
El conjunto básico para trabajar con texto:
- De
<h1>a<h6>: seis niveles de encabezado, del principal a los subordinados. En una página, exactamente un<h1>, el resto forma una jerarquía como el índice de un libro <p>, un párrafo, el contenedor principal para texto<strong>y<em>, énfasis semántico: importante y acentuado (no solo negrita y cursiva)<blockquote>, una cita con la fuente especificada mediante el atributocite<pre>y<code>, texto preformateado y un fragmento de código
Aparte está <span>, un contenedor en línea sin significado inherente. Se usa para aplicar estilo de forma dirigida a un fragmento de texto dentro de un párrafo.
Etiquetas de enlace y medios
<a href="URL">анкор</a>, la etiqueta más poderosa de internet. Son los enlaces los que conectan las páginas en una sola web. El atributo target="_blank" abre el enlace en una nueva pestaña, rel="nofollow" le indica al motor de búsqueda que no transfiera autoridad a la página de destino.
Para imágenes, <img src="путь" alt="описание">. El atributo alt es crítico: los lectores de pantalla y los motores de búsqueda lo leen. Sin alt, una imagen simplemente no existe para ellos. Técnicamente, src puede apuntar a cualquier URL pública, pero es mejor almacenar las imágenes localmente, lo cual es más rápido y fiable.
<video> y <audio> incrustan medios con controles nativos. Y <figure> con <figcaption> agrupan una imagen con un pie, para que el motor de búsqueda entienda que son un par relacionado.
Etiquetas de listas y tablas
Las listas son de tres tipos: <ul> (no ordenada), <ol> (ordenada) y <dl> (lista de definición con pares <dt>-término y <dd>-descripción).
Las tablas se construyen en cascada: <table> → <tr> (fila) → <th> (encabezado de columna) o <td> (celda de datos). <caption> da un título a toda la tabla, <thead>/<tbody>/<tfoot> agrupan lógicamente las filas. Y sí, las tablas aún se usan para datos, no las maquete con divs.
Etiquetas de formulario
<form> recoge campos de entrada y los envía al servidor usando el método GET o POST. Dentro de un formulario, funcionan los siguientes:
<input>, un campo universal (texto, contraseña, email, número, fecha, archivo, el tipo se establece con el atributotype)<textarea>, texto multilínea<select>con<option>, una lista desplegable<button>, un botón de envío o reinicio<label>, una etiqueta de texto vinculada a un campo mediante el atributofor
El emparejamiento de <label for="email"> con <input id="email"> es imprescindible para la accesibilidad: al hacer clic en la etiqueta, el foco se mueve al campo.
Cómo afectan las etiquetas HTML al SEO
Los robots de búsqueda no ven una página con sus ojos. Leen el código fuente, y las etiquetas se convierten en su único sistema de coordenadas.
Las etiquetas de encabezado (h1-h6) forman el esqueleto semántico. El motor de búsqueda entiende la jerarquía: <h1> establece el tema principal de la página, <h2> destaca los subtemas clave, <h3> revela detalles. Cuanto más fielmente reflejen los encabezados el contenido y contengan palabras clave, mayores serán las posibilidades de posicionamiento.
La etiqueta <title> (en <head>) es lo que el usuario ve en los resultados de búsqueda. Esto no es h1, aunque a menudo coinciden en significado. Un <title> bien elaborado contiene la palabra clave más cerca del principio y está escrito en lenguaje natural; un título atractivo genera más clics en las mismas posiciones.
La etiqueta <meta name="description"> forma el fragmento descriptivo bajo el título en los resultados de búsqueda. No afecta directamente al posicionamiento, pero una descripción bien redactada aumenta el CTR, y los factores de comportamiento luego trabajan a favor de la posición.
La etiqueta <a> con el atributo href es la base del enlazado interno. Los enlaces internos distribuyen la autoridad entre las páginas del sitio, los externos la transfieren. El texto ancla del enlace (el texto entre <a> y </a>) le sugiere al motor de búsqueda de qué trata la página de destino.
El atributo alt en las imágenes es otra fuente de palabras clave. Las imágenes sin alt no participan en la búsqueda de imágenes y no le dan al motor de búsqueda contexto adicional sobre la página.
Las etiquetas semánticas de HTML5 ayudan al robot a separar el contenido de la navegación y la publicidad. <main> y <article> obtienen prioridad durante la indexación, mientras que <nav> y <aside> no. Esto ahorra presupuesto de rastreo.
Video: Etiquetas HTML desde cero
Para reforzar la teoría con la práctica, vea esta lección en inglés, demuestra visualmente cómo un navegador procesa las etiquetas HTML en tiempo real:
⁉️🤔 Preguntas frecuentes
¿En qué se diferencia una etiqueta emparejada de una etiqueta simple?
Una etiqueta emparejada envuelve contenido y requiere cierre:
<p>текст</p>. Una etiqueta simple inserta un elemento sin contenido: img, br, input. En HTML5, la barra de cierre (<br />) es opcional pero está permitida. La regla es simple: si hay contenido entre las etiquetas, la etiqueta es emparejada; si no, es simple.
¿Cuántos <h1> puede haber en una página?
Exactamente uno. La especificación HTML5 permite técnicamente múltiples
<h1>si están separados en<article>y<section>, pero los motores de búsqueda aún funcionan mejor con un solo encabezado principal. Ponga un<h1>por página, no se equivocará.
¿Qué sucede si no cierra una etiqueta?
El navegador intentará «adivinar» dónde pretendía cerrarla y construirá el árbol DOM por su cuenta. Pero diferentes navegadores adivinan de manera diferente: en Chrome la página puede verse normal, mientras que en Safari o en un lector de pantalla se desmoronará. Por lo tanto, un HTML válido con cierre correcto de etiquetas no es pedantería, es un seguro contra sorpresas.
¿En qué se diferencia <b> de <strong>, y <i> de <em>?
<b>e<i>son puramente visuales: negrita y cursiva.<strong>y<em>son semánticos: «esto es importante» y «énfasis en esto». El motor de búsqueda y el lector de pantalla tienen en cuenta las etiquetas semánticas al analizar la página, mientras que las visuales se ignoran. Si está enfatizando significado, use<strong>y<em>; si es puramente por diseño, use<b>e<i>.
¿Es obligatorio escribir alt para todas las imágenes?
Para imágenes significativas, es obligatorio: esto es tanto accesibilidad como SEO. Para las decorativas (patrón de fondo, separador), use un
alt=""vacío para que el lector de pantalla las omita. Una imagen sin ningún atributoaltes un error grave: el validador HTML lo señalará.
¿Qué etiquetas son las más importantes para el SEO?
Cinco críticas:
<title>(el título en los resultados de búsqueda),<meta name="description">(el fragmento descriptivo),<h1>-<h6>(estructura y palabras clave),<a>(enlazado interno y externo),<img alt="...">(búsqueda de imágenes y contexto adicional). Si estas cinco están bien hechas, los cimientos del SEO técnico ya están puestos.
Qué recordar sobre las etiquetas HTML
Las etiquetas HTML no son magia ni sintaxis para unos pocos elegidos. Es un sistema de reglas, comprensible tanto para personas como para máquinas. El navegador convierte las etiquetas en una página visual, el motor de búsqueda en señales de posicionamiento, el lector de pantalla en una voz para un usuario ciego. El mismo marcado sirve a tres interfaces completamente diferentes.
Lo principal para recordar: cierre las etiquetas emparejadas, mantenga un anidamiento correcto, use etiquetas semánticas de HTML5 en lugar de <div>s anónimos y siempre proporcione alt para las imágenes significativas. Estos cuatro hábitos al inicio ahorran horas de depuración más adelante.
Si el material le fue útil, guárdelo en marcadores, volverá cuando necesite refrescar la sintaxis antes de un trabajo de maquetación.
Un equipo profesional de escritores y editores especializados en la creación de contenido de calidad.