Want to create interactive content? It’s easy in Genially!

TABLA PERIÓDICA DE ETIQUETAS HTML

Vargas Ortiz Axel Kristoff

Created on September 26, 2025

Start designing with a free template

Discover more than 1500 professional designs like these:

Explore all templates

TABLA PERIÓDICA DE ETIQUETAS HTML

!DOCTYPE html

object

Multimedia y gráficos

Estructura del documento

Listas y tablas

style

header

caption

button

Texto y contenido básico

param

Enlaces, interactividad

html

Secciones semanáticas

Formularios

script

head

footer

details

img

colgroup

sup

title

mark

small

dfn

noscript

main

time

portal

cite

rtc

bdi

nav

col

dialog

picture

span

body

base

section

h1...h6

pre

abbr

ruby

bdo

div

thead

source

summary

link

article

var

blockquote

code

strong

tbody

area

iframe

figcaption

address

template

kbd

map

sub

slot

CAPTION

Es el título o leyenda de una tabla. Debe colocarse inmediatamente después de la etiqueta <table> y antes de cualquier fila para describir el contenido de la tabla. Mejora la accesibilidad. <table border="1"> <caption>Lista de alumnos</caption> <tr><th>Nombre</th><th>Edad</th></tr> <tr><td>José</td><td>22</td></tr> </table>

DETAILS

Crea una sección desplegable que el usuario puede abrir o cerrar. Es ideal para preguntas frecuentes (FAQ), contenido adicional o descripciones largas que no quieres mostrar siempre. Funciona sin JavaScript y mejora la accesibilidad. <details> <summary>Ver más información</summary> <p>Este es el contenido oculto que se despliega.</p> </details>

CITE

Indica el título de una obra, autor o referencia de la fuente. Se usa para citar obras, libros, películas, etc. <p>Leí <cite>El Quijote</cite> el año pasado.</p>

COL

Define propiedades para una sola columna o grupo de columnas dentro de <colgroup>. Sirve para aplicar ancho, color o clases a columnas completas sin repetir estilos en cada celda. <table> <colgroup> <col style="background-color: #ddd"> <col style="background-color: #eee"> </colgroup> <tr><th>Producto</th><th>Precio</th></tr> <tr><td>Libro</td><td>$10</td></tr> </table>

CITE

Indica el título de una obra, autor o referencia de la fuente. Se usa para citar obras, libros, películas, etc. <p>Leí <cite>El Quijote</cite> el año pasado.</p>

OUTPUT

Muestra un resultado calculado dentro del formulario, normalmente generado por JavaScript. Es semántico para indicar que ese texto es una salida. <form oninput="resultado.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a" value="0"> + <input type="number" id="b" value="0"> = <output name="resultado">0</output> </form>

ABBR

Sirve para abreviaturas. Permite mostrar el significado completo al pasar el cursor gracias al atributo title. <p>El <abbr title="HyperText Markup Language">HTML</abbr> es un lenguaje de marcado.</p>

COLGROUP

Permite agrupar varias columnas de una tabla para aplicarles atributos o estilos de forma conjunta. Va después del <caption> y antes de las filas <tr>. <table> <colgroup> <col span="2" style="background-color: #f0f0f0"> </colgroup> <tr><th>Nombre</th><th>Edad</th></tr> <tr><td>Luis</td><td>30</td></tr> </table>

SAMP

Representa la salida de un programa o sistema. Suele mostrarse con fuente monoespaciada. <p>Resultado: <samp>Operación completada</samp></p>

DL

Crea una definition list (lista de definiciones). Se usa para mostrar pares de términos y sus descripciones. Es muy útil para glosarios, especificaciones técnicas o atributos de un producto. <dl> <dt>HTML</dt> <dd>Lenguaje de marcado para crear páginas web.</dd> <dt>CSS</dt> <dd>Lenguaje para dar estilo a las páginas web.</dd> </dl>

ARTICLE

Indica un contenido independiente y autocontenido, como un artículo de blog, un comentario o una publicación. Puede tener su propio encabezado y pie. <article> <h2>Título del artículo</h2> <p>Texto del artículo…</p> </article>

LABEL

Proporciona un texto descriptivo para un control de formulario, mejorando la accesibilidad. Cuando el usuario hace clic en el <label>, se enfoca automáticamente el control asociado, gracias al atributo for o al contener el control dentro. <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre">

HEAD

Dentro de este elemento se coloca información que no se ve directamente en la página pero que es fundamental: metadatos, enlaces a hojas de estilo, scripts, fuentes, íconos, títulos y configuraciones para dispositivos móviles. Lo que está aquí ayuda a los navegadores y buscadores a entender y procesar la página. <head> <meta charset="UTF-8"> <title>Mi página</title> <link rel="stylesheet" href="estilos.css"> </head>

