Tabla de etiquetas HTML

Esta página es un índice de referencia rápida de etiquetas HTML, agrupadas por propósito: estructura básica, formato de texto, formularios, tablas, multimedia, semántica, metadatos y scripting. Cada fila enlaza a un capítulo completo con ejemplos, atributos y compatibilidad con navegadores. Úsala para saber qué hace una etiqueta y dónde se utiliza, y luego sigue el enlace para obtener más detalles.

En la tabla aparecen dos marcadores:

(HTML5) — el elemento fue introducido en HTML5. Forma parte del estándar actual y es seguro usarlo en navegadores modernos.
(Obsolete) — el elemento ha sido eliminado del estándar HTML. Los navegadores aún pueden renderizarlo por compatibilidad con versiones anteriores, pero no deberías usarlo en código nuevo. El reemplazo recomendado se indica en la descripción. Consulta Etiquetas HTML obsoletas para ver la lista completa y las alternativas modernas.

La mayoría de las etiquetas vienen en pares: una etiqueta de apertura como <p> y una de cierre </p> que envuelven su contenido. Unas pocas (por ejemplo <br>, <hr> e <img>) son elementos vacíos sin etiqueta de cierre. Para una explicación más detallada de cómo se relacionan las etiquetas, los elementos y los atributos, consulta Elementos HTML y Atributos HTML.

Etiquetas básicas

Etiqueta	Descripción
`<!DOCTYPE>`	Establece el tipo de documento.
`<html>`	Define un documento HTML.
`<head>`	Contiene información general (metadatos) sobre el documento.
`<title>`	Establece el título del documento.
`<body>`	Especifica el cuerpo del documento.
`<h1>` to `<h6>`	Define los encabezados HTML.
`<p>`	Define un párrafo.
`<br>`	Especifica un salto de línea.
`<hr>`	Inserta una línea horizontal o define una separación temática.
<!-- ... -->	Define un comentario.

Etiquetas de formato

Las etiquetas de formato marcan el significado o la apariencia de fragmentos de texto. Muchas etiquetas presentacionales antiguas aquí son (Obsolete) — usa CSS para el estilo visual en su lugar.

Etiqueta	Descripción
`<abbr>`	Define una abreviatura o acrónimo.
`<acronym>`	(Obsolete) Define un acrónimo. Usa `<abbr>` en su lugar.
`<address>`	Especifica información de contacto del autor/propietario de un documento o artículo.
`<b>`	Muestra el texto en negrita.
`<bdi>`	(HTML5) Aísla un fragmento de texto de su entorno para el formato de texto bidireccional.
`<bdo>`	Anula la dirección de texto actual.
`<big>`	(Obsolete) Muestra el texto en un tamaño más grande. Usa CSS en su lugar.
`<blockquote>`	Define una cita larga (a nivel de bloque).
`<center>`	(Obsolete) Muestra el contenido centrado. Usa CSS en su lugar.
`<cite>`	Marca una referencia (título, autor o URL) a una obra creativa citada.
`<code>`	Define un fragmento de código informático.
`<del>`	Especifica texto eliminado.
`<dfn>`	Marca la instancia definitoria de un término.
`<em>`	Especifica texto enfatizado.
`<font>`	(Obsolete) Establece la fuente, el color y el tamaño del texto. Usa CSS en su lugar.
`<i>`	Muestra el texto en cursiva.
`<ins>`	Define texto insertado en un documento.
`<kbd>`	Especifica entrada de teclado.
`<mark>`	(HTML5) Resalta/marca texto.
`<meter>`	(HTML5) Define una medida escalar dentro de un rango conocido (un indicador).
`<pre>`	Define texto preformateado.
`<progress>`	(HTML5) Indica el progreso de completado de una tarea (barra de progreso).
`<q>`	Define una cita corta en línea.
`<rp>`	(HTML5) Proporciona paréntesis de reserva para navegadores que no soportan anotaciones ruby.
`<rt>`	(HTML5) Define la pronunciación de caracteres en una anotación ruby (para tipografía de Asia Oriental).
`<ruby>`	(HTML5) Representa una anotación ruby (para tipografía de Asia Oriental).
`<s>`	Muestra texto que ya no es preciso en estilo tachado.
`<samp>`	Define la salida de muestra de un programa informático.
`<small>`	Muestra el texto en un tamaño más pequeño (comentarios secundarios, letra pequeña).
`<strike>`	(Obsolete) Define texto tachado. Usa `<del>` o `<s>` en su lugar.
`<strong>`	Define texto de gran importancia.
`<sub>`	Define texto en subíndice.
`<sup>`	Define texto en superíndice.
`<time>`	(HTML5) Define una fecha/hora.
`<tt>`	(Obsolete) Muestra el texto en estilo teletipo (monoespaciado). Usa CSS en su lugar.
`<u>`	Muestra texto con una anotación no textual, subrayado por defecto.
`<var>`	Define una variable.
`<wbr>`	(HTML5) Define una posible oportunidad de salto de línea.

