Referencia de etiquetas HTML
Los elementos HTML que más usarás, agrupados por propósito. Prefiere etiquetas semánticas (como <nav> y <article>) frente a <div> genéricos cuando puedas — mejoran la accesibilidad y el SEO. Para ordenar el marcado, usa el formateador de HTML.
Actualizado 2026-07-06
Estructura del documento
| Etiqueta | Para qué sirve |
|---|---|
| <html> | Raíz del documento |
| <head> | Metadatos: title, link, script (no se muestran en la página) |
| <body> | El contenido visible de la página |
| <title> | Título de la página (pestaña del navegador, resultados de búsqueda) |
| <meta> | Metadatos como charset, viewport y description |
| <link> | Enlace a un recurso externo, normalmente una hoja de estilos |
| <script> | Insertar o referenciar JavaScript |
| <style> | Insertar CSS en la página |
Texto
| Etiqueta | Para qué sirve |
|---|---|
| <h1>–<h6> | Títulos, de más a menos importante |
| <p> | Un párrafo de texto |
| <a> | Un hipervínculo (usa href) |
| <span> | Contenedor en línea sin significado propio |
| <strong> | Texto importante (negrita por defecto) |
| <em> | Texto enfatizado (cursiva por defecto) |
| <br> | Un salto de línea |
| <hr> | Un corte temático (regla horizontal) |
| <blockquote> | Una cita en bloque |
| <code> | Código en línea |
| <pre> | Texto preformateado (conserva los espacios) |
Listas
| Etiqueta | Para qué sirve |
|---|---|
| <ul> | Lista no ordenada (con viñetas) |
| <ol> | Lista ordenada (numerada) |
| <li> | Un elemento de lista |
| <dl> | Lista de descripción (pares término/definición) |
Enlaces y medios
| Etiqueta | Para qué sirve |
|---|---|
| <img> | Una imagen (usa src y alt) |
| <video> | Vídeo incrustado |
| <audio> | Audio incrustado |
| <svg> | Gráficos vectoriales en línea |
| <picture> | Imágenes adaptables con varias fuentes |
| <iframe> | Incrustar otra página dentro de esta |
Formularios
| Etiqueta | Para qué sirve |
|---|---|
| <form> | Un formulario que recoge y envía entradas |
| <input> | Una entrada de una línea (texto, casilla, radio, etc.) |
| <textarea> | Una entrada de texto multilínea |
| <button> | Un botón en el que se puede hacer clic |
| <select> | Una lista desplegable |
| <option> | Un elemento dentro de un <select> |
| <label> | Una etiqueta para un control de formulario (mejora la accesibilidad) |
Tablas
| Etiqueta | Para qué sirve |
|---|---|
| <table> | Una tabla de datos |
| <tr> | Una fila de la tabla |
| <td> | Una celda de la tabla |
| <th> | Una celda de encabezado |
| <thead> | Agrupa las filas de encabezado |
| <tbody> | Agrupa las filas del cuerpo |
Secciones semánticas
| Etiqueta | Para qué sirve |
|---|---|
| <header> | Contenido introductorio para una página o sección |
| <nav> | Un bloque de enlaces de navegación |
| <main> | El contenido principal de la página (uno por página) |
| <section> | Una agrupación temática de contenido |
| <article> | Contenido autónomo (una entrada, una tarjeta) |
| <aside> | Contenido tangencial (una barra lateral) |
| <footer> | Pie para una página o sección |
| <figure> | Medios autónomos con un pie de foto opcional |
Herramientas relacionadas