OBJECT

Permite incrustar objetos externos dentro de un documento HTML: aplicaciones, documentos PDF, animaciones SVG, etc. A diferencia de <embed>, <object> puede tener contenido alternativo dentro para navegadores que no soporten ese recurso. <object data="animacion.svg" type="image/svg+xml" width="300" height="300"> Tu navegador no soporta SVG. </object>

WBR

Sugiere un posible punto de corte de línea si el navegador necesita ajustar el texto. No se ve nada visualmente. <p>PalabraLarga<wbr>ConCorte</p>

TD

Table data cell. Crea una celda de datos en una fila de tabla. Va dentro de <tr> y puede contener texto, imágenes, enlaces o cualquier otro elemento HTML. <tr> <td>Carlos</td> <td>28</td> </tr>

TIME

Representa una fecha, hora o duración de manera semántica, con un atributo datetime para que las máquinas lo interpreten. <p>Publicado el <time datetime="2025-09-25">25 de septiembre de 2025</time></p>

RT

Texto de anotación ruby (traducción o guía de pronunciación). <ruby> 漢<rt>Kan</rt> </ruby>

AUDIO

Inserta un archivo de audio en la página. Puede reproducirse con controles nativos (controls), en bucle (loop), con reproducción automática (autoplay) y más. Puede incluir varias fuentes con <source>. <audio controls> <source src="cancion.mp3" type="audio/mpeg"> Tu navegador no soporta el audio. </audio>

PICTURE

Permite ofrecer múltiples versiones de una imagen según el ancho de pantalla, la densidad de píxeles o el formato soportado por el navegador. Contiene uno o varios <source> y una etiqueta <img> de respaldo. <picture> <source srcset="imagen-grande.webp" type="image/webp"> <source srcset="imagen-grande.jpg" type="image/jpeg"> <img src="imagen-grande.jpg" alt="Paisaje de montaña"> </picture>

DATALIST

Crea una lista de sugerencias para un <input> de texto. El usuario puede escribir libremente o elegir una de las opciones sugeridas. Debe ir enlazado al list del <input>. <label for="navegador">Navegador:</label> <input list="browsers" id="navegador" name="navegador"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Edge"> </datalist>

Muestra texto tachado que ya no es relevante, pero se mantiene visible. <p>Precio <s>$100</s> $80</p>

Aplica negrita visual sin indicar importancia semántica. Se usa cuando solo quieres resaltar algo visualmente. <p>Este texto es <b>negrita visual</b>.</p>

OUTPUT

CAPTION

RB

Elemento base en anotaciones ruby (principalmente para idiomas asiáticos). <ruby> <rb>漢</rb><rt>Kan</rt> </ruby>

SUB

Muestra texto en subíndice (debajo de la línea). <p>H<sub>2</sub>O</p>

BDI

Aísla un fragmento de texto cuyo idioma o dirección de escritura puede ser diferente al del resto del contenido para que se muestre correctamente. <p>Usuario: <bdi>علي</bdi></p>

DT

Es el definition term, el término de la lista de definiciones. Va dentro de <dl> y precede a uno o varios <dd>. <dl> <dt>CPU</dt> <dd>Unidad Central de Procesamiento</dd> </dl>

BDO

Permite forzar la dirección del texto (izquierda a derecha o derecha a izquierda) mediante el atributo dir. <p><bdo dir="rtl">Texto invertido</bdo></p>

SCRIPT

Se utiliza para incluir o enlazar código JavaScript que da interactividad y funcionalidad avanzada a la página. Puede ir en <head> (para scripts necesarios antes de cargar la página) o justo antes de cerrar <body> (para scripts que actúan sobre elementos ya cargados). <script> alert("Hola mundo"); </script>  <script src="mi-script.js"></script>

SUMMARY

Es el título visible o resumen que acompaña a <details>. El usuario hace clic en él para abrir o cerrar la sección desplegable. Sin <summary>, el <details> igualmente funciona, pero no hay un encabezado visible. <details> <summary>Haz clic para leer más</summary> <p>Texto oculto que se revela al expandir.</p> </details>

RTC

Agrupa múltiples anotaciones ruby para el mismo carácter base. <ruby> 漢<rtc><rt>Kan</rt></rtc> </ruby>

BUTTON

Crea un botón interactivo que puede usarse para enviar formularios, ejecutar scripts JavaScript o disparar cualquier tipo de acción. A diferencia de <input type="button">, este puede contener otros elementos HTML dentro (como imágenes o íconos). Puede ser de tipo submit, reset o button. <button onclick="alert('Hola!')">Haz clic</button>