Etiquetas de formulario

Etiqueta	Descripción
`<form>`	Especifica un formulario HTML para la entrada del usuario.
`<input>`	Define un control de entrada.
`<textarea>`	Define un control de entrada de texto multilínea (área de texto).
`<button>`	Define un botón seleccionable dentro de un formulario HTML.
`<select>`	Define una lista de selección dentro de un formulario.
`<optgroup>`	Agrupa opciones relacionadas en una lista de selección.
`<option>`	Define una opción en una lista de selección.
`<label>`	Define una etiqueta para un elemento `<input>`.
`<fieldset>`	Agrupa elementos relacionados en un formulario.
`<legend>`	Define un título para un elemento `<fieldset>`.
`<datalist>`	(HTML5) Contiene un conjunto de opciones predefinidas para un elemento `<input>`.
`<keygen>`	(Obsolete) Generaba un par de claves para el envío de formularios. Eliminado del estándar; sin reemplazo directo.
`<output>`	(HTML5) Define el resultado de un cálculo.

Etiquetas de marcos

Los framesets dividen la ventana del navegador en documentos independientes. Son (Obsolete) en HTML5 — usa <iframe> o maquetación CSS en su lugar.

Etiqueta	Descripción
`<frame>`	(Obsolete) Especifica un marco individual dentro de un frameset.
`<frameset>`	(Obsolete) Especifica un conjunto de marcos.
`<noframes>`	(Obsolete) Proporciona contenido alternativo para navegadores que no soportan marcos.
`<iframe>`	Incorpora otro documento en un marco en línea.

Etiquetas de imagen

Etiqueta	Descripción
`<img>`	Especifica una imagen.
`<map>`	Especifica un mapa de imagen del lado del cliente.
`<area>`	Define un área interactiva dentro de un mapa de imagen.
`<canvas>`	(HTML5) Una superficie de dibujo para renderizar gráficos al vuelo mediante scripting (generalmente JavaScript).
`<figcaption>`	(HTML5) Define un pie de foto para un elemento `<figure>`.
`<figure>`	(HTML5) Define contenido autónomo, como una ilustración o diagrama.
`<picture>`	(HTML5) Contenedor para múltiples recursos de imagen especificados dentro de elementos `<source>`.
`<svg>`	(HTML5) Contenedor para gráficos SVG en línea.

Etiquetas de audio/video

Etiqueta	Descripción
`<audio>`	(HTML5) Incorpora contenido de audio.
`<source>`	(HTML5) Especifica recursos multimedia alternativos para `<video>`, `<audio>` o `<picture>`.
`<track>`	(HTML5) Añade una pista de texto (subtítulos, leyendas) para `<video>` y `<audio>`.
`<video>`	(HTML5) Incorpora contenido de video.

Etiquetas de enlace

Etiqueta	Descripción
`<a>`	Define un hipervínculo.
`<link>`	Vincula el documento actual a un recurso externo (comúnmente una hoja de estilos CSS externa).
`<nav>`	(HTML5) Define un bloque de enlaces de navegación.

Etiquetas de lista

