≡En resumen
- Una etiqueta HTML marca qué es un contenido; el aspecto lo decide el CSS.
- La mayoría van por pares (apertura y cierre); algunas, como img o br, son elementos vacíos.
- Los atributos, como href, src o alt, añaden información a la etiqueta dentro de la apertura.
- Las etiquetas semánticas (header, nav, main, article, footer) ayudan a buscadores y lectores de pantalla.
- Para el SEO pesan sobre todo title, meta description, H1-H6, enlaces, alt de imágenes, canonical y meta robots.
01 ¿Qué son las etiquetas HTML?
El HTML lo creó Tim Berners-Lee en el CERN. Su primera descripción pública, el documento «HTML Tags» de 1991, recogía 18 elementos. Desde entonces el lenguaje ha pasado por HTML 2.0, 3.2, 4.01 y HTML5, que el W3C publicó como recomendación el 28 de octubre de 2014. Desde mayo de 2019 hay una sola versión oficial, el HTML Living Standard, que mantiene el WHATWG y se actualiza de forma continua.
Si estás empezando, la ficha de HTML básico explica la estructura mínima de un documento; aquí nos centramos en las etiquetas: cómo se escriben, cuáles son las más usadas y cuáles importan para el posicionamiento.
02 Cómo se escribe una etiqueta HTML: etiqueta, elemento y atributo
Tres palabras que se usan como sinónimos y no lo son. La etiqueta es la marca en sí (<a> de apertura y </a> de cierre). El elemento es el conjunto completo: apertura, contenido y cierre. El atributo es un par nombre-valor que va dentro de la apertura y añade información.
<a href="https://www.ejemplo.com/" target="_blank">Visita la web</a>
<a ...>: etiqueta de apertura.href="https://www.ejemplo.com/"ytarget="_blank": atributos.Visita la web: contenido.</a>: etiqueta de cierre, con barra.
Elemento vacío: <img src="logo.png" alt="Logotipo de la empresa"> no tiene contenido ni cierre.
- ✓Cierra siempre los elementos que lo necesitan y en orden inverso al de apertura.
- ✓Escribe las etiquetas en minúsculas: el HTML no distingue mayúsculas, pero es la convención.
- ✓Pon los valores de los atributos entre comillas.
- ✓No uses una etiqueta por su aspecto: si solo quieres letra grande o negrita, usa CSS.
- ✓Valida el código con el validador del W3C para detectar etiquetas mal cerradas.
03 Lista de etiquetas HTML básicas y para qué sirve cada una
| Etiqueta | Para qué sirve | Grupo |
|---|---|---|
| html, head, body | Raíz del documento, cabecera invisible y cuerpo visible | Estructura |
| title | Título del documento (pestaña y resultados de búsqueda) | Cabecera |
| meta | Metadatos: codificación, descripción, viewport, robots | Cabecera |
| link | Relaciona el documento con hojas de estilo, canonical, favicon | Cabecera |
| h1 a h6 | Encabezados de seis niveles | Texto |
| p | Párrafo | Texto |
| strong, em | Importancia y énfasis | Texto |
| a | Enlace a otra página, sección o archivo | Enlaces |
| ul, ol, li | Listas sin orden, ordenadas y sus elementos | Listas |
| img | Imagen (con atributos src y alt) | Multimedia |
| video, audio | Vídeo y audio nativos | Multimedia |
| table, tr, th, td | Tablas de datos, filas, cabeceras y celdas | Tablas |
| form, input, label, button | Formularios y sus campos | Formularios |
| div, span | Contenedores genéricos sin significado propio | Agrupación |
04 Etiquetas semánticas de HTML5
HTML5 añadió etiquetas que describen el papel de cada zona de la página en lugar de usar div para todo. No cambian el aspecto, pero hacen el código más legible y ayudan a las tecnologías de apoyo a saltar directamente al contenido. Son la base técnica de la accesibilidad que exige la normativa europea; si tu web vende a consumidores, te interesa saber qué exige la ley de accesibilidad web.
header
Cabecera de la página o de una sección: logotipo, título, buscador.
nav
Bloque de navegación principal, como el menú.
main
Contenido principal y único de la página; solo uno visible.
article
Contenido independiente, como una entrada de blog o una ficha.
section y aside
Secciones temáticas y contenido complementario, como una barra lateral.
footer
Pie de página o de sección: datos legales, contacto, enlaces.
05 Etiquetas HTML importantes para el SEO
| Etiqueta o atributo | Función SEO | Buena práctica |
|---|---|---|
| title | Principal candidato al título del resultado | Único por página, con la búsqueda principal |
| meta name=description | Posible fragmento bajo el título | Resumen útil que invite al clic |
| h1 | Tema principal visible de la página | Uno claro por página |
| h2 a h6 | Estructura y subtemas | Sin saltar niveles |
| a href | Rastreo y relevancia de enlaces | Anchors descriptivos, sin «haz clic aquí» |
| img alt | Descripción de imágenes para Google Imágenes y accesibilidad | Describe la imagen, no metas palabras clave |
| link rel=canonical | URL preferida entre duplicados | Absoluta y única |
| meta name=robots | Indexación y fragmentos | Solo cuando quieras restringir algo |
Dos de ellas tienen ficha propia porque generan muchas dudas: la etiqueta H1, el título visible de la página, y la meta robots, que decide si una página se indexa. Otras, como las meta keywords, siguen apareciendo en plantillas antiguas aunque Google no las usa desde hace años.
06 Cómo ver las etiquetas HTML de cualquier página
Todas las páginas que visitas están hechas de etiquetas HTML y puedes verlas sin instalar nada. Es la mejor forma de aprender: abre una web que te guste, mira cómo marca sus títulos, menús y formularios, y compáralo con lo que has leído aquí.
-
1
Código fuente
Pulsa Ctrl+U (Cmd+Opción+U en Mac) para ver el HTML tal como lo envía el servidor, con el head incluido.
-
2
Inspeccionar elemento
Haz clic derecho sobre cualquier parte de la página y elige Inspeccionar: el navegador marca la etiqueta exacta de ese bloque y sus atributos.
-
3
HTML renderizado
La pestaña Elements de las herramientas de desarrollo muestra el HTML después de ejecutar JavaScript, que puede diferir del código fuente.
-
4
Validador del W3C
Pega la URL en validator.w3.org para localizar etiquetas sin cerrar, atributos duplicados o elementos mal anidados.
07 Etiquetas HTML obsoletas que conviene retirar
El estándar declara no conformes varias etiquetas que se usaban para dar formato antes de que existiera el CSS. Los navegadores aún muestran muchas por compatibilidad, pero no deberías usarlas en una web nueva y conviene sustituirlas cuando aparecen en una web antigua.
| Obsoleta | Qué hacía | Usa en su lugar |
|---|---|---|
| font | Tipo, tamaño y color de letra | CSS: font-family, font-size, color |
| center | Centrar contenido | CSS: text-align o flexbox |
| marquee | Texto en movimiento | Animaciones CSS, si de verdad hacen falta |
| frame, frameset | Dividir la ventana en marcos | Maquetación con CSS; iframe solo para insertar contenido externo |
| big, strike, tt | Formato de texto | CSS o las etiquetas del, s o code según el significado |
Antes: <center><font size="6">Ofertas de verano</font></center>
Después: <h1 class="titular">Ofertas de verano</h1> y en el CSS .titular { text-align: center; font-size: 2.5rem; }. Mismo aspecto, pero ahora el navegador, Google y el lector de pantalla saben que es el título de la página. Este tipo de limpieza es habitual cuando abordamos un diseño web profesional sobre una web antigua o un proyecto de desarrollo web a medida.
Preguntas frecuentes sobre Etiquetas HTML
Son las marcas entre los signos menor y mayor que indican qué es cada parte de una página web: un título, un párrafo, un enlace, una imagen o un formulario.
La etiqueta es la marca de apertura o de cierre; el elemento es el conjunto de apertura, contenido y cierre. En el lenguaje diario se usan como sinónimos.
html, head, title, body, h1 a h6, p, a, img, ul, ol, li, div y span. Con ellas puedes construir una página sencilla completa.
Los elementos vacíos, como br, img, input, meta, link y hr. No tienen contenido, así que no necesitan etiqueta de cierre.
Sobre todo title, meta description, h1 a h6, los enlaces, el atributo alt de las imágenes, la canonical y la meta robots.
La referencia de MDN recoge algo más de un centenar de elementos vigentes, aunque en el día a día se usan unas pocas decenas. La lista oficial está en el HTML Living Standard del WHATWG.
No. Es un lenguaje de marcado: describe y estructura contenido, pero no tiene variables, condiciones ni bucles. La lógica la aporta JavaScript.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