El elemento anchor o “ancla” crea un hipervínculo a otra página web, a un archivo, a una dirección de correo o incluso a una sección interna de la misma página mediante un “id”. Es uno de los pilares de la navegación en la web porque permite conectar recursos y moverse entre ellos. Además puede usarse para descargar archivos si se le agrega el atributo download. <a href="https://www.ejemplo.com">Visitar sitio</a>

H1...H6

Son encabezados jerárquicos. <h1> es el título principal de la página o sección y tiene mayor importancia semántica; <h6> es el de menor nivel. Ayudan a estructurar el contenido, mejorar la accesibilidad y el SEO. <h1>Título principal</h1> <h2>Subtítulo</h2> <h3>Subsubtítulo</h3>

TFOOT

Agrupa las filas del pie de tabla, normalmente para totales o notas. Aunque se declara antes que <tbody> en el HTML, los navegadores lo muestran al final. <table border="1"> <thead><tr><th>Mes</th><th>Ventas</th></tr></thead> <tbody> <tr><td>Abril</td><td>700</td></tr> </tbody> <tfoot> <tr><td>Total</td><td>700</td></tr> </tfoot> </table>

BASE

Permite establecer una URL base para todos los enlaces y recursos relativos del documento. Es útil cuando se quiere que todos los href y src que no son absolutos se resuelvan respecto a esa URL base, evitando repetirla. Solo puede haber un <base> y va en <head>. <head> <base href="https://midominio.com/"> <link rel="stylesheet" href="estilos.css"> </head>

FIGURE

Es un contenedor semántico para agrupar contenido ilustrativo (imágenes, gráficos, fragmentos de código, tablas…) y su <figcaption>. Se considera un bloque independiente dentro del flujo del documento. <figure> <img src="foto-evento.jpg" alt="Foto del evento"> <figcaption>Foto tomada durante la conferencia</figcaption> </figure>

PROGRESS

Muestra una barra de progreso que representa el avance de una tarea. Tiene los atributos value y max para indicar el estado actual y el total. <label for="progreso">Cargando...</label> <progress id="progreso" value="70" max="100"></progress>

DATALIST

TIME

FORM

Es el contenedor principal de un formulario. Agrupa todos los campos y controles que el usuario puede rellenar. También define atributos como action (la URL donde se envían los datos) y method (GET o POST). Es indispensable para enviar datos al servidor. <form action="/procesar" method="post">  </form>

CODE

Indica fragmentos de código en línea (no bloque). Se suele mostrar con fuente monoespaciada. <p>La función <code>alert()</code> muestra un mensaje.</p>

TFOOT

AREA

Define una zona interactiva dentro de una imagen cuando se usa junto con <map>. Cada <area> es un “hotspot” que puede tener forma rectangular, circular o poligonal, y al hacer clic redirige a una URL o ejecuta alguna acción. Esto permite hacer imágenes con distintas partes clicables. <img src="planeta.jpg" usemap="#mapa"> <map name="mapa"> <area shape="circle" coords="50,50,40" href="https://ejemplo.com/marte"> </map>1

Crea un párrafo de texto. Es el bloque básico para agrupar frases relacionadas. Añade automáticamente un margen superior e inferior. <p>Este es un párrafo de ejemplo con texto.</p>

VAR

Indica una variable o nombre de parámetro en un contexto técnico o matemático. <p>El área es <var>base</var> * <var>altura</var>.</p>

FIELDSET

Agrupa varios controles de formulario relacionados en un bloque visual y semántico. Normalmente se usa junto a <legend> para describir el grupo. <fieldset> <legend>Datos personales</legend> <label>Nombre: <input type="text"></label> <label>Edad: <input type="number"></label> </fieldset>

LINK

Sirve para enlazar recursos externos como hojas de estilo CSS, fuentes web, íconos, manifiestos de aplicaciones o feeds RSS. No tiene etiqueta de cierre y debe ir dentro de <head>. Es la forma recomendada para cargar CSS externo. <head> <link rel="stylesheet" href="estilos.css"> </head>

RB

Elemento base en anotaciones ruby (principalmente para idiomas asiáticos). <ruby> <rb>漢</rb><rt>Kan</rt> </ruby>

FIELDSET

AREA

TR

Significa table row (fila de tabla). Cada <tr> contiene celdas <th> o <td> y define una fila completa en la tabla. <table border="1"> <tr><th>Producto</th><th>Precio</th></tr> <tr><td>Zapatos</td><td>$50</td></tr> </table>

RP

Texto alternativo que se muestra entre paréntesis en navegadores que no soportan anotaciones ruby. <ruby> 漢<rp>(</rp><rt>Kan</rt><rp>)</rp> </ruby>

LI