Etiqueta	Descripción
`<ul>`	Define una lista desordenada.
`<ol>`	Define una lista ordenada.
`<li>`	Define un elemento de lista.
`<dir>`	(Obsolete) Define una lista de directorios. Usa `<ul>` en su lugar.
`<dl>`	Define una lista de descripción (definición).
`<dt>`	Define un término/nombre en una lista de descripción.
`<dd>`	Define la descripción de un término en una lista de descripción.
`<menu>`	Define una lista (menú) de comandos.
`<menuitem>`	(Obsolete) Definía un comando en un menú contextual. Eliminado del estándar y sin soporte en navegadores modernos.

Etiquetas de tabla

Etiqueta	Descripción
`<table>`	Define una tabla.
`<caption>`	Define el título de la tabla.
`<th>`	Define una celda de encabezado en una tabla.
`<tr>`	Define una fila de celdas en una tabla.
`<td>`	Define una celda en una tabla.
`<thead>`	Agrupa un conjunto de filas que describen las etiquetas de columna de una tabla.
`<tbody>`	Agrupa un conjunto de filas que definen el cuerpo principal de los datos de la tabla.
`<tfoot>`	Define el pie de una tabla.
`<col>`	Define valores para una o más columnas en un elemento `<colgroup>`.
`<colgroup>`	Especifica un grupo de una o más columnas en una tabla para su formato.

Etiquetas genéricas (presentacionales)

Estas etiquetas no tienen ningún significado inherente. Son contenedores que se estilizan con CSS. Úsalas solo cuando ningún elemento semántico sea apropiado.

Etiqueta	Descripción
`<div>`	Define un contenedor genérico a nivel de bloque.
`<span>`	Define un contenedor genérico en línea.
`<style>`	Contiene información de estilo (comúnmente CSS) para el documento.

Etiquetas semánticas

Los elementos semánticos describen el significado de su contenido, ayudando a los navegadores, motores de búsqueda y tecnologías de asistencia. Consulta Elementos semánticos en HTML5.

Etiqueta	Descripción
`<header>`	(HTML5) Define un encabezado o un bloque de contenido introductorio.
`<footer>`	(HTML5) Define un pie de página para un documento o sección.
`<main>`	(HTML5) Especifica el contenido principal del documento.
`<section>`	(HTML5) Define una agrupación temática de contenido.
`<article>`	(HTML5) Define contenido autónomo e independientemente distribuible.
`<aside>`	(HTML5) Define contenido tangencialmente relacionado con el contenido circundante.
`<details>`	(HTML5) Un widget de divulgación que el usuario puede abrir o cerrar.
`<summary>`	(HTML5) Define el encabezado visible para un elemento `<details>`.
`<dialog>`	(HTML5) Define un cuadro de diálogo o ventana modal.
`<data>`	(HTML5) Vincula contenido con un valor legible por máquina.

Etiquetas de metadatos

Etiqueta	Descripción
`<head>`	Contiene metadatos sobre el documento, que no se muestran al usuario.
`<meta>`	Define metadatos como el conjunto de caracteres, viewport y descripción.
`<base>`	Define la URL base y/o el destino para todos los enlaces relativos de una página.
`<basefont>`	(Obsolete) Establecía una fuente, tamaño y color predeterminados. Usa CSS en su lugar.
`<template>`	(HTML5) Contiene marcado inerte que no se renderiza pero puede clonarse e insertarse con JavaScript.

Etiquetas de scripting y programación

Etiqueta	Descripción
`<script>`	Incorpora o referencia un script ejecutable (generalmente JavaScript).
`<noscript>`	Define contenido de reserva para navegadores con scripting desactivado o no soportado.
`<embed>`	Incorpora contenido externo (como un complemento o medio) en el punto especificado.
`<object>`	Incorpora un recurso externo (imagen, contexto de navegación anidado, contenido de complemento).
`<param>`	Define un parámetro para un elemento `<object>`.
`<applet>`	(Obsolete) Incorporaba un applet Java. Eliminado del estándar; usa `<object>` o `<embed>` en su lugar.

Práctica

¿Cuáles de las siguientes etiquetas son obsoletas y NO deben usarse en código HTML nuevo?

`<center>` (centra el contenido)`<font>` (establece fuente, color y tamaño)`<article>` (contenido autónomo)`<applet>` (incorporaba un applet Java)`<span>` (contenedor genérico en línea)