Referencia de 126 etiquetas HTML
Qué hace cada etiqueta, si necesita cierre y qué atributos se usan de verdad, en una línea.
Esqueleto5
El esqueleto que tiene todo documento, con orden y lugar fijos.
<html>El elemento raíz que envuelve todo el documento; su atributo lang declara el idioma.<head>Contiene información del documento que no se muestra: título, meta, estilos.<body>Todo lo que el lector ve realmente va dentro de este elemento.<title>El título del documento que aparece en la pestaña y en los resultados de búsqueda.<base>Define la URL base contra la que se resuelven los enlaces relativos.
Secciones17
Divide la página en bloques con sentido; buscadores y lectores de pantalla siguen esta estructura.
<header>La parte introductoria de una sección: un título, un logotipo, navegación.<nav>Un bloque de enlaces de navegación principales; no cualquier grupo de enlaces.<main>El contenido principal del documento: uno por página, sin cabecera ni pie.<section>Una agrupación temática con su encabezado, no una caja genérica.<article>Una pieza que se sostiene por sí sola: un artículo, una publicación, un comentario.<aside>Contenido al margen del flujo principal: si se quita, el texto sigue leyéndose.<footer>La parte final de una sección: copyright, contacto, enlaces relacionados.<div>Una caja sin significado propio: úsala solo cuando ningún otro elemento encaje.<h1>El encabezado de nivel superior de la página: como regla, uno por documento.<h2>Un encabezado un nivel por debajo de h1, para dividir la página en partes.<h3>Un encabezado que subdivide lo que hay bajo un h2.<h4>Un encabezado de cuarto nivel: llegar tan hondo suele indicar que conviene repensar la estructura.<h5>Un encabezado de quinto nivel: rara vez hace falta.<h6>El sexto y más pequeño nivel de encabezado.<hgroup>Agrupa un encabezado con el subtítulo que le acompaña.<address>Marca los datos de contacto del artículo o documento, no cualquier dirección postal.<search>Marca un grupo de controles de búsqueda; es una incorporación reciente al estándar.
Bloques de texto7
Texto que fluye como bloque: párrafos, citas, listados de código.
<p>Un párrafo. El navegador lo cierra por ti si omites la etiqueta de cierre.<br>Un salto de línea; no sirve para separar párrafos.<hr>Marca un cambio de tema; no es una simple línea decorativa.<pre>Muestra el texto tal cual: se conservan espacios y saltos de línea.<blockquote>Una cita larga de otra fuente; la URL de origen va en el atributo cite.<figure>Una figura o bloque de código autocontenido al que remite el texto; puede moverse sin perder sentido.<figcaption>El pie de una figura, como primer o último hijo dentro de figure.
Marcado en línea30
Marca parte de una línea sin empezar otra.
<a>Un enlace a otro lugar; sin href es un marcador, no un enlace.<span>Una caja en línea sin significado, para dar estilo a parte de un texto.<strong>Marca el texto como importante; verse en negrita es un efecto, no el objetivo.<em>La parte que enfatizarías al leer en voz alta; la cursiva es solo su forma visual.<b>Llama la atención sin implicar importancia; usa strong si de verdad importa.<i>Texto en otro registro: extranjerismos, nombres científicos, pensamientos.<u>Subraya texto que requiere una anotación no textual, como un error ortográfico.<s>Tacha contenido que ya no es correcto; para el historial de ediciones usa del.<mark>Resalta la parte relevante para quien lee, como un rotulador.<small>Letra pequeña al margen: descargos de responsabilidad, líneas de copyright.<sub>Texto en subíndice, como el 2 de H₂O.<sup>Texto en superíndice, para potencias y llamadas de nota.<code>Un fragmento de código, normalmente en tipografía monoespaciada.<kbd>Representa una tecla que pulsa el usuario, como Ctrl o Enter.<samp>La salida producida por un programa.<var>El nombre de una variable en una fórmula o en código.<q>Una cita corta en línea; el navegador añade las comillas.<cite>Indica el título de una obra, no el nombre de una persona.<abbr>Una abreviatura; escribe el desarrollo en el atributo title.<time>Una fecha u hora; el atributo datetime lleva la forma legible por máquina.<data>Añade un valor legible por máquina junto al que ve la persona.<dfn>Marca el término que se está definiendo en ese punto.<bdi>Aísla texto cuya dirección podría alterar la línea que lo rodea.<bdo>Fuerza la dirección del texto; el atributo dir es obligatorio.<ruby>Anotación ruby: la lectura sobre los caracteres, se usa con rt.<rt>Dentro de ruby, contiene la lectura misma.<rp>Paréntesis de reserva para navegadores que no saben mostrar ruby.<wbr>Sugiere un punto donde puede romperse la línea; útil en URLs largas.<ins>Contenido añadido después: se usa cuando el documento muestra su historial.<del>Contenido eliminado; forma pareja con ins para mostrar el historial.
Listas7
Listas ordenadas y sin ordenar, más listas de términos.
<ul>Una lista sin orden: cambiar el orden no altera el sentido.<ol>Una lista ordenada; start fija el primer número y reversed cuenta al revés.<li>Un elemento de la lista; va dentro de un ul o un ol.<dl>Una lista que empareja términos con sus descripciones.<dt>Dentro de un dl, es el término que se describe.<dd>La descripción que sigue a un dt; un término puede tener varias.<menu>Una lista de comandos o herramientas; hoy se comporta igual que ul.
Tablas10
Datos en filas y columnas; no es un recurso de maquetación.
<table>Contiene datos en filas y columnas; no es una herramienta de maquetación.<thead>Las filas de encabezado de la tabla; se repiten en cada página impresa.<tbody>Las filas del cuerpo; el navegador lo añade aunque no lo escribas.<tfoot>Las filas de resumen al pie de la tabla, como los totales.<tr>Una fila de la tabla, con celdas th o td dentro.<th>Una celda de encabezado; scope indica si describe una fila o una columna.<td>Una celda de datos; colspan y rowspan la fusionan por columnas o filas.<caption>El título de toda la tabla, colocado como su primer hijo.<colgroup>Trata varias columnas como grupo, útil para estilos por columna.<col>Dentro de colgroup, señala una columna, o tantas como diga span.
Formularios14
Controles que toman un valor y lo envían.
<form>Agrupa entradas para enviarlas; action indica adónde y method cómo.<input>Un control de entrada; el atributo type lo convierte en texto, número, fecha, color o archivo.<textarea>Un cuadro de texto multilínea; el texto inicial va entre las etiquetas.<button>Un botón; dentro de un formulario, omitir type lo convierte en botón de envío.<select>Un desplegable para elegir un valor; con multiple se pueden elegir varios.<option>Una opción dentro de un select.<optgroup>Agrupa opciones bajo un encabezado con etiqueta.<label>Una etiqueta para un campo; con for, hacer clic en el texto activa el campo.<fieldset>Agrupa controles relacionados; disabled los desactiva todos a la vez.<legend>El título de un fieldset, como su primer hijo.<datalist>Sugerencias para un campo; el usuario puede escribir otra cosa igualmente.<output>Contiene el resultado de un cálculo; for indica de qué campos proviene.<progress>Una barra que muestra cuánto ha avanzado una tarea.<meter>Muestra un valor dentro de un rango conocido; no sirve para el progreso.
Multimedia10
Imágenes, audio, vídeo y superficies para dibujar.
<img>Una imagen; alt debe transmitir lo que la imagen comunica.<picture>Permite elegir otra imagen según el tamaño de pantalla o el formato.<source>Un archivo candidato dentro de picture, video o audio.<video>Reproduce vídeo; autoplay suele funcionar solo junto con muted.<audio>Reproduce sonido; sin controls no se ve nada en pantalla.<track>Añade subtítulos o descripciones al medio, apuntando a un archivo WebVTT.<canvas>Una superficie en blanco para dibujar con script; lo dibujado no es texto.<svg>Dibuja gráficos vectoriales en línea; se mantienen nítidos a cualquier tamaño.<map>Superpone regiones pulsables sobre una imagen; se usa con area.<area>Una región pulsable dentro de un map, definida por forma y coordenadas.
Incrustación4
Mete otro documento o recurso dentro de este.
Script y estilo5
Añade comportamiento y aspecto al documento.
<script>Carga o contiene JavaScript; defer lo ejecuta tras analizar el documento.<noscript>Contenido visible solo cuando el script está desactivado.<style>CSS escrito directamente en el documento, normalmente dentro de head.<template>Un fragmento que no se muestra ahora y se clona luego por script.<slot>Reserva un lugar dentro de un componente web para contenido externo.
Info del documento2
Información que leen navegadores y buscadores, no personas.
Desplegables3
Cosas que se abren y cierran al pulsar, sin JavaScript.
Obsoletas12
Etiquetas retiradas del estándar; solo aparecen en documentos antiguos.
<center>La forma antigua de centrar; hoy se hace con CSS.<font>La etiqueta antigua para fijar tipografía, tamaño y color.<marquee>La antigua etiqueta de texto en marcha; la sustituye la animación CSS.<blink>Hacía parpadear el texto; ningún navegador lo admite ya.<big>La etiqueta antigua para agrandar el texto un paso.<strike>La antigua etiqueta de tachado; hoy se usan s o del.<tt>La antigua etiqueta monoespaciada; la sustituye code.<frame>Un panel del antiguo método de dividir la ventana entre documentos.<frameset>El antiguo contenedor que colocaba frames en lugar de body.<acronym>La antigua etiqueta de siglas; hoy basta con abbr.<applet>La antigua etiqueta de applets de Java; el entorno ya no existe.<dir>La antigua etiqueta de listado de directorios; ul ocupó su lugar.
Cómo leerlo
- La mayoría de etiquetas van en pareja, apertura y cierre. Solo las que no tienen contenido —img, br— quedan sin cerrar.
- Escribir </br> en un elemento vacío no sirve de nada: el navegador lo ignora o añade una línea en blanco.
- La apariencia es cosa del CSS. La etiqueta dice qué es algo; la negrita o la cursiva son la consecuencia.
- Elegir la etiqueta que encaja con el significado ayuda a buscadores y lectores de pantalla. Envolverlo todo en div tira esa información.
Preguntas frecuentes
Q. ¿Cuántas etiquetas HTML hay?
Unas 110 siguen vivas en el estándar y alrededor de 130 contando las obsoletas. Esta referencia recoge 126: las que se usan hoy y las que aún aparecen en documentos antiguos.
Q. ¿Qué etiquetas no llevan cierre?
Las que no tienen contenido: img, br, hr, input, meta, link y alguna más. Escribir </img> no hace nada. La barra al estilo XHTML de <br /> se permite, pero en HTML no cambia nada.
Q. ¿En qué se diferencian div y section?
Un div es una caja sin significado; una section es un grupo temático con encabezado. Si cabría un título ahí, usa section; si solo necesitas algo donde colgar estilos, div es lo honesto.
Q. ¿Se pueden escribir en mayúsculas?
HTML no distingue mayúsculas, así que <DIV> funciona. La convención es minúscula, y en contextos XML como XHTML o SVG solo la minúscula es válida.
Q. ¿Qué pasa si uso una etiqueta obsoleta?
La mayoría de navegadores todavía la dibuja. Pero el estándar la retiró, así que puede desaparecer en cualquier momento, y ya existen sustitutos: CSS para center y font, animación CSS para marquee.