Es el list item o elemento de lista. Va dentro de <ul> o <ol>. Cada <li> representa un ítem individual. Puedes incluso anidar listas dentro de un <li> para crear listas jerárquicas. <ul> <li>Frutas</li> <li>Verduras</li> </ul>

RTC

Agrupa múltiples anotaciones ruby para el mismo carácter base. <ruby> 漢<rtc><rt>Kan</rt></rtc> </ruby>

PORTAL

Es un nuevo elemento que permite incrustar otra página dentro de la actual como si fuera un iframe, pero con la posibilidad de hacer una transición fluida a esa página cuando el usuario interactúa. Aún no es ampliamente soportado. <portal src="https://ejemplo.com"></portal>

SOURCE

Dentro de <picture>, <audio> o <video>, define fuentes alternativas de imagen, audio o video. El navegador elegirá la primera compatible. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Tu navegador no soporta el video. </video>

SELECT

Muestra un menú desplegable para elegir entre varias opciones. Puede combinarse con <optgroup> para agrupar opciones. Es útil cuando hay que elegir una sola opción de una lista. <label for="ciudad">Ciudad:</label> <select id="ciudad" name="ciudad"> <option value="mexico">Ciudad de México</option> <option value="guadalajara">Guadalajara</option> </select>

HR

Dibuja una línea horizontal que representa una separación temática entre bloques de contenido. Visualmente es una barra horizontal. <p>Texto antes</p> <hr> <p>Texto después</p>

BLOCKQUOTE

Indica una cita larga proveniente de otra fuente. Por defecto se muestra con sangría. Puede llevar el atributo cite para indicar la URL de la fuente. <blockquote cite="https://ejemplo.com"> “Esta es una cita larga tomada de otra fuente.” </blockquote>

CANVAS

Proporciona un área de dibujo en píxeles que se manipula mediante JavaScript. Sirve para gráficos dinámicos, animaciones, juegos, visualización de datos, etc. Por sí solo es un lienzo vacío. <canvas id="miCanvas" width="300" height="150"></canvas> <script> const ctx = document.getElementById('miCanvas').getContext('2d'); ctx.fillStyle = 'blue'; ctx.fillRect(50, 50, 100, 75); </script>

Marca una cita breve en línea. Los navegadores suelen añadir comillas automáticamente alrededor del texto. <p>Ella dijo <q>estoy feliz</q> al verlo.</p>

TEMPLATE

Define un fragmento de HTML que se mantiene inactivo (no se muestra) hasta que se usa mediante JavaScript para clonarlo o insertarlo en el DOM. Es muy útil para crear plantillas dinámicas. <template id="mi-plantilla"> <p>Esto es un bloque que se insertará dinámicamente.</p> </template>

DD

Es la definition description, la descripción del término inmediatamente anterior. Completa el par término/definición dentro de <dl>. <dl> <dt>RAM</dt> <dd>Memoria de acceso aleatorio del sistema.</dd> </dl>

BR

Inserta un salto de línea dentro de un texto sin iniciar un nuevo párrafo. Se usa cuando quieres romper una línea en medio de un mismo bloque. <p>Primera línea<br>Segunda línea</p>

Aplica cursiva visual sin añadir énfasis semántico. Se usa para términos técnicos, nombres científicos, etc. <p>Nombre científico: <i>Homo sapiens</i></p>

TABLE

Define una tabla de datos. Agrupa filas y columnas para presentar información tabular de forma estructurada. Dentro de ella se usan etiquetas como <tr>, <th>, <td>, <thead>, <tbody> y <tfoot> para organizar su contenido. <table border="1"> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Ana</td> <td>25</td> </tr> </table>

SUB

Muestra texto en subíndice (debajo de la línea). <p>H<sub>2</sub>O</p>

LINK

UL

Significa unordered list (lista no ordenada). Crea una lista de elementos cuyos puntos no tienen un orden específico y, por defecto, aparecen con viñetas (•). Es útil para menús, características de productos, listas de tareas, etc. <ul> <li>Manzana</li> <li>Banana</li> <li>Naranja</li> </ul>

OPTGROUP

Permite agrupar opciones relacionadas dentro de un <select>, añadiendo una etiqueta descriptiva con label. Esto mejora la organización de menús largos. <select name="comida"> <optgroup label="Frutas"> <option>Manzana</option> <option>Plátano</option> </optgroup> <optgroup label="Verduras"> <option>Zanahoria</option> <option>Espinaca</option> </optgroup> </select>

SUMMARY

OL

Es la contraparte ordenada de <ul>. Ordered list muestra sus elementos numerados o con letras romanas. Se usa cuando el orden es importante, como pasos de un tutorial, ranking o instrucciones secuenciales. <ol> <li>Encender la computadora</li> <li>Abrir el navegador</li> <li>Escribir la URL</li> </ol>

ASIDE

Se utiliza para contenido complementario o lateral, como barras laterales, anuncios o notas que no forman parte directa del flujo principal del contenido. <aside> <h3>Publicidad</h3> <p>Banner promocional</p> </aside>

SLOT

Se usa en Web Components para marcar zonas donde se inyectará contenido externo. Permite que los componentes sean más flexibles y personalizables. <my-card> <span slot="titulo">Título dinámico</span> </my-card>

BR

Inserta un salto de línea dentro de un texto sin iniciar un nuevo párrafo. Se usa cuando quieres romper una línea en medio de un mismo bloque. <p>Primera línea<br>Segunda línea</p>

DETAILS

Subraya texto (sin significado semántico especial). <p>Texto <u>subrayado</u></p>

H1...H6

THEAD

Agrupa las filas de encabezado de la tabla. Separa semánticamente la cabecera del resto del contenido y permite que navegadores y lectores de pantalla la identifiquen. <table border="1"> <thead> <tr><th>Mes</th><th>Ventas</th></tr> </thead> <tbody> <tr><td>Enero</td><td>500</td></tr> </tbody> </table>

FOOTER

LEGEND

Es el título de un <fieldset>. Describe brevemente el grupo de campos que contiene para que el usuario sepa de qué se trata esa sección. <fieldset> <legend>Información de envío</legend> <label>Dirección: <input type="text"></label> </fieldset>

BODY

Es la parte visible de la página web, donde se coloca todo el contenido que el usuario ve: texto, imágenes, enlaces, botones, formularios, etc. Solo puede haber un <body> por documento. <body> <h1>Bienvenido</h1> <p>Este es el contenido visible.</p> </body>

TBODY

Agrupa el cuerpo principal de la tabla (todas las filas de datos). Junto con <thead> y <tfoot>, ayuda a organizar tablas grandes. <table border="1"> <thead><tr><th>Mes</th><th>Ventas</th></tr></thead> <tbody> <tr><td>Febrero</td><td>400</td></tr> <tr><td>Marzo</td><td>600</td></tr> </tbody> </table>

EMBED

Inserta contenido externo que no es HTML (por ejemplo, un PDF, un archivo multimedia o un plugin). Es más simple que <object> y suele usarse para contenido multimedia que el navegador puede manejar directamente. <embed src="documento.pdf" type="application/pdf" width="500" height="400">

NAV

Contiene enlaces de navegación principal o secundaria. Es la forma semántica de indicar menús y facilita a los usuarios y motores de búsqueda entender la estructura del sitio. <nav> <ul> <li><a href="/">Inicio</a></li> <li><a href="/contacto">Contacto</a></li> </ul> </nav>

BUTTON

SVG

Permite incrustar gráficos vectoriales escalables directamente en el HTML. Son independientes de la resolución y se pueden animar y estilizar con CSS. Ideal para iconos, diagramas y logotipos. <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>

HR

Dibuja una línea horizontal que representa una separación temática entre bloques de contenido. Visualmente es una barra horizontal. <p>Texto antes</p> <hr> <p>Texto después</p>

PARAM

Se utiliza dentro de <object> para pasar parámetros adicionales al objeto incrustado. Estos parámetros pueden configurar cómo se comporta el recurso embebido. <object data="video.mp4" type="video/mp4"> <param name="autoplay" value="true"> </object>

BODY

STRONG

Resalta texto con fuerte importancia semántica (por defecto negrita). A diferencia de <b>, sí indica importancia. <p><strong>¡Atención!</strong> Esto es importante.</p>

DT

Es el definition term, el término de la lista de definiciones. Va dentro de <dl> y precede a uno o varios <dd>. <dl> <dt>CPU</dt> <dd>Unidad Central de Procesamiento</dd> </dl>

IMG

Inserta una imagen rasterizada (JPG, PNG, GIF, WebP…) en la página. Es un elemento vacío (no tiene cierre). Es importante incluir el atributo alt para describir la imagen (accesibilidad y SEO). Se puede controlar su tamaño y estilo con CSS. <img src="foto.jpg" alt="Retrato de un gato" width="300">

OL

HEADER

Representa un encabezado introductorio para la página completa o para una sección/<article>. Puede contener títulos, subtítulos, logotipos o menús iniciales. <header> <h1>Mi sitio web</h1> <nav>…</nav> </header>

OPTGROUP

DFN

Indica la primera aparición o definición de un término dentro de un texto. <p><dfn>API</dfn> es un conjunto de funciones para interactuar con un sistema.</p>

STYLE

Permite insertar reglas CSS directamente en el documento HTML. Se recomienda para pequeños bloques de estilos internos o pruebas rápidas; para proyectos grandes es mejor usar archivos externos con <link>. <head> <style> body { background-color: lightblue; } h1 { color: darkblue; } </style> </head>

HTML

Es el elemento raíz que engloba todo el contenido de la página web. Dentro de él se encuentran las dos partes fundamentales del documento: la cabecera (<head>) con metadatos y el cuerpo (<body>) con el contenido visible. También suele incluir el atributo lang para indicar el idioma principal del documento, lo que mejora la accesibilidad y el SEO. <html lang="es"> <head>…</head> <body>…</body> </html>

SCRIPT

HEADER

PRE

Muestra texto preformateado, respetando espacios, saltos de línea y tabulaciones tal como se escriben en el HTML. Ideal para mostrar código. <pre> Línea 1 Línea 2 con sangría Línea 3 </pre>

SUP

Muestra texto en superíndice (arriba de la línea). <p>x<sup>2</sup></p>

PRE

Muestra texto preformateado, respetando espacios, saltos de línea y tabulaciones tal como se escriben en el HTML. Ideal para mostrar código. <pre> Línea 1 Línea 2 con sangría Línea 3 </pre>

TITLE

Define el título del documento que aparece en la pestaña del navegador, en marcadores o resultados de búsqueda. Es esencial para SEO y para que los usuarios sepan rápidamente de qué trata la página. Solo puede haber uno por documento y siempre va dentro de <head>. <head> <title>Página de ejemplo</title> </head>

INPUT

Es el campo de entrada más versátil. Sirve para texto, correo, contraseña, número, fecha, archivo y más, según su atributo type. Es la base de cualquier formulario porque capta datos de usuario. <input type="email" name="correo" placeholder="Tu email">

SUP

Muestra texto en superíndice (arriba de la línea). <p>x<sup>2</sup></p>

PROGRESS

LABEL

ADDRES

Proporciona información de contacto, como nombre, dirección, correo o teléfono. Los navegadores suelen mostrarlo en cursiva. <address> Contacto: Juan Pérez<br> <a href="mailto:juan@example.com">juan@example.com</a> </address>

INPUT

TEXTAREA

Crea un área de texto multilínea para respuestas largas o comentarios. A diferencia de <input>, permite escribir párrafos completos. Puedes controlar su tamaño con rows y cols o con CSS. <label for="comentario">Comentario:</label> <textarea id="comentario" name="comentario" rows="4" cols="40"></textarea>

RUBY

Contenedor para anotaciones ruby, usado en textos de idiomas asiáticos para mostrar pronunciación sobre caracteres. <ruby> 漢<rt>Kan</rt> </ruby>

THEAD

TEXTAREA

OPTION

Define cada opción individual dentro de un <select> o <datalist>. Cada opción tiene un value (lo que se envía al servidor) y el texto visible para el usuario. <select name="color"> <option value="rojo">Rojo</option> <option value="azul">Azul</option> </select>

DD

SMALL

SELECT

TITLE

MAP

Agrupa varias etiquetas <area> para formar un mapa de imagen. Un mapa de imagen es una sola imagen con distintas zonas activas que llevan a enlaces distintos. El atributo name del <map> se asocia con el atributo usemap del <img>. <img src="mapa.png" usemap="#mimapa"> <map name="mimapa"> <area shape="rect" coords="0,0,50,50" href="pagina1.html"> <area shape="rect" coords="60,0,110,50" href="pagina2.html"> </map>

TBODY

COL

SAMP

Representa la salida de un programa o sistema. Suele mostrarse con fuente monoespaciada. <p>Resultado: <samp>Operación completada</samp></p>

BDI

Aísla un fragmento de texto cuyo idioma o dirección de escritura puede ser diferente al del resto del contenido para que se muestre correctamente. <p>Usuario: <bdi>علي</bdi></p>

<!DOCTYPE html>

Es una declaración obligatoria al inicio de cualquier documento HTML que le indica al navegador qué versión de HTML se está utilizando. En la actualidad se usa para decir que la página está escrita con el estándar HTML5. No es una etiqueta y no tiene cierre. Sin ella, los navegadores pueden entrar en “modo compatibilidad” y renderizar de manera diferente. <!DOCTYPE html> <html lang="es"> <head>…</head> <body>…</body> </html>

STYLE

HEAD

OPTION

Muestra texto tachado que ya no es relevante, pero se mantiene visible. <p>Precio <s>$100</s> $80</p>

NOSCRIPT

Muestra un contenido alternativo si el navegador del usuario tiene desactivado JavaScript o no lo soporta. Esto mejora la accesibilidad y asegura que el usuario reciba un mensaje adecuado. <noscript> Tu navegador no tiene JavaScript habilitado. Algunas funciones no estarán disponibles. </noscript>

Subraya texto (sin significado semántico especial). <p>Texto <u>subrayado</u></p>

Marca una cita breve en línea. Los navegadores suelen añadir comillas automáticamente alrededor del texto. <p>Ella dijo <q>estoy feliz</q> al verlo.</p>

Aplica negrita visual sin indicar importancia semántica. Se usa cuando solo quieres resaltar algo visualmente. <p>Este texto es <b>negrita visual</b>.</p>

IFRAME

Incrusta dentro de la página actual otra página HTML o recurso web completo en un marco. Es como una ventana a otro sitio. Se usa para mostrar mapas, videos, widgets, aplicaciones, etc. Tiene atributos para controlar tamaño, bordes, seguridad (sandbox). <iframe src="https://www.ejemplo.com" width="600" height="400"></iframe>

TH

Table header cell. Crea una celda de encabezado en una fila. Por defecto, el texto aparece en negrita y centrado. Se usa dentro de <tr>. Puede tener atributos scope para indicar si es encabezado de columna o de fila. <tr> <th>Nombre</th> <th>Edad</th> </tr>

MATH

Permite incluir notación matemática en formato MathML directamente en HTML. Facilita mostrar fórmulas de manera accesible y estructurada. <math xmlns="http://www.w3.org/1998/Math/MathML"> <msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mn>4</mn> </math>

VAR

Indica una variable o nombre de parámetro en un contexto técnico o matemático. <p>El área es <var>base</var> * <var>altura</var>.</p>

TEMPLATE

TH

BDO

Permite forzar la dirección del texto (izquierda a derecha o derecha a izquierda) mediante el atributo dir. <p><bdo dir="rtl">Texto invertido</bdo></p>

ASIDE

ARTICLE

LEGEND

TD

Table data cell. Crea una celda de datos en una fila de tabla. Va dentro de <tr> y puede contener texto, imágenes, enlaces o cualquier otro elemento HTML. <tr> <td>Carlos</td> <td>28</td> </tr>

ABBR

Sirve para abreviaturas. Permite mostrar el significado completo al pasar el cursor gracias al atributo title. <p>El <abbr title="HyperText Markup Language">HTML</abbr> es un lenguaje de marcado.</p>

KBD

Indica una entrada que el usuario debe teclear. Los navegadores lo muestran en estilo de tecla. <p>Presiona <kbd>Ctrl</kbd> + <kbd>C</kbd> para copiar.</p>

DIV

Es un contenedor genérico en bloque sin significado semántico propio. Se usa para agrupar elementos y aplicarles estilos o scripts. Es el comodín de HTML cuando no hay un elemento más específico. <div class="caja"> <h2>Título</h2> <p>Contenido agrupado.</p> </div>

Crea un párrafo de texto. Es el bloque básico para agrupar frases relacionadas. Añade automáticamente un margen superior e inferior. <p>Este es un párrafo de ejemplo con texto.</p>

MAP

RT

Texto de anotación ruby (traducción o guía de pronunciación). <ruby> 漢<rt>Kan</rt> </ruby>

MAIN

Define el contenido principal del documento. Solo debe haber un <main> por página y no debe incluir cosas repetitivas como barras de navegación, encabezados o pies de página. Facilita a los lectores de pantalla saltar directamente al contenido importante. <main> <h1>Noticias</h1> <article>…</article> </main>

IFRAME

UL

SECTION

Representa una sección temática del documento, normalmente con su propio encabezado. Se usa para agrupar contenido relacionado dentro del cuerpo. <section> <h2>Sobre nosotros</h2> <p>Somos una empresa dedicada a...</p> </section>

SMALL

EM

Resalta un texto con énfasis semántico (por defecto cursiva). Se usa para marcar importancia en la entonación. <p>Este es un <em>texto enfatizado</em>.</p>

EM

Resalta un texto con énfasis semántico (por defecto cursiva). Se usa para marcar importancia en la entonación. <p>Este es un <em>texto enfatizado</em>.</p>

NOSCRIPT

SECTION

METER

Representa un valor dentro de un rango conocido, como calificaciones, capacidad de disco, niveles de batería, etc. A diferencia de <progress>, el valor no tiene que ser un progreso sino una medición. <p>Nivel de batería: <meter value="0.7">70%</meter></p>

BASE

HTML

DFN

Indica la primera aparición o definición de un término dentro de un texto. <p><dfn>API</dfn> es un conjunto de funciones para interactuar con un sistema.</p>

BLOCKQUOTE

CODE

Indica fragmentos de código en línea (no bloque). Se suele mostrar con fuente monoespaciada. <p>La función <code>alert()</code> muestra un mensaje.</p>

MARK

Resalta texto importante visualmente (por defecto fondo amarillo). <p>Esto es <mark>muy importante</mark> para recordar.</p>

FORM

WBR

Sugiere un posible punto de corte de línea si el navegador necesita ajustar el texto. No se ve nada visualmente. <p>PalabraLarga<wbr>ConCorte</p>

RUBY

Contenedor para anotaciones ruby, usado en textos de idiomas asiáticos para mostrar pronunciación sobre caracteres. <ruby> 漢<rt>Kan</rt> </ruby>

EMBED

NAV

DIALOG

Define un cuadro de diálogo o ventana modal que puede aparecer sobre el contenido de la página. Es nativo de HTML y puede abrirse y cerrarse con JavaScript. Se usa para mensajes emergentes, formularios de confirmación o pequeños paneles de interacción. <dialog id="miDialogo"> <p>Esto es un cuadro de diálogo.</p> <button onclick="document.getElementById('miDialogo').close()">Cerrar</button> </dialog> <button onclick="document.getElementById('miDialogo').showModal()">Abrir diálogo</button>

VIDEO

Inserta un archivo de video en la página con controles nativos. Soporta atributos como controls, autoplay, loop, muted, poster. Puedes usar <source> para ofrecer varios formatos y <track> para subtítulos. <video controls width="400"> <source src="pelicula.mp4" type="video/mp4"> <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español"> </video>

SPAN

Es un contenedor en línea sin significado semántico. Se usa para aplicar estilos o agrupar partes de texto. <p>Texto <span style="color:red">en rojo</span>.</p>

LI

TABLE

FIGCAPTION

Es la leyenda o pie de figura para un <figure>. Describe brevemente la imagen, gráfico o código que contiene, mejorando el contexto y la accesibilidad. <figure> <img src="grafica.png" alt="Gráfica de ventas"> <figcaption>Gráfica de ventas trimestrales</figcaption> </figure>

SLOT

COLGROUP

SPAN

Es un contenedor en línea sin significado semántico. Se usa para aplicar estilos o agrupar partes de texto. <p>Texto <span style="color:red">en rojo</span>.</p>

TR

KBD

Indica una entrada que el usuario debe teclear. Los navegadores lo muestran en estilo de tecla. <p>Presiona <kbd>Ctrl</kbd> + <kbd>C</kbd> para copiar.</p>

MAIN

STRONG

Resalta texto con fuerte importancia semántica (por defecto negrita). A diferencia de <b>, sí indica importancia. <p><strong>¡Atención!</strong> Esto es importante.</p>

MARK

Resalta texto importante visualmente (por defecto fondo amarillo). <p>Esto es <mark>muy importante</mark> para recordar.</p>

DIV

PARAM

OBJECT

FOOTER

DIALOG

DL

RP

Texto alternativo que se muestra entre paréntesis en navegadores que no soportan anotaciones ruby. <ruby> 漢<rp>(</rp><rt>Kan</rt><rp>)</rp> </ruby>

TRACK

Asocia subtítulos, descripciones o capítulos a un <video> o <audio>. Se usa junto con archivos en formato WebVTT (.vtt). Mejora la accesibilidad para personas con dificultades auditivas. <video controls> <source src="documental.mp4" type="video/mp4"> <track src="subtitulos-es.vtt" kind="subtitles" srclang="es" label="Español"> </video>

PORTAL

ADDRES

METER

DATA

Asocia un valor legible por máquinas (en el atributo value) con un contenido humano. Útil para microdatos. <p>Producto: <data value="12345">Zapatos</data></p>

DATA

Asocia un valor legible por máquinas (en el atributo value) con un contenido humano. Útil para microdatos. <p>Producto: <data value="12345">Zapatos</data></p>

TABLA PERIÓDICA DE ETIQUETAS HTML

Start designing with a free template

Transcript

CAPTION

DETAILS

CITE

COL

CITE

OUTPUT

ABBR

COLGROUP

SAMP

DL

ARTICLE

LABEL

HEAD

OBJECT

WBR

TD

TIME

RT

AUDIO

PICTURE

DATALIST

OUTPUT

CAPTION

RB

SUB

BDI

DT

BDO

SCRIPT

SUMMARY

RTC

BUTTON

H1...H6

TFOOT

BASE

FIGURE

PROGRESS

DATALIST

TIME

FORM

CODE

TFOOT

AREA

VAR

FIELDSET

LINK

RB

FIELDSET

AREA

TR

META

RP

LI

RTC

PORTAL

SOURCE

SELECT

HR

BLOCKQUOTE

CANVAS

TEMPLATE

DD

BR

TABLE

SUB

LINK

UL

OPTGROUP

SUMMARY

OL

ASIDE

SLOT

BR

DETAILS

H1...H6

THEAD

FOOTER